React state not updating after fetch .then statement

Solution 1:

You can't just continue the promise chain for the fetch call with redundant code and expect the state to reflect properly.

State is asynchronously updated. So just because the fetch promise chain moves to the next .then, doesn't mean react is finished with the state update process.

Let's say this bit of code is in your useEffect life cycle method:

await fetch(url)
.then((response) => response.json())
.then((data) => setSearchResponse(data))

You could then utilize the searchResponse state data in your component within the render method inside your jsx. This is because jsx is updated every time state changes occur, therefore state updates will be reflected here.

There are other ways to view state updates in your code. The important concept here is to understand why you can't in this particular case.