For redux to work correctly, the state must be immutable. This means that whenever we update the redux state, we have to create a copy of the whole state and set values to fields we want to change. In code, this usually looks like:
\n![\"code](\"/static/blog/7960175340257c733ea92577c17eaa2d/carbon-5.svg\")
\nIn the code above, we are modifying the oldState’s field2 value by creating a new state and setting a new value to field2. The value and reference of oldState remains the same.
Before we get into why we must change redux state in this way, we should know the difference between “value” and “reference”
\nThe value of a variable is the “semantic” meaning of what that variable holds. For example, in the example code below, the semantics of what is held by var1 and var2 are the same, therefore we can say that their values are the same. However, var3’s value is different since the “semantics” of what it’s holding is different.
When we talk about reference, we are referring (pun intended!) to the memory address of where something is stored. So in the above example, the memory address of the object referenced by var1, is different from the memory address of the object referenced by var2. In other words, var1 points to a different memory address than var2. Therefore, their references are different, even though their values are the same!
The only way two variables can have the same reference is when they are both pointing to the same memory address. So in the code below, var4 and var5 have the same reference:
In the if statement above, the UI won’t update, even though we intended to change the state. This is because the reference of newState.profession is equal to oldState.profession.
Also notice above that when we do oldState.profession !== newState.profession or newState !== oldState, we are actually checking if their reference (and not value) is the same (they are all objects).
The problem of rerendering could be solved if we could somehow just do a shallow reference check, without missing out on updates. This would give us the performance we need and not break the application’s logic.
\nBased on what we saw in the previous sections, we know that “if the reference of two variables (state variables in this case) are different, their values may or may not be the same.”. What if we change this to “if and only if the reference of two variables (state variables in this case) are different, we should assume that their values are different.”. What happens now?
\nIf the above change is enforced, then to know if a state’s value has changed, we can just do a reference check like oldState === newState (if this is false, then the reference has changed). If the reference has changed, then we can assume that the values must have changed and trigger a render. If not, then we do not rerender.
To enforce this assumption, we must never directly change the fields inside oldState. Instead, we must always create a new copy of oldState (in newState), just like we showed at the start of this article, and make modifications in newState. Since newState is a new object, its reference will always be different than that of oldState. This is known as enforcing immutability of state - exactly what redux enforces its users to do!
Immutability of redux state is necessary since it allows detecting redux state changes in an efficient manner. This implies that whenever we want to modify a redux state, we must create a new copy of it and do modifications to that copy - which then becomes the new redux state.
","frontmatter":{"date":"November 11, 2021","title":"Why is redux state immutable?","cover":"why-is-redux-state-immutable.png","author":"Rishabh Poddar","description":"This blog covers an analysis of why redux state is immutable and how you should go about modifying state in your Redux applications"},"fields":{"slug":"/why-is-redux-state-immutable/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"9b8888af-f9c2-535c-9fd0-4774b03a5dac","fields__slug":"/why-is-redux-state-immutable/","__params":{"fields__slug":"why-is-redux-state-immutable"}}}, "staticQueryHashes": []}