marekpiechut

<Profiler
	id="user-profile"
	onRender={(
		id,
		phase,
		actualTime,
		baseTime,
		startTime,
		commitTime,
		interactions

marekpiechut

import { useState } from 'react'

const SlowComponent = ({ noSlowdown }) => {
  const arr = []
  if (!noSlowdown) {
    for (var i = 1000000 - 1; i >= 0; i--) {
      arr.push(i)
    }
  }

marekpiechut

const NotificationItem = React.memo<Props>(
	({ notification, onMmarkAsRead, session }) => <div>...</div>

marekpiechut

const NotificationItem = ({ notification, onMmarkAsRead, session }: Props) => <div>...</div>

marekpiechut

const useLazyMediaLoad = media => {
  const [url, setUrl] = useState<?string>(null)
  const targetRef = useRef<?HTMLElement>(null)

  useEffect(() => {
    if (!IntersectionObserver) {
      thumbLoader(media).then(setUrl)
    } else if (targetRef.current) {
      let observer = new IntersectionObserver(
        entries =>

marekpiechut

const ExerciseItem = ({ exercise, thumbLoader }: Props) => {
  const [url, setUrl] = useState<?string>(null)
  const thisRef = useRef<?HTMLDivElement>(null)

  const media = exercise.media.id

  useEffect(() => {
    if (IntersectionObserver) {
      let observer = new IntersectionObserver(
        entries =>

marekpiechut

{
  rootMargin: '0px 0px 200px 0px'
}

marekpiechut

const ExerciseItem = ({ exercise }: Props) => {
  const [url, setUrl] = useState<?string>(null)
  const thisRef = useRef<?HTMLDivElement>(null)

  useEffect(() => {
    let observer = new IntersectionObserver(
      entries => entries.forEach(entry => {
        if (entry.isIntersecting) {
          thumbLoader(media).then(setUrl)
          observer = observer.disconnect()

marekpiechut

const ExerciseItem = ({ exercise }: Props) => {
  const [url, setUrl] = useState<?string>(null)

  useEffect(() => {
    thumbLoader(media).then(setUrl)
  }, [media, thumbLoader])

  return <div css={styles.thumb} style={{ backgroundImage: `url(${url})` }} />
}

marekpiechut

const ExerciseItem = ({ exercise }: Props) => {
  const [url, setUrl] = useState<?string>(null)
  return <div css={styles.thumb} style={{ backgroundImage: `url(${url})` }} />
}