Ufdjrw

I'm fairly new to react and completely stuck on this point.

Say I have a fairly simple app with the following structure:

<App>
|___<Container>
 |___<Chart>

Where in <App>, I have an event that modifies the props of <Container> and subsequently fires off a query method in <Container> to a database based off these props, which takes a certain amount of time (e.g. 1 second). Once this query returns, it modifies the state of <Container>, specifically a data property that goes into the props of <Chart>.

Now say I want <Chart> to be able to see what has changed between the previous and new props from <App> (assume these are also passed all the way to <Chart>). What we get is:

App event -> modifies App state -> updates Container based on props -> fires query

But where can I place this 'fire query' function? If I do this in ComponentDidUpdate, it means I lose the previous props since the query modifies the state of <Container>, thus updating <Chart> for a second time, meaning that by the second time around, 'prevProps' will already be the updated props after the event in the <App> element.

What can I do here? I can't see how I can use shouldComponentUpdate here since that fires before the update, and I need the 'update' event to fire so that the <Container> element has a reason to re-fetch the data after the event in <App>.

Any help would be much appreciated!

Seems to be some confusion around props vs state. Think of state as private to that component. Updating state of container does not mean props are altered.

Think of a light switch. State is on or off. However the home designer may have defined certain properties and passed them on to the interior design team around things like color and shape. These are separate.

Key point is the light switch can have a state of on or off and this does not change the properties of the light switch.

In your example, prop history can be tracked as a part of the container state.

class Container extends React.Component 
 constructor(props) 
 super(props);
 
 this.state = 
 data: [
 [Math.random(), Math.random(), Math.random()]
 ]
 
 

 componentDidMount() 
 setInterval(() => this.setState( 
 data: [
 ...this.state.data, 
 [Math.random(), Math.random(), Math.random()]
 ]
 ), 5000)
 
 
 render() 
 return (
 <Chart data=this.state.data />
 );
 


class Chart extends React.Component 
 render() []).reduce((total, current) => total + current, 0);
 const currentDataSum = (data[1] 


ReactDOM.render(<Container />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>