React.js : Choosing the State Structure

If you like my articles, you can buy me a coffee or share it :)

---

In this article, we will examine the important points when choosing state structure in our react.js projects.

---

Choosing the State Structure

When writing a react component, we need to decide how many states should be in the component and how we will use these states. For example, when writing a component, we used 3 states and our component works correctly, but you noticed that you can write the same component using 3 states. Therefore, you need to decide on the state structure.

---

I will talk about 5 principles to help you make better decisions when choosing the state structure.

1. Group the Related State Variables

Think of a character in a computer game, this character can move in x and y coordinates. So, if you wanted to write these x and y values ​​as state, how would you do this?

• Bad Approach :

• Better Approach :

Technically, you can use either of these approaches. But, ** If you always update two or more state variables at the same time, consider merging them into a single state variable**.

And If you don't know how many states you need, you can group the states using an object or a array.

---

2. Avoid Contradictions in State.

Think of a messaging app. You know that there are two different stages when you give approval to send a message. The first is "message is sending" and the second is "message has been sent". So, what would be the first thing that comes to our mind if we declared these two states as two different states, true and false ?

• Bad Approach (Risk of Conflicts) :

Since isSending and isSent should never be true at the same time, it is better to replace them with one status state variable that may take one of three valid states: 'typing', 'sending', and 'sent'

• Better Approach :

---

3. Avoid Redundant State

When choosing the state structure of a component, you need If you can calculate some information from the component's props or existing state variables, you should not keep this information in the component's state.

• Bad Approach :

• Better Approach :

** When you call setFirstName or setLastName, you trigger a re-render, and then the next full Name will be calculated from the fresh data.**

---

Conclusion

Structuring the state well ensures that you have components that are easy to modify and debug. In this article, I talked about 3 principles that should be considered when choosing the state structure. There may be more of these principles. If you want, you can talk about these principles in the comments.

The above is the detailed content of React.js : Choosing the State Structure. For more information, please follow other related articles on the PHP Chinese website!