docs(blog): update toastify post

documentation/blog/2023-06-01-react-toastify.md → documentation/blog/2024-08-09-react-toastify.md

@@ -4,10 +4,12 @@ description: We'll create a custom notification provider in a Refine application
 slug: react-toastify
 authors: joseph_mawa
 tags: [react, Refine]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-06-01-react-toastify/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-06-01-react-toastify/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on August 09, 2024 to add sections for Performance Considerations with Notifications.**
+
 ## Introduction
 
 React and its derivative frameworks, such as [Refine](https://github.com/refinedev/refine), make building data-intensive front-end applications a breeze. When dealing with data-intensive applications such as admin panels, dashboards, and internal tools, it is necessary to set up a robust and effective notification system.
@@ -457,23 +459,87 @@ export const notificationProvider: NotificationProvider = {
 
 You can preview the notification by editing a record. Refine will make updates and display a notification. You can also change the mutation mode of the application to `undoable` using the `options` prop of the Refine component to display the custom component above.
 
-## Conclusion
+## Performance Considerations with Notifications
 
-Having a notification system is inevitable when building complex distributed systems. It notifies users when an event or changes occur in the database.
+I would like to share some ideas about the performance considerations of notifications.
 
-Refine comes with a robust and customizable notification system when you use one of the supported UI or design systems like Material UI, Chakra UI, and Mantine.
+When enabling notifications, we should always remember the performance and, of course, remember that our application can grow larger and more complex. Here's a list of a few things I think we should consider:
 
-Refine gives you the flexibility to build a custom notification provider using a notification library like react-toastify if the built-in notification system of the supported UI or design system doesn't meet your needs.
+### Lazy Loading React-Toastify
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+Since the `react-toastify` library is a third-party package, we can apply lazy loading to it. This would mean that it loads on demand, potentially reducing the initial load time for our application.
 
-## Live CodeSandbox Example
+```tsx
+import React, { lazy, Suspense } from "react";
 
- <CodeSandboxExample path="blog-react-toastify" />
+const ToastContainer = lazy(() =>
+  import("react-toastify").then((module) => ({
+    default: module.ToastContainer,
+  })),
+);
 
----
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ToastContainer />
+      {/* Other components */}
+    </Suspense>
+  );
+}
+```
+
+### Optimize Toast Rendering
+
+If our application is posting tons of toasts, rendering them one after the other can be an issue. It might be worth the effort to batch or limit active toasts to avoid performance bottlenecks.
+
+```tsx
+import { toast } from "react-toastify";
+
+function notify() {
+  if (toast.isActive("my-toast-id")) return;
+
+  toast("New message received!", {
+    toastId: "my-toast-id", // Use a specific ID to prevent duplicate toasts
+    autoClose: 3000,
+    limit: 3, // Limit the number of toasts on screen
+  });
+}
+```
+
+### Customization of Auto Close Timings
+
+Customization of auto-close timings for notifications according to their importance level helps in maintaining the responsiveness of the UI. For example, lower durations for non-critical notifications will keep the screen clear and memory usage low.
+
+```tsx
+import { toast } from "react-toastify";
+
+function notify() {
+  // Less critical notification
+  toast.info("Information message", {
+    autoClose: 2000, // Shorter duration
+  });
+
+  // Critical notification
+  toast.error("Error occurred!", {
+    autoClose: 8000, // Longer duration for important messages
+  });
+}
+```
+
+### Monitoring Performance
+We should also look to establish some monitoring regarding the performance implications of notifications over time as more and more features are put in. This way, we can detect a slowdown at an early stage and correct it before it becomes a bigger problem.
+
+```tsx
+console.time("Toast Render Time");
+toast.success("Operation successful!", {
+  onOpen: () => console.timeEnd("Toast Render Time"),
+});
+```
+
+## Conclusion
+
+Having a notification system is inevitable when building complex distributed systems. It notifies users when an event or changes occur in the database.
+
+Refine comes with a robust and customizable notification system when you use one of the supported UI or design systems like Material UI, Chakra UI, and Mantine.
+
+Refine gives you the flexibility to build a custom notification provider using a notification library like react-toastify if the built-in notification system of the supported UI or design system doesn't meet your needs.