reactjs - React navigation focus event listener return old state

Question

The old value is returned inside the focus event listener

how to I get the current state/value in my event listener as it is currently returning the old value

  const [organizationName, setOrganizationName] = React.useState('');

      React.useEffect(() => {
        const unsubscribeNavigationFocus = props.navigation.addListener(
          'focus',
          async () => {
        try {     
          console.log(organizationName, 'OLD VALUE');
        
    
          // }
        } catch (error) {
          console.log('inside error');
          console.log(error);
    
        } finally {
    
        }
      }
        );
    
        return unsubscribeNavigationFocus;
      }, [props.navigation]);

@react-navigation/native: "5.8.10", react": "16.13.1", react-native: "0.63.4",

question from:https://stackoverflow.com/questions/65859385/react-navigation-focus-event-listener-return-old-state

Answer 1

You need to add your state to the dependency array

const [organizationName, setOrganizationName] = React.useState('');

React.useEffect(() => {
  const unsubscribeNavigationFocus = props.navigation.addListener(
    'focus',
    async () => {
      try {
        console.log(organizationName, 'OLD VALUE');

        // }
      } catch (error) {
        console.log('inside error');
        console.log(error);
      } finally {
      }
    }
  );

  return unsubscribeNavigationFocus;
}, [props.navigation, organizationName]);

Use the official ESLint plugin for React to catch such issues https://www.npmjs.com/package/eslint-plugin-react-hooks