How to make the details unchanged to prevent a recurrence in Reactika?

Question

I am creating a small application using response.js. I consider "performance" excessive.

So, I have a simple child component called "Spinner". My goal is to ensure that this component is never updated.

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> ) } } 

During re-rendering with "response-addons-perf" the component always renders, I use PureComponent because I want this component to be displayed only once, I read that I can use immutable details, but I don’t know how to do it.

If I like it:

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

This is a render only once, but I believe there is a better way.

How to avoid reprocessing? or maybe how can I make an immutable props?

Answer 1

You do not need additional logic for componentShouldUpdate, since you do not want your component to render again.

Adding just that should be enough to prevent component re-arrangement:

 shouldComponentUpdate(nextProps, nextState) { return false } 

Answer 2

For stateless components that do not require attributes, we can use a combination of Functional (stateless) components and babel React constant elements transformer to optimize component creation and completely eliminate them.

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

  Creating a Hoists element to the top level for subtrees that are completely static, which reduces the call to React.createElement and the result distribution. More importantly, he tells React that the subtree hasnt so that React can completely skip it when reconciled.

• Change the counter 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; 

Answer 3

You can make your details immutable in React using Immutable JS to convert the details of the array to Lists and the details of an int map object. Using this library, you can use simple checks to verify the equality of arrays / objects (instead of going through the keys / values ​​for equality):

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

But since your component does not have props, it does not look right. In your case, I would go with the answer of Ori Drree .