Merge pull request #7444 from marmelab/fix-list-redirect-v3

[v3] Fix race condition due to debounced setFilter

Author: slax57

cypress/integration/list.js

@@ -102,13 +102,19 @@ describe('List Page', () => {
             LoginPage.login('admin', 'password');
             ListPagePosts.navigate();
             ListPagePosts.showFilter('title');
+            // Let's clear the filter first, otherwise we have no way of knowing when the new filter has been (debounced and) applied
+            ListPagePosts.setFilterValue('title', '');
+            cy.contains('1-10 of 13');
+            // Now let's change the filter to something different than the default value
             ListPagePosts.setFilterValue(
                 'title',
                 'Omnis voluptate enim similique est possimus'
             );
             cy.contains('1-1 of 1');
+            // Navigate away and then back
             cy.get('[href="#/users"]').click();
             cy.get('[href="#/posts"]').click();
+            // Check that our filter has been preserved
             cy.get(ListPagePosts.elements.filter('title')).should(el =>
                 expect(el).to.have.value(
                     'Omnis voluptate enim similique est possimus'

packages/ra-core/src/controller/useListParams.ts

@@ -17,6 +17,7 @@ import queryReducer, {
 import { changeListParams, ListParams } from '../actions/listActions';
 import { SortPayload, ReduxState, FilterPayload } from '../types';
 import removeEmpty from '../util/removeEmpty';
+import { useIsMounted } from '../util/hooks';
 
 interface ListParamsOptions {
     resource: string;
@@ -126,6 +127,7 @@ const useListParams = ({
         shallowEqual
     );
     const tempParams = useRef<ListParams>();
+    const isMounted = useIsMounted();
 
     const requestSignature = [
         location.search,
@@ -164,6 +166,11 @@ const useListParams = ({
     }, [location.search]); // eslint-disable-line
 
     const changeParams = useCallback(action => {
+        // do not change params if the component is already unmounted
+        // this is necessary because changeParams can be debounced, and therefore
+        // executed after the component is unmounted
+        if (!isMounted.current) return;
+
         if (!tempParams.current) {
             // no other changeParams action dispatched this tick
             tempParams.current = queryReducer(query, action);

packages/ra-core/src/util/hooks.ts

@@ -62,3 +62,13 @@ export function useTimeout(ms = 0) {
 
     return ready;
 }
+
+export function useIsMounted() {
+    const isMounted = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}