chore: less render on the time (#318)

react-component · Jun 23, 2022 · a8518a1 · a8518a1 · vercel · Jun 23, 2022
1 parent 7a299d8
commit a8518a1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/hooks/useMergedState.ts b/src/hooks/useMergedState.ts
@@ -16,17 +16,20 @@ enum Source {
 type ValueRecord<T> = [T, Source, T];
 
 const useUpdateEffect: typeof React.useEffect = (callback, deps) => {
-  const [firstMount, setFirstMount] = React.useState(true);
+  const firstMountRef = React.useRef(true);
 
   useLayoutEffect(() => {
-    if (!firstMount) {
+    if (!firstMountRef.current) {
       return callback();
     }
   }, deps);
 
   // We tell react that first mount has passed
   useLayoutEffect(() => {
-    setFirstMount(false);
+    firstMountRef.current = false;
+    return () => {
+      firstMountRef.current = true;
+    };
   }, []);
 };
 

diff --git a/tests/hooks.test.js b/tests/hooks.test.js
@@ -281,6 +281,19 @@ describe('hooks', () => {
 
       expect(container.textContent).toBe('1');
     });
+
+    it('render once', () => {
+      let count = 0;
+
+      const Demo = () => {
+        const [] = useMergedState();
+        count += 1;
+        return null;
+      };
+
+      render(<Demo />);
+      expect(count).toBe(1);
+    });
   });
 
   describe('useLayoutEffect', () => {