How to make props immutable to prevent rerender in React?

Question

I have been creating a small app using react.js. I take 'performance' into account excessively.

So I have a simple child component named "Spinner". My goal is to make sure this component never re-renders.

Here is my component:

import React, {PureComponent} from 'react';

export default class Spinner extends PureComponent {

render() {
    return (
        <div className="spinner">
            <div className="bounce1"></div>
            <div className="bounce2"></div>
            <div className="bounce3"></div>
        </div>
    )
}

}

In the time of the re-rendering with 'react-addons-perf', the component is always rendering, I am using PureComponent because I want that component to render only one time, I read that I can use immutable props but I don't know how to make this possible.

If I make some like to this:

componentDidMount() {
    this.renderState = false;
}

shouldComponentUpdate(nextProps, nextState) {
    return (this.renderState === undefined) ? true : this.renderState;
}

It is rendering only one time, but I believe that there is a better way.

How do I avoid the re-render? or maybe How I can make a immutable props?

Answer 1

You don't need an extra logic for componentShouldUpdate, since you don't want your component to rerender ever.

Adding only this should be enough to prevent component to rerender:

shouldComponentUpdate(nextProps, nextState) {
    return false
}

Answer 2

For stateless components that don't need props, we can use a combination of a Functional (stateless) component, and babel's React constant elements transformer to optimize the component creation, and prevent rerenders entirely.

1. Add React constant elements transformer to your build system. According to the docs the transformer will:

   Hoists element creation to the top level for subtrees that are fully static, which reduces call to React.createElement and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.

2. Change the spinner to a stateless component.

   const Spinner = () => (
     <div className="spinner">
       <div className="bounce1"></div>
       <div className="bounce2"></div>
       <div className="bounce3"></div>
     </div>
   );
   
   export default Spinner;