Prevent Child component getting rendered when the state is changed in react

Question

I have a parent and child component of react. Here i pass the id as a prop from parent to child and i am saving the value of the textarea entered using the state. Whenever i am typing in the textarea. The child component gets updated. how to prevent the child component getting updated on every value entered in the textarea? Please help me.

class Child extends React.Component {
  constructor() {
    super();
  }
  componentWillMount(){
    console.log('child component Will '+this.props.id);
  }
  componentDidMount(){
    console.log('child component Did '+this.props.id);
  }
  render() {
    console.log('child render '+this.props.id);
    return <p>Child {this.props.id}</p>;
  }
}
class Application extends React.Component {
  constructor(){
    super();
    this.state={
      id:1,
      textValue:undefined
    }
  }
  componentWillMount(){
    console.log('parent component Will');
  }
  componentDidMount(){
    console.log('parent component Did');
  }
  render() {
    console.log('parent render');
    return <div>
      <textarea onChange={(event)=>{
         this.setState(
           {textValue:(event.target.value)})
        }
          }></textarea>
      <Child id='1'/>
      <Child id='2'/>
    </div>;
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<div id="app"></div>

Code pen Link

Answer 1

Instead of extending React.Component you can use React.PureComponent. The difference between the two is that the latter also performs a shallow-comparison of both the props and state between each render; if nothing has changed, it doesn't update.

This is also recommended on the official documentation:

If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

---

Have a look at the code below. I have only changed the first line of code to extend the correct class.

class Child extends React.PureComponent {
  constructor() {
    super();
  }
  componentWillMount(){
    console.log('child component Will '+this.props.id);
  }
  componentDidMount(){
    console.log('child component Did '+this.props.id);
  }
  render() {
    console.log('child render '+this.props.id);
    return <p>Child {this.props.id}</p>;
  }
}
class Application extends React.Component {
  constructor(){
    super();
    this.state={
      id:1,
      textValue:undefined
    }
  }
  componentWillMount(){
    console.log('parent component Will');
  }
  componentDidMount(){
    console.log('parent component Did');
  }
  render() {
    console.log('parent render');
    return <div>
      <textarea onChange={(event)=>{
         this.setState(
           {textValue:(event.target.value)})
        }
          }></textarea>
      <Child id='1'/>
      <Child id='2'/>
    </div>;
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<div id="app"></div>

Edit: I updated your question and made your code runnable in a code snippet, so that it can be compared with my snippet.

Answer 2

You can control when the component should render using shouldComponentUpdate

Your child component would look like this:

class Child extends React.Component {
  componentWillMount(){
    console.log('child component Will '+this.props.id);
  }
  componentDidMount(){
    console.log('child component Did '+this.props.id);
  }
  shouldComponentUpdate(nextProps, nextState){
    if (nextProps.id !== this.props.id) {
      return true;
    }
    return false;
  }

  render() {
    console.log('child render '+this.props.id);
    return <p>Child {this.props.id}</p>;
  }
}

In this example, the Child component will be updated only if its id changes.