useContext не обновляет свое значение в обратном вызове

Question

Значение

useConext не обновляется в моем обратном вызове, присоединенном к событию wheel. Я пытался утешить, но все еще печатал статическое значение. Но вне обратного вызова, он печатает обновленное значение

const Home = () => {
  //accessing my context
  var [appState, dispatch] = useContext(CTX);
  //printing updated value here (working perfect here)
  console.log(appState);

  //my callback on wheel event (also using debouce to queue burst of events)
  var fn = debounce(e => {
    //incrementing value ++1
    dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });
    //printing static value here (problem here)
    console.log(appState);
  }, 500);

  //setting and removing listener on component mount and unmount
  useEffect(() => {
    window.addEventListener('wheel', fn);
    return () => {
      window.removeEventListener('wheel', fn);
    };
  }, []);
};

Answer 1

Ваша функция debance меняется в каждом рендере, в то время как useEffect имеет захват только первого рендера, вы можете исправить это с помощью useCallback:

const Home = () => {
  // accessing my context
  const [appState, dispatch] = useContext(CTX)
  // printing updated value here (working perfect here)
  console.log(appState)

  // my callback on wheel event (also using debouce to queue burst of events)
  const fn = useCallback(
    () =>
      debounce(e => {
        // incrementing value ++1
        dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' })
        // printing static value here (problem here)
        console.log(appState)
      }, 500),
    [appState, dispatch],
  )

  // setting and removing listener on component mount and unmount
  useEffect(() => {
    window.addEventListener('wheel', fn)
    return () => {
      window.removeEventListener('wheel', fn)
    }
  }, [fn])
}

Answer 2

При монтировании слушатель инициализируется переменной функции, которая включает в себя первое значение appStore в своей лексической области.

См. Замыкания .

Кисправить это, переместить его в область действия useEffect.

const Home = () => {
  const [appState, dispatch] = useContext(CTX);

  useEffect(() => {
    const fn = debounce(e => {
      dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });

      console.log(appState);
    }, 500);

    window.addEventListener('wheel', fn);
    return () => {
      window.removeEventListener('wheel', fn);
    };
  }, [appState]);
};

Дружеский совет:

• Использовать линтер как eslint - он должен был предупредить васиспользования appState внутри useEffect
• Не использовать var - это подвержено ошибкам.