Почему некоректно обновляется ширина в кастомном хуке?

Question

[Kentavr16]

Есть элементарный кастомный хук

function useResize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    const handleOrientationChange = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);
    window.addEventListener("orientationchange", handleOrientationChange);

    return () => {
      window.removeEventListener("resize", handleResize);
      window.removeEventListener("orientationchange", handleOrientationChange);
    };
  }, []);

  return width;
}

export default useResize;

Дебажу в Хроме. При повороте девайса в ландшафт ширина обновляется правильно, становится условно 700. При развороте обратно - ширина окна не обновляется, так 700 и остается. Код простой как двери, не могу понять в чем дело.

Answer 1

[Aetae]

Классика: ты этот width наверняка присваиваешь какому-то элементу. Соответственно, ширина этого элемента становится ровна width. Когда ты меняешь ориентацию - ты не убираешь width перед этим, а значит innerWidth окна не минимальное значение, а то, какое получилось с учётом элемента с width, который это окно распирает.
Т.е. после каждого увеличения width, window.innerWidth не может быть меньше чем width.

Такие задачи принято решать вёрсткой.

Comments

[Kentavr16]

Интересно. Не думаю что это связано, т.к. данные показаны из лога в самом кастомном хуке.

Вот код который принимает данные:

const [drawerWidth, setDrawerWidth] = React.useState(400);

  const size = useWindowSize();

  React.useEffect(() => {
    if (size.width) {
      setDrawerWidth(size.width > 500 ? 300 : 650);
    }
  }, [size.width]);

С удовольствием набросал бы воспроизводимый пример в песочнице, но там насколько знаю нет нативного способа вызвать orientationchange

[Aetae]

Этим условием ты всё сильно запутываешь.:)
Но в таком случае скорее всего проблема в неоднократном срабатывании:
width меняется при orientationchange - раз,
width меняется при resize(они всё равно вызывается и при смене ориентации) - два,
при смене width в некоторых случаях вызывается resize который снова меняет width - три(а может четыре, пять).