Function gets called multiple times in react

Question

I would like to know why the function gets called multiple times wheh dispatch. Also, is there any better way to do,

getData = (value) =>{
  const body = {
    value: value,
    cn: "TH"
  }
return body;
}

renderData(){
  console.log("starts");
  this.props.dispatch(queryData(this.getData(10)));// called repeatedly 
}

render(){
  return(
   <div>{this.renderData()}</div>
  ) 
}

I have updated the different scenario by same type, I need to know is there any other better way to.

scenario 2

getData = () =>{
  const body = {
    value: value,
    cn: "TH"
  }
return body;
}
componentDidMount=()=>{
  this.props.dispatch(queryData(this.getData()))
}
componentDidUpdate = () => {
const {allstate} = this.props.querydata 
  if(this.props.querydata){
    this.renderState(allstate);
  }
}
renderState = (data) => {
  const getId = data.map(e=>e.id); //will get array of values [2, 3, 4]
  getid.map(e=>
    this.props.dispatch(queryState(e))); //for every id dispatch props, 
  )
}
render(){
  // will gets this by componentDidMount call
  return (
    <div>

   </div>
  )
}

Several

You shouldn't modify state within a render method, because precisely this reason. – Sassoon

Answer 1

When there is render in view ,renderData function gets called which dispatch some action, and again this make your component re-render. One solution can be move your this.renderData() function outside the render , may be in constructor or componentDidMount

Swoop

@kias thanks for reply, if i do in componentDidMount, and can access that props immediately by passing as arg to function before render. – Several

main thing you should remember is that dispatch actions should never be called directly from render function. – Swoop

@kias yes understand but I have updated scenario 2 , can you please help if any idea, – Several

@miyavv don't make any call inside render if that call have dispatch action or state updates. Instead you can use componentDidUpdate method , check if this.props.querydata is available and make renderState function call. – Swoop

@kias thanks , I did using componentDidUpdate as you mentioned, but dispatch props method is not working , is it due to map, if i pass directly single id able to receive , updated the scenario as mentioned, – Several

@miyavv which dispatch is not working? Is it inside componentDidMount or renderState – Swoop

@miyavv It is not good practise to dispatch action inside loop as it will create multiple re-render in each loop. Try to dispatch all updates at once in one dispatch action. – Swoop

@kias thanks for reply, can you proivde some sample please – Several

@miyavv I have create a small sample similar to your problem. Have a look codesandbox.io/s/reactreduxupdated-y9c4g – Swoop

Answer 2

render function will be called every time React class get updated.

If your action queryData is for fetching data to display in component, put it inside componentDidMount. It will only be called once when React component first mounted.

Roseboro