Principles of State in React

State is like a special container that holds data specific to a component. This data can change over time, and whenever it does, the component automatically re-renders itself to reflect the updated information.

do you know what are Principles of State ?

Rule 1

For ex- Suppose we have two coordinate X and Y lets define states

Instead of defining this way -

const [x, setX] = useState(0);

const [y, setY] = useState(0);

Define like this -

const [position, setPosition] = useState({ x: 0, y: 0 });

Note : If your state variable is an object, remember that **you can’t update only one field in it **without explicitly copying the other fields.

Rule 2

Suppose we have UI of simple hotel feedback form

How will you define states for text field like this

const [text, setText] = useState(‘’);

const [isSending, setIsSending] = useState(false);

const [isSent, setIsSent] = useState(false);

Instead of defining above states define like this to avoid contradictions

Note : Because ‘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’ (initial), ‘sending’, and ‘sent’ .

Rule 3

Suppose we have UI of this profile section

If you can calculate some information from the component’s props or its existing state variables during rendering, you should not put that information into that component’s state.

Compare both the codes snippets and see the difference :

Note : This form has three state variables: firstName, lastName, and fullName. However, fullName is redundant. You can always calculate fullName from firstName and lastName during render, so remove it from state.

Rule 4

Suppose we have this UI we need to select Items

Compare the code snippets and see the difference :

Note : Instead of selecting title and Id both in state only select Id that will remove duplicity and all updates will keep in sync.

Rule 5

Deeply nested state can lead to complexity, making it harder to manage and update.

It increases the risk of bugs and decreases the maintainability of the codebase.

Keeping state shallow and centralized improves code readability and simplifies state management.

Compare code snippets and see differences

Note Avoiding deeply nested state, we can simplify our components and enhance maintainability. Consider flattening state structures and using context or reducers for managing complex data hierarchies.