State inside a React component is the encapsulated data that is persistent between renderings. useState() is the React hook responsible for managing state inside a functional component.

I like that useState() indeed makes the work with state quite easy. But often I encounter questions like:

• should I divide my component’s state into small states, or keep a compound one?
• if the state management becomes complicated, should I extract it from the component? How to do that?
• if useState() usage is so simple, when would you need useReducer()?

This post describes 3 easy rules that answer the above questions and help you design the component’s state.

#javascript #react #react-native