Merge pull request #34 from udecode/perf/set-timeout

Author: zbeyens

.changeset/shiny-spiders-swim.md

@@ -0,0 +1,5 @@
+---
+'jotai-x': patch
+---
+
+PERF: Remove infinite render detection (causing performance issues in development)

README.md

@@ -85,7 +85,6 @@ const { useUserValue, useUserSet, useUserState, UserProvider } =
         // Optional derived atoms
         intro: atom((get) => `My name is ${get(atoms.name)}`),
       }),
-      infiniteRenderDetectionLimit: 100, // Optional render detection limit
     }
   );
 ```
@@ -98,7 +97,6 @@ Available options:
   delay?: number;
   effect?: React.ComponentType;
   extend?: (atoms: Atoms) => DerivedAtoms;
-  infiniteRenderDetectionLimit?: number;
 }
 ```
 
@@ -390,7 +388,7 @@ The store-based atom hooks provide more flexibility when working with external a
 
 ## Troubleshooting
 
-### Infinite Render Detection
+### Infinite Renders
 
 When using value hooks with selectors, ensure they are memoized:
 

packages/jotai-x/README.md

@@ -85,7 +85,6 @@ const { useUserValue, useUserSet, useUserState, UserProvider } =
         // Optional derived atoms
         intro: atom((get) => `My name is ${get(atoms.name)}`),
       }),
-      infiniteRenderDetectionLimit: 100, // Optional render detection limit
     }
   );
 ```
@@ -98,7 +97,6 @@ Available options:
   delay?: number;
   effect?: React.ComponentType;
   extend?: (atoms: Atoms) => DerivedAtoms;
-  infiniteRenderDetectionLimit?: number;
 }
 ```
 
@@ -390,7 +388,7 @@ The store-based atom hooks provide more flexibility when working with external a
 
 ## Troubleshooting
 
-### Infinite Render Detection
+### Infinite Renders
 
 When using value hooks with selectors, ensure they are memoized:
 

packages/jotai-x/src/createAtomStore.spec.tsx

@@ -142,16 +142,6 @@ describe('createAtomStore', () => {
       );
     };
 
-    const BadSelectorRenderer = () => {
-      const arr0 = useMyTestStoreStore().useArrValue((v) => v[0]);
-      return <div>{arr0}</div>;
-    };
-
-    const BadSelectorRenderer2 = () => {
-      const arr0 = useMyTestStoreValue('arr', { selector: (v) => v[0] });
-      return <div>{arr0}</div>;
-    };
-
     const Buttons = () => {
       const store = useMyTestStoreStore();
       return (
@@ -268,26 +258,6 @@ describe('createAtomStore', () => {
       expect(getByText('arrNum: ava')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: ava')).toBeInTheDocument();
     });
-
-    it('Throw error if user does not memoize selector', () => {
-      expect(() =>
-        render(
-          <MyTestStoreProvider>
-            <BadSelectorRenderer />
-          </MyTestStoreProvider>
-        )
-      ).toThrow();
-    });
-
-    it('Throw error is user does memoize selector 2', () => {
-      expect(() =>
-        render(
-          <MyTestStoreProvider>
-            <BadSelectorRenderer2 />
-          </MyTestStoreProvider>
-        )
-      ).toThrow();
-    });
   });
 
   describe('single provider', () => {

packages/jotai-x/src/createAtomStore.ts

@@ -421,7 +421,6 @@ export interface CreateAtomStoreOptions<
   delay?: UseAtomOptions['delay'];
   effect?: React.FC;
   extend?: (atomsWithoutExtend: StoreAtomsWithoutExtend<T>) => E;
-  infiniteRenderDetectionLimit?: number;
   suppressWarnings?: boolean;
 }
 
@@ -448,7 +447,6 @@ export const createAtomStore = <
     delay: delayRoot,
     effect,
     extend,
-    infiniteRenderDetectionLimit = 100_000,
     suppressWarnings,
   }: CreateAtomStoreOptions<T, E, N>
 ): AtomStoreApi<T, E, N> => {
@@ -510,8 +508,6 @@ export const createAtomStore = <
     return store ?? contextStore;
   };
 
-  let renderCount = 0;
-
   const useAtomValueWithStore: UseAtomValueFn = (
     atomConfig,
     store,
@@ -520,25 +516,6 @@ export const createAtomStore = <
     equalityFnOrDeps,
     deps
   ) => {
-    // If selector/equalityFn are not memoized, infinite loop will occur.
-    if (process.env.NODE_ENV !== 'production' && infiniteRenderDetectionLimit) {
-      renderCount += 1;
-      if (renderCount > infiniteRenderDetectionLimit) {
-        throw new Error(
-          `
-use<Key>Value/useValue/use<StoreName>Value has rendered ${infiniteRenderDetectionLimit} times in the same render.
-It is very likely to have fallen into an infinite loop.
-That is because you do not memoize the selector/equalityFn function param.
-Please wrap them with useCallback or configure the deps array correctly.`
-        );
-      }
-      // We need to use setTimeout instead of useEffect here, because when infinite loop happens,
-      // the effect (fired in the next micro task) will execute before the rerender.
-      setTimeout(() => {
-        renderCount = 0;
-      });
-    }
-
     const options = convertScopeShorthand(optionsOrScope);
     const equalityFn =
       typeof equalityFnOrDeps === 'function' ? equalityFnOrDeps : undefined;