DEV Community

Cover image for React.js : Choosing the State Structure

React.js : Choosing the State Structure

Sonay Kara on December 30, 2024

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 stru...
Collapse
 
citronbrick profile image
CitronBrick • Edited

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 };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
skillboosttrainer profile image
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.

Collapse
 
sonaykara profile image
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

Collapse
 
wasim_khan_789 profile image
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

Collapse
 
sonaykara profile image
Sonay Kara

Yes it is true, thank you for this information.

Collapse
 
algoorgoal profile image
Chan

Thanks for the great post! It summarizes all the best practices.

Meanwhile, I have a question regarding grouping the related state variables.
Would you group multiple state variables into an object even if you don't update multiple state variables simultaneously?

Collapse
 
sonaykara profile image
Sonay Kara

Thank you, keeping relevant state variables grouped in an object increases the readability of the code, especially if these variables are conceptually linked. if these variables are updated independently, it may be more performance efficient to keep them separate.

Collapse
 
morewings profile image
Dima Vyshniakov • Edited

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.

Collapse
 
sonaykara profile image
Sonay Kara

Yes it is true, thank you for this information.

Collapse
 
corygrubbs profile image
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."

Collapse
 
joseph_olofinte_455e57c38 profile image
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.

Collapse
 
sonaykara profile image
Sonay Kara

please, check one more