Как правильно использовать useEffect?

Question

[Ostic]

Здравствуйте.
Приложение состоит из одного компонента, который показывает текущие размеры страницы.
Если я делаю вот так, то сразу попадаю в цикл:

let PageSize = ( ) => {
  const [webPageSize, setWebPageSize] = useState(
    [document.documentElement.scrollWidth,
     document.documentElement.scrollHeight]
  )
  useEffect( ( ) => {
    setWebPageSize(
      [document.documentElement.scrollWidth,
       document.documentElement.scrollHeight]
     )
  }  , /* здесь надо передать второй аргумент, но не понимаю какой. на webPageSize ругается */ )

  return  ( 
    <h1>{`webPageSize width is ${webPageSize[0]}. webPageSize height is ${webPageSize[1]}`}</h1>
  )
}

Вопрос: можно ли передать здесь второй аргумент, чтобы не было цикла?

Вот так работает без ошибок и не ругается:

let PageSize = ( ) => {
  const [webPageSize, setWebPageSize] = useState(
    [document.documentElement.scrollWidth,
     document.documentElement.scrollHeight]
  )
  function handleWindowResize() {
    setWebPageSize(
      [document.documentElement.scrollWidth,
       document.documentElement.scrollHeight]
    )
  }
  window.addEventListener( "resize",  handleWindowResize,  false)
  useEffect( ( ) => {
    return ( ) => window.removeEventListener("resize", handleWindowResize, false)
  })
  return  (
    <h1>{`webPageSize width is ${webPageSize[0]}. webPageSize height is ${webPageSize[1]}`}</h1>
  )
}

но такое решение выглядит кривенько, по-моему.
Как правильно в такой ситуации поступить?

Answer 1

[Александр]

Второй вариант почти правильный.
1. Событие добавляете внутри useEffect;
2. В deps передаете пустой массив;
3. В рендере можно написать проще, не используя шаблонную строку.

const PageSize = () => {
  const [pageSize, setPageSize] = useState([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  const updatePageSize = () => setPageSize([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  useEffect(() => {
    window.addEventListener('resize', updatePageSize);

    return () => {
      window.removeEventListener('resize', updatePageSize);
    };
  }, []);

  return (
    <div>
      <p>page width is {pageSize[0]}</p>
      <p>page height is {pageSize[1]}</p>
    </div>
  );
};