Force batching of GET_MANY response updates

marmelab · Aug 22, 2019 · c87f129 · c87f129
1 parent 6217ef6
commit c87f129
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/packages/ra-core/src/dataProvider/useGetMany.ts b/packages/ra-core/src/dataProvider/useGetMany.ts
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import ReactDOM from 'react-dom';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import debounce from 'lodash/debounce';
@@ -175,27 +176,32 @@ const callQueries = debounce(() => {
             { ids: accumulatedIds },
             { action: CRUD_GET_MANY }
         )
-            .then(response => {
-                queries.forEach(({ ids, setState, onSuccess }) => {
-                    setState(prevState => ({
-                        ...prevState,
-                        loading: false,
-                        loaded: true,
-                    }));
-                    if (onSuccess) {
-                        const subData = ids.map(id =>
-                            response.data.find(datum => datum.id == id)
-                        );
-                        onSuccess({ data: subData });
-                    }
-                });
-            })
-            .catch(error => {
-                queries.forEach(({ setState, onFailure }) => {
-                    setState({ error, loading: false, loaded: false });
-                    onFailure && onFailure(error);
-                });
-            });
+            .then(response =>
+                // Forces batching, see https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973
+                ReactDOM.unstable_batchedUpdates(() =>
+                    queries.forEach(({ ids, setState, onSuccess }) => {
+                        setState(prevState => ({
+                            ...prevState,
+                            loading: false,
+                            loaded: true,
+                        }));
+                        if (onSuccess) {
+                            const subData = ids.map(id =>
+                                response.data.find(datum => datum.id == id)
+                            );
+                            onSuccess({ data: subData });
+                        }
+                    })
+                )
+            )
+            .catch(error =>
+                ReactDOM.unstable_batchedUpdates(() =>
+                    queries.forEach(({ setState, onFailure }) => {
+                        setState({ error, loading: false, loaded: false });
+                        onFailure && onFailure(error);
+                    })
+                )
+            );
         delete queriesToCall[resource];
     });
 });