When I subscribe to the same atom multiple times in a component, the component will render multiple times when the atom changes.

[zlqxk]

The code example is as follows，First of all, the react version must be 16.x to reproduce, and I found a very strange phenomenon. If it is triggered by a react event, the component will only render once. If it is triggered by an event listener, the component will render multiple times. I suspect it is related to the logic of react's bailout, but I'm not sure. I hope you can help me solve it.

export const Test = () => {
  const [isFocused, setIsFocused] = useAtom(focusAtom);
  const isFocused2 = useAtomValue(focusAtom);
  const isFocused3 = useAtomValue(focusAtom);
  const isFocused4 = useAtomValue(focusAtom);
  const isFocused5 = useAtomValue(focusAtom);
  const isFocused6 = useAtomValue(focusAtom);

  useEffect(() => {
    const handleClick = () => {
      setIsFocused(Math.random());
    };

    window.addEventListener('click', handleClick);

    return () => {
      window.removeEventListener('click', handleClick);
    };
  }, [setIsFocused]);

  console.log('Component rendered');

  return (
    <div>
      <p>test</p>
    </div>
  );
};

[dai-shi]

Probably, you may need to use unstable_batchedUpdates with React 16.

[zlqxk]

It may not work. Unstable_batchedUpdates solves the problem of multiple renderings triggered by multiple setState, but mine is multiple renderings triggered by one setAtomValue.

[dai-shi]

If I remember correctly, it worked for such cases.

[zlqxk]

You may have misunderstood what I meant. Unstable_batchedUpdates solves the following situation

setTimeout(() => { 
  let tmp = 1;
  ReactDOM.unstable_batchedUpdates(() => { 
    setStateA(); 
    setStateB(); 
    setStateC(); 
  });
}, 1000);

but，my example only has one setAtom (setState) operation。I think the number of renderings caused by a set operation should not be related to how many times I use useAtom，If we use the react provider to write this example, each click event will only trigger one render.

[dai-shi]

Can you modify this https://stackblitz.com/edit/github-55w4gysk?file=src%2Fapp.tsx to use React 16 and reproduce the behavior, and confirm if unstable_batchedUpdates helps or not?

[dmaskasky]

When I tested this with React 16, here's what I got.

  console.log
    Component rendered

      at __tests__/tryout.test.tsx:31:13

  console.log
    Component rendered

      at __tests__/tryout.test.tsx:31:13

  console.log
    Component rendered

      at __tests__/tryout.test.tsx:31:13

 PASS  __tests__/tryout.test.tsx
  ✓ should render once on atom update (multiple subscribers) (29 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.568 s
Ran all test suites matching /__tests__\/tryout.test.tsx/i.

Watch Usage: Press w to show more.

Test code:

import React, { useEffect } from 'react'
import { atom, useAtomValue, useSetAtom } from 'jotai'
import { render, act } from '@testing-library/react'

it.only('should render once on atom update (multiple subscribers)', () => {
  const focusAtom = atom(0)
  const Component = jest.fn(() => {
    const setIsFocused = useSetAtom(focusAtom)
    const isFocused2 = useAtomValue(focusAtom);
    const isFocused3 = useAtomValue(focusAtom);
    const isFocused4 = useAtomValue(focusAtom);
    const isFocused5 = useAtomValue(focusAtom);
    const isFocused6 = useAtomValue(focusAtom);

    useEffect(() => {
      const handleClick = () => {
        setIsFocused((v) => v + 1)
      }

      window.addEventListener('click', handleClick)

      return () => {
        window.removeEventListener('click', handleClick)
      }
    }, [setIsFocused])

    console.log('Component rendered')

    return (
      <div>
        <p>test</p>
      </div>
    )
  })

  render(<Component />)
  expect(Component).toHaveBeenCalledTimes(1)
  Component.mockClear()
  act(() => {
    window.dispatchEvent(new Event('click'))
  })
  expect(Component).toHaveBeenCalledTimes(1)
  Component.mockClear()
  act(() => {
    window.dispatchEvent(new Event('click'))
  })
  expect(Component).toHaveBeenCalledTimes(1)
})

[zlqxk]

Thanks for your reply. So according to Jotai's expectation, when multiple useAtoms are used to subscribe to an atom, only one rendering should be triggered when the atom changes.
I will analyze the reasons for multiple renderings in detail later, and I will try to give you an online address to demonstrate this problem.

[dmaskasky]

I think it might be 2 renders in development mode since useEffect runs twice.