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

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

Here is my ponent:

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 ponent is always rendering, I am using PureComponent because I want that ponent 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:

ponentDidMount() {
    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?

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

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

Here is my ponent:

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 ponent is always rendering, I am using PureComponent because I want that ponent 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:

ponentDidMount() {
    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?

• javascript
• performance
• reactjs

3 Answers 3

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

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

shouldComponentUpdate(nextProps, nextState) {
    return false
}

For stateless ponents that don't need props, we can use a bination of a Functional (stateless) ponent, and babel's React constant elements transformer to optimize the ponent 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 pletely skip it when reconciling.

2. Change the spinner to a stateless ponent.

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

You can make your props immutable in React by using Immutable JS to transform your array props into Lists and object props int Maps. With this library you can use simple checks to check the equality of arrays/objects (instead of going through keys/values for equality):

shouldComponentUpdate(nextProps) => {
   this.props.plexObjectAsMap === nextProps.plexObjectAsMap
}

But since your ponent doesn't have any props - this doesn't look the right question. In your case I'd go with Ori Drori answer.