When you start learning React, managing state can be challenging at first. It's crucial to understand when you really need a state for a variable and where to place that state to ensure your code is robust and efficient. Proper state management not only optimizes performance by minimizing unnecessary re-renders but also enhances predictability and maintainability, making your code easier to debug. It promotes component reusability, supports application scalability, and maintains a clear separation of concerns. Ultimately, effective state management leads to a smoother user experience and a high-quality, performant application.

There is a series of questions you can ask yourself to determine if your variables need separate states or if they can be simple constants. Additionally, these questions can help you decide where to keep the state if it is needed.

When do I need a state variable?

Do you need to store data?
YES:
Will data change at some point?
NO: Regular "const" variable
YES:
Can it be computed from existing state/props?
YES: Derive state
NO:
Should it re-render the component?
NO: Ref(useRef)
YES:
PLACE A NEW PIECE OF STATE IN COMPONENT!

Where to place your new state?

Always start with a local state in the current component. Then ask yourself if it's:
Only used by this component?
YES: Leave it in the component
NO: Also used by a child component?
YES: pass it to the child via props
NO: Also used by one or a few sibling components?
YES: List state up to first common parent
NO: Used all over the component tree by more than a few sibling components?
YES: Then, you probably need a Global State!