React Impossible States
Explore how to identify and resolve impossible states in React by combining related asynchronous data states into a single useReducer hook. Understand the benefits of unified state management over multiple useState hooks to create more reliable and predictable UI behavior.
We'll cover the following...
Perhaps you’ve noticed a disconnect between the single states in the App component, which seem to belong together because of the useState hooks. Technically, all the states related to the asynchronous data belong together, which doesn’t only include the stories as actual data, but also their loading and error states.
There is nothing wrong with multiple useState hooks in one React component. Be wary once you see multiple state updater functions in a row, however. These conditional states can lead to impossible states, and undesired behavior in the UI. Try changing your pseudo data fetching function to the following to simulate the error handling:
Practice this right here: