My app is structured as follows:
<App> <SelectItems/> <Tabs> <Tab> <Window1> </Tab> <Tab> <Window2> </Tab> </Tabs> </App>
App has a state element called
SelectItems is used to narrow this down to
App.state.selectedItems. The tabs work in a way that only one of the tabs shows at a given time, it's a component from
Window2 display data that depend on the
selectedItems, the data (let's call it
data2) is obtained via a computationally intensive api call. Here's the problem. The cleanest way to do this while thinking in React is to "pull the state up", so that
data2 are updated from
App whenever the
selectedItems change, and the data is then stored in the state of
App and passed down to the tabs. This however is inefficient, because only one
Window is showing at a given time, so I'm wasting time updating data that I'm never showing. In my actual app I've got many tabs, so it's a real problem.
What's a way of fixing this? I want the
Windows to update whenever the
App.state.selection changes, and I looked at
static getDerivedStateFromProps(props, state) but it looks like (but I'm not sure) that this function won't work because the state updating would be asynchronous, as it requires an API call.
Are there general strategies one can use in this situation?