Почему в функции выводиться 0?

Question

[Денис Соколов]

Вот код. Почему то в useEffect отображается изменение active а в функции постоянно 0

const [active, setActive] = useState(0);

  const changeActiveSlider = (e) => {
    console.log(active); // Тут 0 постоянно
      if (e.wheelDeltaY > 0) {
        setActive((prev) => prev - 1)
      }

      if (e.wheelDeltaY < 0) {
        setActive((prev) => prev + 1)
      }
  };

  useEffect(() => {
    window.addEventListener("wheel", changeActiveSlider);
    return () => window.removeEventListener("wheel", changeActiveSlider);
  }, []);

  useEffect(() => {
    console.log(active); // Тут состояние постоянно меняется как мне и нужно
  }, [active]);

Comments

[Narts]

если сделать так:

const active = useRef(0);
...
active.current = active.current + 1; // это в коллбеке листенера

то работать будет.

Тоже сталкивался с такой проблемой, проблема в работе с памятью в useState (useRef как я понял напрямую с памятью работает) и магии addEventListener. В чем магия так и не понял, поэтому подпишусь на топик :)

Answer 1

[Денис Соколов]

Сработало если в зависимости к useEffect положить active

useEffect(() => {
    if (slider && slider.current) {
      slider.current.addEventListener("wheel", changeActiveSlider);
      return () => slider.current.removeEventListener("wheel", changeActiveSlider);
    }
  }, [active]);

Comments

[Narts]

но ты учти что у тебя на каждое изменение active будет удаляться кб слушателя и создаваться новый
мне кажется это не норм

[Денис Соколов]

Narts, так у меня же удаляется лисенер

slider.current.removeEventListener("wheel", changeActiveSlider);

[Владислав Великоиваненко]

Narts, да, согласен, в плане оптимизации просто до свидули) Я бы вынес куда-то создание слушателя, чтобы он миллион раз это не делал

[Narts]

Денис Соколов, это да, но мне кажется все равно костыльное решение (по производительности). но не утверждаю это, может решение и верное

[Денис Соколов]

Narts, Владислав Великоиваненко, У меня вызывается 1 раз. Так что мне кажется все нормально по оптимизации

[Владислав Великоиваненко]

Денис Соколов, ну у тебя же вызывается и затем удаляется, это одно и то же, что вместо слушателя подставить например связь с API, где вытягивается таблица из 1000 строк) Если её подставить в твой код, вместо создания слушателя, то всё полетит в плане производительности)

Answer 2

[Владислав Великоиваненко]

В useEffect у тебя в качестве зависимости стоит [active], поэтому он в любом случае 0 не отдаст, либо не отработает, либо дает измененные значения, а вот чтобы понять по поводу функции, нужен код самого рендера, я у себя его разверну и уже точно смогу сказать, в чем дело.

Comments

[Денис Соколов]

Так зачем весь код. Просто можно же вписать этот код и он будет отрабатывать если колесиком мыши крутить. И там можно будет увидеть что console.log(active) в функции не правильно работает

Answer 3

[Alexandroppolus]

useEffect(() => {
    const changeActiveSlider = (e) => {
        setActive((active) => {
            console.log(active);
            return active - Math.sign(e.wheelDeltaY)
        });
    };
    window.addEventListener("wheel", changeActiveSlider);
    return () => window.removeEventListener("wheel", changeActiveSlider);
}, []);