The data reference problem

A lot of bloggers and developers seem to accuse Immutable JS of certain things, without understanding its core concepts. React is not just about building interactive UI/UX interfaces; it is about performance. The purpose of its development was to be performant and to only update the DOM when required, and also, to only update the portion that was required to be updated. An optimized React app should contain simple, stateless functional components, and can have a shouldComponentUpdate that returns false:

shouldComponentUpdate(nextProps, nextState) {
return false;
}

You should be familiar with React life cycle functions. The most notable function in the React component life cycle is shouldComponentUpdate, and it is expected to return false whenever possible. Why? Well, as the name suggests, this ensures that the component, with shouldComponentUpdate returning false, will never re-render, making the React app extremely performant. 

Our primary goal should be to compare old props and states with new props and states; if they are not changed, the component should never re-render. However, remember that in JavaScript, equality checks can be sophisticated. Consider the equality in primary data types:

33 === 33
'yoshimi' === 'yoshmi'
false === false

Let's look at the equality in complex objects and arrays, as follows:

const object1 = { prop: ‘simpleValue’ };
const object2 = { prop: ‘simpleValue’ };
console.log(object1 === object2); // false

The object1 and object2 appear to be the same, but their references are different. As these two objects are judged to be different, equaling them within the shouldComponentUpdate function naively will make our component needlessly re-render. Data comes from Redux reducers. If these reducers are not set correctly, they will be presented with different references, which will cause the component to re-render every time. This is one of the major problems with respect to performance.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset