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 this: let newState = {
    ...oldState,
    field1: {
        ...oldState.field1,
        field2: "someNewValue"
    },
} In the code above, we are modifying the ’s value by creating a new state and setting a new value to . The value and reference of remains the same. oldState field2 field2 oldState Before we get into why we must change the redux state in this way, we should know the difference between “value” and “reference.” Difference Between Value and Reference The 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 and are the same, therefore we can say that their values are the same. However, ’s value is different since the “semantics” of what it’s holding is different. var1 var2 var3 let var1 = { name: "John", age: 20 }
let var2 = { name: "John", age: 20 }

let var3 = { name: "May", age: 30 } 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 is different from the memory address of the object referenced by . In other words, var1 points to a different memory address than . Therefore, their references are different, even though their values are the same! var1 var2 var2 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, and have the same reference: var4 var5 let var4 = { name: "Jeremy", age: 50 }
let var5 = var4 If we do , then the value of will also be “Mary”. var5.name = “Mary” var4.name Based on this understanding, we can conclude: If the value of two variables are the same, their reference may or may not be the same. If the values of two variables are different, then their references must be different. If the reference of two variables is the same, their values must be the same. If the reference of two variables is different, their values may or may not be the same. Re-Rendering of React Components Coming back to redux and react, react will only want to re-render a component if the value of the props or state has changed. To know if a value of these has changed, we must make a “deep comparison” - recursively check all the fields inside the state and prop to see if any of them have changed. Large applications usually have a very deep state structure when using redux - several nested levels (in the count of 100s or even 1000s). Doing a deep comparison here, perhaps several times every second, will slow down the UI. On the other hand, if we make a “shallow comparison” (where we only check if the values of the first level fields have changed), it will be much quicker, but we may miss out on updates - breaking application logic. An example of how we might miss out on updates with shallow comparison is presented below: let oldState = {
    name: "John",
    age: 20,
    profession: {
        title: "Software Engineer",
        organization: "SuperTokens.io"
    }
}

let newState = oldState

newState.profession.title = "Senior Software Engineer"

// Shallow comparison. upto level one
if (newState !== oldState || oldState.name !== newState.name || oldState.age !== newState.age || oldState.profession !== newState.profession) {
    // Update UI
} In the if statement above, the UI won’t update, even though we intended to change the state. This is because the reference of is equal to . newState.profession oldState.profession Also, notice above that when we do or , we are actually checking if their reference (and not value) is the same (they are all objects). oldState.profession !== newState.profession newState !== oldState Optimizing With the Immutability Rule The problem of re-rendering 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. Based 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? If the above change is enforced, then to know if a state’s value has changed, we can just do a reference check like (if this is , 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 re-render. oldState === newState false To enforce this assumption, we must never directly change the fields inside . Instead, we must always create a new copy of (in ), just like we showed at the start of this article, and make modifications in . Since is a new object, its reference will always be different than that of . This is known as enforcing immutability of state - exactly what redux enforces its users to do! oldState oldState newState newState newState oldState Conclusion 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.

Different

Overriding the SuperTokens APIs for Custom Usecases

How to Implement a Forgot Password Flow (With Pseudo Code)

See our website for repositories

Why is Redux State Immutable?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

All you need to know about user session security

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

All you need to know about user session security

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps