Merge pull request #395 from timolins/fix-subscription-race-condition

Fix subscription race condition

Author: timolins

.github/workflows/size.yml

@@ -7,9 +7,9 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 7
+          version: 9
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

src/core/store.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { DefaultToastOptions, Toast, ToastType } from './types';
 
 const TOAST_LIMIT = 20;
@@ -143,15 +143,21 @@ export const defaultTimeouts: {
 
 export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
   const [state, setState] = useState<State>(memoryState);
+  const initial = useRef(memoryState);
+
+  // TODO: Switch to useSyncExternalStore when targeting React 18+
   useEffect(() => {
+    if (initial.current !== memoryState) {
+      setState(memoryState);
+    }
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
       if (index > -1) {
         listeners.splice(index, 1);
       }
     };
-  }, [state]);
+  }, []);
 
   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,
@@ -319,3 +319,25 @@ test('pause toast', async () => {
 
   expect(toastElement).not.toBeInTheDocument();
 });
+
+test('"toast" can be called from useEffect hook', async () => {
+  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();
+});