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?
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’
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.
** 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.
Source link
lol
