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 2 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.

Comments

[CitronBrick]

Please replace code images with code blocks as follows. It's more readable & accessible to do so.

triplebacktick javascript
code
triplebacktick javascript

Eg:

this.state = { lives: 3, health: 100, score: 15, level : 5 };

[Wasim Khan]

Concise explanation about state 👍.
Using a single state for many components make more sense than using multiple state if we can achieve with single state. It will make code more cleaner and short. Naming should be easy means if we have 4 modal in a component, for closing modal we have to set multiple state and its naming may confuse instead we can use a simple state like openModal and set related modal name with Boolean value

[Sonay Kara]

Yes it is true, thank you for this information.

[SkillBoostTrainer]

This article provides excellent principles for structuring state in React components! Grouping related state variables and avoiding redundant state are practical tips that can greatly simplify code maintenance.

[Sonay Kara]

Thank you so much! I'm glad you found the article helpful. Organizing state effectively in React truly makes code more maintainable and readable

[Dima Vyshniakov]

Thanks for the article. I can add that if your state is a complex structure such as an Object it makes sense to consider useReducer hook. It gives more powerful tools to manage the state.

[Sonay Kara]

Yes it is true, thank you for this information.

[CoryGrubbs]

Die Wahl der richtigen State-Struktur in React.js ist entscheidend für die Skalierbarkeit und Wartbarkeit der Anwendung. Es ist wichtig, den Zustand so zu organisieren, dass er die Komponenten effizient unterstützt und leicht zu pflegen ist."

[Joseph Olofinte]

"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."

Is it just me or this is difficult to understand or put into perspective.

[Sonay Kara]

please, check one more