React: useState - Value is not correct in if statement

Question

I have a problem with useState in React. I want to query the current value of a state when a key is pressed, for key navigatgion. However, the console.log already always returns only the value "1", which actually does not correspond to the current state.

In useEffect, however, the state is always output correctly. The problem is not the useEffect. It's the function "checkKey". Here, the console.log(currentPage) always returns "1" which can not be the case.

  const [currentPage, setCurrentPage] = state(1);
  const [quotes, setQuotes] = state(["fetching ..."]);
  
  const checkKey = (event) => {
    if (event.keyCode == '37') {
        console.log("Key page:" + currentPage); // Always 1???
        if(currentPage > 1) setCurrentPage(currentPage => currentPage - 1);
    } else if (event.keyCode == '39') {
      console.log("Key page:" + currentPage);
        if(currentPage < 6) setCurrentPage(currentPage => currentPage + 1);
    }
  }

With useEffect (changed slightly here with a custom hook, but the functionality is identical, the return value is always correct) the issue does not occur. The navigation is generally working fine, and after each update, the console.log here outputs the correct value.

  /*currentPage */ onChange(() => {
    if (currentPage === 1) {
      navigateTo('/');
    }
    if (currentPage === 2) {
      navigateTo('/resume');
    }
    if (currentPage === 3) {
      navigateTo('/certificates');
    }
    if (currentPage === 4) {
      navigateTo('/project-cdp');
    }
    if (currentPage === 5) {
      navigateTo('/lor-webedia');
    }
    console.log("New page is: " + currentPage);
  }, [currentPage])

FYI: useEffect Custom Hook.

export const useEffectExceptOnMount = (effect, dependencies) => {
    const mounted = useRef(false);
    useEffect(() => {
      if (mounted.current) {
        const unmount = effect();
        return () => unmount && unmount();
      } else {
        mounted.current = true;
      }
    }, dependencies);
  
    // Reset on unmount for the next mount.
    useEffect(() => {
      return () => mounted.current = false;
    }, []);
  };

provide the useEffect funtion in the edit, and if you press keycode "39" , it still remains 1? — Daniyal Shaikh
I did, thank you. But the problem is not the useEffect. It's the function "checkKey". Here, the console.log(currentPage) always returns "1" which can not be the case. — Troublegum

Troublegum Troublegum · Accepted Answer · 2021-11-21T19:12:55

Giving the logic to useEffect solves the issue. But not sure if it's a clean solution.

  /*currentPage */ onChange(() => {

    switch (currentPage) {
      case 0: setCurrentPage(1); // Min
              break;
      case 1: navigateTo('/')
              break;
      case 2: navigateTo('/resume');
              break;
      case 3: navigateTo('/certificates');
              break;
      case 4: navigateTo('/project-cdp');
              break;
      case 5: navigateTo('/lor-webedia');
              break;
      case 6: setCurrentPage(6); // Max
    }
    console.log("New page is: " + currentPage);
  }, [currentPage])

React: useState - Value is not correct in if statement

1 Answers