fix: first yielding wrongly ignored if yielded value is identical to the last one stored before (#36)

Author: shtaif

spec/tests/Iterate.spec.tsx

@@ -662,7 +662,9 @@ describe('`Iterate` component', () => {
   );
 
   it(
-    gray('When given iterable yields consecutive identical values the hook will not re-render'),
+    gray(
+      'When given iterable yields consecutive identical values after the first, the component will not re-render'
+    ),
     async () => {
       const channel = new IteratorChannelTestHelper<string>();
       const renderFn = vi.fn() as Mock<
@@ -691,6 +693,61 @@ describe('`Iterate` component', () => {
     }
   );
 
+  it(
+    gray(
+      "When given iterable's first yield is identical to the previous value, the component does re-render"
+    ),
+    async () => {
+      const renderFn = vi.fn() as Mock<
+        (next: IterationResult<AsyncIterable<string | undefined>>) => any
+      >;
+      const channel1 = new IteratorChannelTestHelper<string>();
+
+      const Component = (props: { value: AsyncIterable<string> }) => {
+        return (
+          <Iterate value={props.value}>
+            {renderFn.mockImplementation(() => (
+              <div id="test-created-elem">Render count: {renderFn.mock.calls.length}</div>
+            ))}
+          </Iterate>
+        );
+      };
+
+      const rendered = await act(() => render(<Component value={channel1} />));
+
+      await act(() => channel1.put('a'));
+
+      const channel2 = new IteratorChannelTestHelper<string>();
+      await act(() => rendered.rerender(<Component value={channel2} />));
+      expect(renderFn.mock.calls).lengthOf(3);
+      expect(renderFn.mock.lastCall).toStrictEqual([
+        {
+          value: 'a',
+          pendingFirst: true,
+          done: false,
+          error: undefined,
+        },
+      ]);
+      expect(rendered.container.innerHTML).toStrictEqual(
+        '<div id="test-created-elem">Render count: 3</div>'
+      );
+
+      await act(() => channel2.put('a'));
+      expect(renderFn.mock.calls).lengthOf(4);
+      expect(renderFn.mock.lastCall).toStrictEqual([
+        {
+          value: 'a',
+          pendingFirst: false,
+          done: false,
+          error: undefined,
+        },
+      ]);
+      expect(rendered.container.innerHTML).toStrictEqual(
+        '<div id="test-created-elem">Render count: 4</div>'
+      );
+    }
+  );
+
   it(
     gray(
       'When given a `ReactAsyncIterable` yielding `undefined`s or `null`s that wraps an iter which originally yields non-nullable values, processes the `undefined`s and `null` values expected'

spec/tests/useAsyncIter.spec.ts

@@ -466,7 +466,9 @@ describe('`useAsyncIter` hook', () => {
   );
 
   it(
-    gray('When given iterable yields consecutive identical values the hook will not re-render'),
+    gray(
+      'When given iterable yields consecutive identical values after the first, the hook will not re-render'
+    ),
     async () => {
       let timesRerendered = 0;
       const channel = new IteratorChannelTestHelper<string>();
@@ -490,6 +492,47 @@ describe('`useAsyncIter` hook', () => {
     }
   );
 
+  it(
+    gray(
+      "When given iterable's first yield is identical to the previous value, the hook does re-render"
+    ),
+    async () => {
+      let timesRerendered = 0;
+      const channel1 = new IteratorChannelTestHelper<string>();
+
+      const renderedHook = await act(() =>
+        renderHook(
+          ({ channel }) => {
+            timesRerendered++;
+            return useAsyncIter(channel);
+          },
+          { initialProps: { channel: channel1 } }
+        )
+      );
+
+      await act(() => channel1.put('a'));
+
+      const channel2 = new IteratorChannelTestHelper<string>();
+      await act(() => renderedHook.rerender({ channel: channel2 }));
+      expect(timesRerendered).toStrictEqual(3);
+      expect(renderedHook.result.current).toStrictEqual({
+        value: 'a',
+        pendingFirst: true,
+        done: false,
+        error: undefined,
+      });
+
+      await act(() => channel2.put('a'));
+      expect(timesRerendered).toStrictEqual(4);
+      expect(renderedHook.result.current).toStrictEqual({
+        value: 'a',
+        pendingFirst: false,
+        done: false,
+        error: undefined,
+      });
+    }
+  );
+
   it(
     gray(
       'When given a `ReactAsyncIterable` yielding `undefined`s or `null`s that wraps an iter which originally yields non-nullable values, returns the `undefined`s and `null`s in the result as expected'

spec/tests/useAsyncIterMulti.spec.ts

@@ -597,7 +597,9 @@ describe('`useAsyncIterMulti` hook', () => {
   );
 
   it(
-    gray('If any given iterable yields consecutive identical values, the hook will not re-render'),
+    gray(
+      'If any given iterable yields consecutive identical values after the first, the hook will not re-render'
+    ),
     async () => {
       const channel1 = new IteratorChannelTestHelper<string>();
       const channel2 = new IteratorChannelTestHelper<string>();
@@ -624,6 +626,41 @@ describe('`useAsyncIterMulti` hook', () => {
     }
   );
 
+  it(
+    gray(
+      "When given iterable's first yield is identical to the previous value, the hook does re-render"
+    ),
+    async () => {
+      let timesRerendered = 0;
+      const channel1 = new IteratorChannelTestHelper<string>();
+
+      const renderedHook = await act(() =>
+        renderHook(
+          ({ channel }) => {
+            timesRerendered++;
+            return useAsyncIterMulti([channel]);
+          },
+          { initialProps: { channel: channel1 } }
+        )
+      );
+
+      await act(() => channel1.put('a'));
+
+      const channel2 = new IteratorChannelTestHelper<string>();
+      await act(() => renderedHook.rerender({ channel: channel2 }));
+      expect(timesRerendered).toStrictEqual(3);
+      expect(renderedHook.result.current).toStrictEqual([
+        { value: 'a', pendingFirst: true, done: false, error: undefined },
+      ]);
+
+      await act(() => channel2.put('a'));
+      expect(timesRerendered).toStrictEqual(4);
+      expect(renderedHook.result.current).toStrictEqual([
+        { value: 'a', pendingFirst: false, done: false, error: undefined },
+      ]);
+    }
+  );
+
   it(
     gray(
       'When given rapid-yielding iterables, consecutive values are batched into a single render that takes only the most recent values'

src/common/iterateAsyncIterWithCallbacks.ts

@@ -22,12 +22,24 @@ function iterateAsyncIterWithCallbacks<T>(
 
   (async () => {
     try {
-      for await (const value of { [Symbol.asyncIterator]: () => iterator }) {
-        if (!iteratorClosedByConsumer && !Object.is(value, lastValue)) {
-          lastValue = value;
-          changeCb({ value, done: false, error: undefined });
+      const { done, value } = await iterator.next();
+
+      if (iteratorClosedByConsumer) {
+        return;
+      }
+
+      if (!done) {
+        lastValue = value;
+        changeCb({ value, done: false, error: undefined }); // Ensuring the first yield is exempt from the "different from previous value" check
+
+        for await (const value of { [Symbol.asyncIterator]: () => iterator }) {
+          if (!iteratorClosedByConsumer && !Object.is(value, lastValue)) {
+            lastValue = value;
+            changeCb({ value, done: false, error: undefined });
+          }
         }
       }
+
       if (!iteratorClosedByConsumer) {
         changeCb({ value: lastValue, done: true, error: undefined });
       }