How to get current state value inside an async function

Question

I have created some state at the top level component App() and created a getter method for this state so I could pass it on to any function to be able to get its current state.

App.js

const [searchState, changeScreen] = useState("");
const getSearchState = () => {
    console.log("searchState is", searchState);
    return searchState;
}

scripts/search.js

export const performSearch = async (searchText, changeScreen, getSearchState) => {
  if(searchText) {
    console.log("1", getSearchState())
    let res = await doSearchQuery(searchText);
    console.log("2", getSearchState())
    if(res.status) {
      // *** getSearchState() should have a value of "loading" here
      if(getSearchState() !== "expanded") {
        changeScreen("results");
      }
    }
    else {
      //
    }
  }
}

components/SearchComponent.js

import { performSearch } from '../scripts/search';

function SearchHistoryComponent({changeScreen, getSearchState}) {
  ...

  // This method is fired from an onPress()
  const performHistorySearch = async (text) => {
    changeScreen('loading');
    await performSearch(text, changeScreen, getSearchState);
  }

  ...
}

I then pass getSearchState() as a parameter to a standalone asynchronous function in a different script to be able to look up the searchState value but it doesn't seem to be working as intended.

The value I'm getting seems to be the previous value and not the current value at the time getSearchState() is called - as can be seen from the console outputs I have setup:

searchState is expanded
searchState is loading
1 expanded
2 expanded
searchState is results

Am I doing something wrong?

Answer 1

This is exactly how React callback functions work. That is, every line in your performSearch function is engaged to one searchState value, i.e, "expanded". If you want to get "loading" from getSearchState(), you need to call getSearchState() again in useEffect by passing searchState or getSearchState in the dependency array.

To be more clear, setting a state value after awaiting a promise works fine, but if you want to pull the newly set state value inside the same function body, it won't work.

That said, you need to listen to the newly set state value in useEffect or just make your code declarative so it behaves according to state changes.

Just to help you understand this better, I've written a quick snack here to show the difference between pulling the state from a function body and a useEffect.

https://snack.expo.dev/h65-cPvIb

Thanks.