Merge pull request #8136 from marmelab/fix-usenotify-triggers-rerenders

Fix useNotify triggers useless rerenders

Author: slax57

packages/ra-core/src/notification/AddNotificationContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import { NotificationPayload } from './types';
+
+export const AddNotificationContext = createContext<
+    (notification: NotificationPayload) => void
+>(() => {});

packages/ra-core/src/notification/NotificationContextProvider.tsx

@@ -3,6 +3,7 @@ import { useState, useCallback, useMemo } from 'react';
 
 import { NotificationPayload } from './types';
 import { NotificationContext } from './NotificationContext';
+import { AddNotificationContext } from './AddNotificationContext';
 
 export const NotificationContextProvider = ({ children }) => {
     const [notifications, setNotifications] = useState<NotificationPayload[]>(
@@ -33,9 +34,13 @@ export const NotificationContextProvider = ({ children }) => {
         [notifications] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
+    // we separate the addNotification context to avoid rerendering all components
+    // that depend on useNotify when a notification is dispatched
     return (
         <NotificationContext.Provider value={contextValue}>
-            {children}
+            <AddNotificationContext.Provider value={addNotification}>
+                {children}
+            </AddNotificationContext.Provider>
         </NotificationContext.Provider>
     );
 };

packages/ra-core/src/notification/index.ts

@@ -1,5 +1,7 @@
-export * from './types';
-export * from './useNotify';
+export * from './AddNotificationContext';
 export * from './NotificationContext';
 export * from './NotificationContextProvider';
+export * from './types';
+export * from './useAddNotificationContext';
 export * from './useNotificationContext';
+export * from './useNotify';

packages/ra-core/src/notification/useAddNotificationContext.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { AddNotificationContext } from './AddNotificationContext';
+
+export const useAddNotificationContext = () =>
+    useContext(AddNotificationContext);

packages/ra-core/src/notification/useNotify.stories.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useNotify } from './useNotify';
+import { useNotificationContext } from './useNotificationContext';
+import { NotificationContextProvider } from './NotificationContextProvider';
+
+export default {
+    title: 'ra-core/useNotify',
+};
+
+const Button = () => {
+    const notify = useNotify();
+    const handleClick = React.useCallback(() => {
+        notify('hello');
+    }, [notify]);
+    return <button onClick={handleClick}>Notify</button>;
+};
+
+const Notifications = () => {
+    const { notifications } = useNotificationContext();
+    return (
+        <ul>
+            {notifications.map(({ message }, id) => (
+                <li key={id}>{message}</li>
+            ))}
+        </ul>
+    );
+};
+
+export const Basic = () => (
+    <NotificationContextProvider>
+        <Button />
+        <Notifications />
+    </NotificationContextProvider>
+);
+
+export const ManyListeners = () => {
+    const times = new Array(100).fill(0);
+    return (
+        <NotificationContextProvider>
+            {times.map((_, index) => (
+                <Button key={index} />
+            ))}
+            <div>
+                <Notifications />
+            </div>
+        </NotificationContextProvider>
+    );
+};

packages/ra-core/src/notification/useNotify.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useNotificationContext } from './useNotificationContext';
+import { useAddNotificationContext } from './useAddNotificationContext';
 import { NotificationType, NotificationOptions } from './types';
 
 /**
@@ -19,7 +19,7 @@ import { NotificationType, NotificationOptions } from './types';
  * notify('Post renamed', { type: 'info', undoable: true })
  */
 export const useNotify = () => {
-    const { addNotification } = useNotificationContext();
+    const addNotification = useAddNotificationContext();
     return useCallback(
         (
             message: string,