fix: yielding consecutive identical values causes unnecessary re-renders for useAsyncIter and <Iterate> in misalignment with React.useState (#21)

Author: shtaif

spec/tests/Iterate.spec.tsx

@@ -667,6 +667,42 @@ describe('`Iterate` component', () => {
       );
     }
   );
+
+  it(
+    gray(
+      'When given iterable yields consecutive identical values the hook will not consequently re-render'
+    ),
+    async () => {
+      let timesRerendered = 0;
+      let lastRenderFnInput: undefined | IterationResult<string>;
+      const channel = new IterableChannelTestHelper<string>();
+
+      const rendered = render(
+        <Iterate value={channel}>
+          {next => {
+            timesRerendered++;
+            lastRenderFnInput = next;
+            return <div id="test-created-elem">Render count: {timesRerendered}</div>;
+          }}
+        </Iterate>
+      );
+
+      for (let i = 0; i < 3; ++i) {
+        await act(() => channel.put('a'));
+      }
+
+      expect(timesRerendered).toStrictEqual(2);
+      expect(lastRenderFnInput).toStrictEqual({
+        value: 'a',
+        pendingFirst: false,
+        done: false,
+        error: undefined,
+      });
+      expect(rendered.container.innerHTML).toStrictEqual(
+        '<div id="test-created-elem">Render count: 2</div>'
+      );
+    }
+  );
 });
 
 const simulatedError = new Error('🚨 Simulated Error 🚨');

spec/tests/useAsyncIter.spec.ts

@@ -471,6 +471,33 @@ describe('`useAsyncIter` hook', () => {
       });
     }
   );
+
+  it(
+    gray(
+      'When given iterable yields consecutive identical values the hook will not consequently re-render'
+    ),
+    async () => {
+      let timesRerendered = 0;
+      const channel = new IterableChannelTestHelper<string>();
+
+      const renderedHook = renderHook(() => {
+        timesRerendered++;
+        return useAsyncIter(channel);
+      });
+
+      for (let i = 0; i < 3; ++i) {
+        await act(() => channel.put('a'));
+      }
+
+      expect(timesRerendered).toStrictEqual(2);
+      expect(renderedHook.result.current).toStrictEqual({
+        value: 'a',
+        pendingFirst: false,
+        done: false,
+        error: undefined,
+      });
+    }
+  );
 });
 
 const simulatedError = new Error('🚨 Simulated Error 🚨');

src/useAsyncIter/index.ts

@@ -169,13 +169,15 @@ const useAsyncIter: {
                   iterationIdx++
                 ) ?? (value as ExtractAsyncIterValue<TVal>);
 
-              stateRef.current = {
-                value: formattedValue,
-                pendingFirst: false,
-                done: false,
-                error: undefined,
-              };
-              rerender();
+              if (!Object.is(formattedValue, stateRef.current.value)) {
+                stateRef.current = {
+                  value: formattedValue,
+                  pendingFirst: false,
+                  done: false,
+                  error: undefined,
+                };
+                rerender();
+              }
             }
           }
           if (!iteratorClosedByConsumer) {