fix: toast not appearing when toast.* called from useEffect hook

package.json

@@ -81,6 +81,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/use-sync-external-store": "^0.0.3",
     "csstype": "^3.1.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
@@ -94,7 +95,8 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "goober": "^2.1.10"
+    "goober": "^2.1.10",
+    "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=16",

src/core/store.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { DefaultToastOptions, Toast, ToastType } from './types';
 
 const TOAST_LIMIT = 20;
@@ -157,14 +157,15 @@ export const reducer = (state: State, action: Action): State => {
   }
 };
 
-const listeners: Array<(state: State) => void> = [];
+const listeners: Array<() => void> = [];
 
 let memoryState: State = { toasts: [], pausedAt: undefined };
 
 export const dispatch = (action: Action) => {
+  const oldState = memoryState;
   memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState);
+    listener();
   });
 };
 
@@ -179,16 +180,16 @@ export const defaultTimeouts: {
 };
 
 export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
-  const [state, setState] = useState<State>(memoryState);
-  useEffect(() => {
-    listeners.push(setState);
+  const state = useSyncExternalStore((onStoreChange) => {
+    listeners.push(onStoreChange);
+
     return () => {
-      const index = listeners.indexOf(setState);
+      const index = listeners.indexOf(onStoreChange);
       if (index > -1) {
         listeners.splice(index, 1);
       }
-    };
-  }, [state]);
+    }
+  }, () => memoryState);
 
   const mergedToasts = state.toasts.map((t) => ({
     ...toastOptions,

test/toast.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   render,
   screen,
@@ -115,6 +115,30 @@ test('promise toast', async () => {
   });
 });
 
+test('"toast" can be called from useEffect hook', async () => {
+  const WAIT_DELAY = 1000;
+
+  const MyComponent = () => {
+    const [success, setSuccess] = useState(false);
+    useEffect(() => {
+      toast.success("Success toast")
+      setSuccess(true);
+    }, []);
+
+    return success ? <div>MyComponent finished</div> : null;
+  }
+
+  render(
+    <>
+      <MyComponent />
+      <Toaster />
+    </>
+  );
+
+  await screen.findByText(/MyComponent finished/i);
+  expect(screen.queryByText(/Success toast/i)).toBeInTheDocument();
+});
+
 test('promise toast error', async () => {
   const WAIT_DELAY = 1000;