React Impossible States

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: