I am building a ReactJS application using AG Grid, with the following component structure:
Grid.jsx: Contains the AG Grid component.
GridContainer.jsx: Renders the Grid.jsx component.
Main.jsx: Manages multiple tabs, each triggering different API calls. Workflow:
The Main.jsx component has a shared state, rowData, to store data for AG Grid. On switching tabs, an API call is made using axios, and the response is used to update the rowData state.
The GridContainer.jsx renders the grid using this state.
Problem: When switching between tabs, if the API response for a previously selected tab is delayed, it updates the shared rowData state after the tab has been changed. This causes AG Grid to display outdated data from the previous tab in the currently active tab.
Expected Behavior: The grid should display only the data relevant to the currently active tab. Outdated API responses from previously active tabs should not affect the state or grid rendering.
How can I handle that, AG Grid displays data only for the active tab, even when previous API responses are delayed?
Just to understand more clear, the below flow diagram:
-Click TAB 1, which triggers an API call to fetch data for TAB 1.
-Quickly switch to TAB 2, which triggers a new API call for TAB 2.
-Initially, TAB 2 displays the correct data.
-If the TAB 1 API response arrives late (e.g., after 10 seconds), the shared rowData state is updated with TAB 1 data, causing TAB 2 to display incorrect information.
