реагировать на хуки. использовать обновление эффекта window.innerHeight

Question

Я хочу обновить состояние с внутренней высотой окна при изменении размера экрана. Когда я регистрирую высоту состояния в хуке useEffect, я получаю 0 каждый раз, однако, когда я захожу в функцию updateWindowDimensions, значение высоты обновляется, как и ожидалось.

Как я могу обновлять состояние с новым значением каждый раз?

const [height, setHeight] = useState(0);

const updateWindowDimensions = () => {
    const newHeight = window.innerHeight;
    setHeight(newHeight);
    console.log('updating height');   
};

 useEffect(() => {
     window.addEventListener('resize', updateWindowDimensions);
     console.log("give height", height);
 }, []);

Answer 1

Ваш useEffect запускается только один раз, когда компонент монтируется (из-за пустого массива [], который вы передали в качестве второго аргумента)

Если вы просто войдете за его пределы, вы ' Вы увидите, что значение вашего состояния корректно обновляется

  const [height, setHeight] = useState(0);

  useEffect(() => {
    const updateWindowDimensions = () => {
      const newHeight = window.innerHeight;
      setHeight(newHeight);
      console.log("updating height");
    };

    window.addEventListener("resize", updateWindowDimensions);

    return () => window.removeEventListener("resize", updateWindowDimensions) 

  }, []);

  console.log("give height", height);

Также вы должны переместить объявление этой функции в useEffect, чтобы оно не было повторно объявлено при каждом рендеринге