I am working with a react component that contains a list of trips as children components. My app fetches the list of trips from an API and uses redux-thunk actions to store the trips list in state when the Promise resolves. The trips data is paginated in sets of 20 trips per page. I have a scroll event listener set up so that when you scroll to the bottom of the list, 20 more trips are fetched and added to the redux state via a redux action. I also have a filter set up so you can filter through trips by train line. The filter triggers a new fetch from the API with a filter query and updates state to the newly returned list, all via redux-thunk actions. I am also keeping track of trip components via keys which are set to the unique trip ids.
My trips list re-renders correctly except for in one case.
When I scroll repeatedly to load a large number of trips, then try to filter by train line, the trips list doesn’t rerender completely to the filtered list. The filter loads correctly, but 20 of the previously rendered trips remain behind on the page. I can see that state and props are updated correctly, but something in the rendering mechanism is forcing expired props to remain rendered.
Does anyone have an idea of what could cause expired props to remain rendered?