Why does immutability matter for React?

⇦ Home / Jargon Free Introductions

Why does React require immutability?

Lets first understand the two pre-requisite concepts - 1. Mutable & immutable data in JavaScript. 2. How React renders UI changes.

Lets first talk about mutable and immutable data in JavaScript.

Mutable = when an existing value can be modified without creating an entirely new value. JavaScript arrays and objects are mutable.

Run this code snippet on CodeSandBox

Immutable = when an existing value can't be modified. The only way to change is to create a new value and re-assign. JavaScript primitives like boolean and string are immutable.

Run this code snippet on CodeSandBox

A shallow comparison cannot detect any change in the value of a mutable object. === is a kind of shallow comparison.

Run this code snippet on CodeSandBox

Now, let's talk about how React renders UI changes.

React reflects the UI changes by re-rendering whenever the state changes. Whenever the state within a component changes, React re-renders the component to reflect the changes.

Run this code snippet on CodeSandBox

Finally, let's find out why immutability matters for React.

To detect a state change, React shallow compares the old & the new state (similar to '===').

Run this code snippet on CodeSandBox

For React to detect state changes through its shallow comparison, these changes need to be immutable.

Run this code snippet on CodeSandBox

React uses shallow comparison to detect state changes since comparing by values can be slow & expensive.

Run this code snippet on CodeSandBox

But, copying large state objects to keep state changes immutable can sometimes be expensive.

Run this code snippet on CodeSandBox

Want to be notified via email when a new explainer is added?

Submit

< of >

Want to be notified when I add a new explainer?

Submit

I create about one or two of these every month (whenever I find time between my webdev work) & you can unsubscribe at any time. 💨

Copyright (c) 2017-2024 Tezify All Rights Reserved. Created in India. GSTIN : 24BBQPS3732P1ZW.