More on React States

This section contains a general overview of topics that you will learn in this lesson.
How to structure state.
How state updates.
Learn about controlled components.

How to structure state

Managing and structuring state effectively is by far one of the most crucial parts of building your application. If not done correctly, it can become a source of bugs and headaches. Poor state management can lead to unnecessary re-renders, complex and hard-to-debug code, and unpredictable application behavior.

The assignment items go through the topic thoroughly, but as a general rule of thumb: don’t put values in state that can be calculated using existing values, state, and/or props.

Derived state can lead to inconsistencies, especially when the derived data becomes out of sync with the source state. Instead, compute these values on-the-fly using functions or memoization techniques.

Additionally, always strive to keep state localized as much as possible. Avoid lifting state too high up the component tree unless absolutely necessary. By keeping state close to where it is used, you reduce the complexity of state management and make your components more modular and easier to test.

Another important aspect is to group related state variables together. When state variables are logically connected, it makes sense to manage them as a single unit, often using objects or arrays. This practice not only helps in organizing your state but also simplifies the process of updating multiple related state variables.

State should not be mutated

Mutating state is a no-go area in React as it leads to unpredictable results. Primitives (like numbers, strings, and booleans) are already immutable, but if you are using reference-type values, such as arrays and objects, you should never mutate them. According to the React documentation, we should treat state as if it was immutable. To change state, we should always use the state updater function, which, in the case of the example below, is the setPerson function.

## Why Not Mutate State?

1. Unpredictable Results:
   Directly mutating state can lead to inconsistencies and bugs, as React might not recognize the changes, leading to unpredictable UI updates.

2. Debugging Difficulties:
   Mutable state makes it harder to track changes, complicating the debugging process.

3. React Optimization:
   React relies on immutability to optimize re-renders. Mutations can disrupt this optimization, causing performance issues.

Primitives in JavaScript, such as strings, numbers, and booleans, are inherently immutable. Assigning a new value to a state variable containing a primitive type will create a new instance of that value.
Primitives in JavaScript, such as strings, numbers, and booleans, are inherently immutable. Assigning a new value to a state variable containing a primitive type will create a new instance of that value.
Always use the state updater function provided by React to change state. For example, if you're managing a person object, use setPerson to update the state.

Here is an example:

How state updates

State updates are asynchronous. What this implies is that whenever you call the setState function, React will apply the update in the next component render. This concept can take a while to wrap your head around. With a lot of practice, you’ll get the hang of it in no time.

Remember, state variables aren’t reactive; the component is. This can be understood by the fact that calling setState re-renders the entire component instead of just changing the state variable on the fly.