addEventHandler внутри useEffect или перед ним - PullRequest
Новая
       7

addEventHandler внутри useEffect или перед ним

0 голосов
/ 06 апреля 2020

Рассмотрим следующий хук, который работает как положено: 

const useWindowSize = () => {
  const getSize = () => [window.innerHeight, window.innerWidth];
  const [size, setSize] = useState(getSize());
  const onResize = useCallback(() => setSize(getSize()), []);
  useEffect(() => {
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [onResize]);
  return size;
};

Мы также можем добавить обработчик событий вне useEffect (и фактически получить размер до первого рендеринга?) И объявить useEffect с: 

  window.addEventListener("resize", onResize);
  useEffect(() => () => window.removeEventListener("resize", onResize), [onResize]);

Каковы преимущества и недостатки обоих подходов? Какой из них предпочтительнее?

...