Заметки про React(@ru_react_notes). Кастомный хук для переходов без мерцаний В своем блоге Джеймс Керр поделился кастомным хуком для пр

Кастомный хук для переходов без мерцаний В своем блоге Джеймс Керр поделился кастомным хуком для предотвращения мерцаний при переключении данных на графике. Каждый раз, когда пользователь выбирает другой набор данных для графика, происходит запрос на сервер за новыми данными и перерисовка графика. Когда запрос вернет данные, то произойдет мерцание интерфейса при рендере графика с новыми данными. Для решения данной проблемы автор написал кастомный хук useDataTransition. Верхнеуровнево нужно предотвратить дочернему компоненту видеть новые данные до тех пор, пока не завершится переход или не истечет время ожидания.

export function useDataTransition<T>(
  real: T,
  inTransition: boolean,
  timeout: number
) {
  const [timeExpired, setTimeExpired] = useState(false)
  const cache = useRef(real)

  useEffect(() => {
    if (!inTransition) cache.current = real
  }, [inTransition, real])

  useEffect(() => {
    let id: number
    if (inTransition) {
      id = setTimeout(() => setTimeExpired(true), timeout)
    } else {
      setTimeExpired(false)
    }
    return () => clearTimeout(id)
  }, [inTransition, timeout])

  if (inTransition && !timeExpired) return cache.current
  else return real
}