Ad

Is It Possible To Control A Child Component In React If The Parent Component Render Many Times?

I am working on the issue regarding parent component render twice and child component also render twice. the existing code for the parent is

<childform
  value ="name"
  serverapi={this.valueservice.api}
  update={this.update}
/>

the child component start render using

componentDidMount()
{
   this.callservice(serverapi)
}

since its componentDidMount function called twice, the API also render twice which has to be avoided, each time the parent render the child's state is been refreshed so I cannot compare with the state, is it possible anyway to check or solution to this issue that I can refer? that resolves how many time I call the parent it call the API once

Ad

Answer

It seems that the update prop you are passing to childform is a boolean indicating whether or not the component should rerender. If that is the case you can use the shouldComponentUpdate() lifecycle method the to check if there is an update and only rerender when true:

shouldComponentUpdate(nextProps, nextState) {
  //You can perform more logic here such as 
  //return this.props.update === nextProps.update
  return nextProps.update;
}

You can find more information here:

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Ad
source: stackoverflow.com
Ad