Avoid component update while changing state vaiable

Question

Background

I have a React component which includes further two more components. I component includes a chart(build with react-charts) and the other is a simple input field. I initially make not visible but it become visible when someone clicks icon over there.

Issue, child rerenders when state changes

Now the problem is whenever I toggle this input field it automatically refreshes my graph. In fact when I type into my input field it also refreshes the graph. I think it rerenderes the graph as I update the state variable. I want to stop this behavior. Any suggestions on how can I do this.

Component Screenshot(https://i.stack.imgur.com/zOxDT.png)

Component Code

<div className="row">
  <DealGraph ref={this.dealRef} />
  <div className="col-md-4">
    <div className="row">
      <div style={style} className="col-md-12 bg-white border-radius-10  default-shadow">
        <h3 className="sub-heading roboto" style={border}>
          Create Deals
        </h3>
        <input
          type="text"
          name="deal"
          className="form-control mgt-30"
          value="Deal One"
          readOnly
        />
        <button
          type="button"
          onClick={this.showAddBlock}
          style={button}
          className="golden-button create-deal-button"
        >
          <i className="fa fa-plus"></i>
        </button>
        {addDealStatus ? (
          <div className="col-md-12 add-deal-box pd-0-0">
            <input
              type="text"
              className="form-control mgt-30 mgb-10"
              name="add-deals"
              placeholder="Add Deals"
            />
            <button type="button" className="golden-button flex all-center">
              Add
            </button>
          </div>
        ) : null}
      </div>
    </div>
  </div>
</div>

Toggle function

showAddBlock=() => {
  this.setState({addDealStatus:!this.state.addDealStatus})
}

Use simple variable or global variables instead of the state. — sushildlh, May 27 '20 at 06:58

score 1 · Accepted Answer · answered May 27 '20 at 06:59

use PureComponent

To stop a child component rerendering from it parent you should make the child a pure component.

import React from 'react';

class DealGraph extends React.PureComponent { // notice PureComponent

  render() {
    const { label, score = 0, total = Math.max(1, score) } = this.props;

    return (
      <div>
        /* Your graph code */
      </div>
    )
  }

}

score 0 · Answer 2 · answered May 27 '20 at 07:01

Use the { pure } HOC from Recompose

You can use a functional component that is wrapped in the pure HOC from recompose

import React from 'react';
import { pure } from 'recompose';

function DealGraph(props) {
  return (
    <div>
      /* Your graph code */
    </div>
  )
}

export default pure(DealGraph); // notice pure HOC

score -1 · Answer 3 · answered May 27 '20 at 06:57

A quick solution would be to move the input to an own component.

A more sophisticated solution is adapting the shouldComponentUpdate function in your DealGraphcomponent like stated here React: Parent component re-renders all children, even those that haven't changed on state change

score -1 · Answer 4 · answered May 27 '20 at 07:27

-1

By Default while rendering every component react checks for shouldComponentUpdate .React Components dont implement shouldComponentUpdate by default.So either we can implement a shouldComponentUpdate. Or Make the child class as a pure component.

answered May 27 '20 at 07:27

yashwanth numburi

64
6