There is no need to keep all of your state in a single centralized store. There are different needs for different types of state that can be split into several types:
This is the state that only a component needs, and it is not meant to be shared anywhere else. But you can pass it as prop to children components if needed. Most of the time, you want to start from here and lift the state up if needed elsewhere. For this type of state, you will usually need:
- useState - for simpler states that are independent
- useReducer - for more complex states where on a single action you want to update several pieces of state
This is the state that controls interactive parts of an application. Opening modals, notifications, changing color mode, etc. For best performance and maintainability, keep the state as close as possible to the components that are using it. Don't make everything global out of the box.
Our recommendation is:
This is the state that comes from the server which is being cached on the client for further usage. It is possible to store remote data inside a state management store such as redux, but there are better solutions for that.
Our recommendation is:
This is a state that tracks users inputs in a form.
Forms in React can be controlled and uncontrolled.
Depending on the application needs, they might be pretty complex with many different fields which require validation.
Although it is possible to build any form using only React, there are pretty good solutions out there that help with handling forms such as: