Wrong state value in event listener handler after setState

Question

I just want to understand this behavior of the JavaScript engine. I have an event listener, which calls handler after event. In this handler I refresh my token and put it in the redux. On the first call all is OK, but when handler calls again, I have token refreshing error, because it sends old refresh token, not the same as in redux.

import React, {useEffect, useState} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {setAuthData} from '../redux/actions/actions';



const Distributor = props => {
  const dispatch = useDispatch();
  const auth = useSelector(store => store.Auth); // auth from redux


  useEffect(() => {                              // setting my event listener
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      console.log('distributor unmount');
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  const handleAppStateChange = nextAppState => {   // my handler
    if (nextAppState === 'active') {
      getProfileData()
    }
  };

async function getProfileData() {                 // function that processes refreshing token
    try {
      const responseFromAuth = await refreshToAccessToken(
        auth.refresh_token,
      ).then(res => res.json());
      if (responseFromAuth.access_token) {
        dispatch(setAuthData(responseFromAuth));
      } else {
        console.log(
          `Error getting access token from refresh in distributor: ${
            responseFromAuth.error_description
          }`,
        );
      }
    } catch (e) {
      console.log(`Error getting profile data: ${e}`);
    }
  }
}

score 1 · Accepted Answer · answered Sep 14 '20 at 09:29

1

It happened because your handler (handleAppStateChange) calls only in the first time you render the component [onMount (useEffect(() => {...},[]))] and it always has the older version of your auth.refresh_token

for solving this issue, you can listen to auth.refresh_token changes and re-add your EventListener every time refresh_token has a new value (after getProfileData):

 useEffect(() => {                              // setting my event listener
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, [auth.refresh_token]);

also you can use React.useCallback for a memoized callback. https://reactjs.org/docs/hooks-reference.html#usecallback

for more information: Wrong React hooks behaviour with event listener

answered Sep 14 '20 at 09:29

Alireza Esfahani

701
7
16

Thanks for answering my question! I don't agree with you, my handler calls not only on component mount, i calls after any `AppState` (it's React Native component ) change. If i do as you wrote here, my component will add new listener after every `auth.refresh_token` change, but i don't want this behavior, so I added one listener on component mount and handler of this listener (`handleAppStateChange`) calls if needed. I thought a lot about this problem, and may be when handler function calls after token refresh it looks in older scope and there token is old. – Vladyslav Stepaniuk Sep 16 '20 at 14:44
no, your `eventListener` registers once, not your handler function. and because of this your handler has older value ( the value of state when eventListener registred). This is a very common problem with `useState()` and `callback` functions and simplest way to solve it is `listener re-registration` which i mentioned above! – Alireza Esfahani Sep 17 '20 at 04:54

Wrong state value in event listener handler after setState

1 Answers1