@apollo/client + useSyncExternalStore - data updates not working since 10.9.0+

[kevineinarsson]

Describe the bug

🙇 my knowledge about anything react 18 is baaad. apologies if the issue is useless. feel free to close if that's the case.

useSyncExternalStore calls in @apollo/client don't update any state. It uses a memoized function (useCallback) as "subscribe" param.

Issues like this one seem to be already known judging by comments in the codebase. But since @apollo/client is a popular package I thought it would be good to open an issue for people like myself...

To Reproduce

I created a minimal test that works when using the method shipped in @apollo/client (link).

In hooks.test.js under the useSyncExternalStore section:

it('works with useCallback', () => {
  let toggle;
  const App = () => {
    const [state, setState] = useState(true);
    toggle = setState.bind(this, () => false);

    const value = useSyncExternalStore(
      useCallback(() => {
        return () => {};
      }, [state]),
      () => state ? 'yep' : 'nope'
    );

    return <p>{value}</p>;
  };

  act(() => {
    render(<App />, scratch);
  });
  expect(scratch.innerHTML).to.equal('<p>yep</p>');

  toggle();
  rerender();

  expect(scratch.innerHTML).to.equal('<p>nope</p>');
});

When replacing useSyncExternalStore with the function that's shipped with @apollo/client, the value updates properly.

Workarounds
Using patch-package (😄) to null out the useSyncExternalStore import from React works, leading to the shipped method in the library to be used.