The idea is to use React’s props and render to update a function in a unrelated React component synchronously .

There are three steps:

1. Set a variable in Component A with whatever name you want. In this case, I name it goUpdate.

   //in Constructor
   		this.state = {
   			goUpdate : 1;
   		};
   
   		//in render
   
   		<ComponentB  goUpdate = {this.state.goUpdate} />
   
   		

   The reason I give it a integer value is because if I give it a boolean, the render system in Component A and Component B will end up in an infinite loop.

2. Set a variable in Component B with whatever name you want. In this case, I also name it goUpdate. And then in Component B render, do a check on goUpdate’s value. If the value passed from Component A is larger than the saved value, call the function you want.

   //in Constructor
   		this.goUpdate = this.props.goUpdate
   
   		//in render
   		if (this.props.goUpdate > this.state.goUpdate){
   			handleFunction
   		}
   		

3. Then , all you need to do is to update goUpdate in Component A, then handleFunction in component B will be triggered.