useEffect not always run when using useAtomValue and a hook using requestAnimationFrame

[timreinke]

This is a bit of a weird one I ran into when using tiptap. I isolated the behavior and reproduced with only react + jotai.

In the example code, useRefWithInitialization is similar to tiptap's useEditor - it has a ref to hold onto an object instance. The ref starts off null, and is initialized in a useEffect. The useEffect and forces a rerender inside a requestAnimationFrame.

However, the useEffect is not re-run when using useAtomValue.

Example code:

function UseAtomValue() {
  // commenting out this line removes the bug - the effect is always rerun
  const stringValue = useAtomValue(stringAtom); 

  const refValue = useRefWithInitialization();

  React.useEffect(() => {
    console.log("UseAtomValue", "useEffect", refValue);
    // might do something to the refValue in a real app
  }, [refValue]);
  console.log("UseAtomValue", "render", refValue);
  return <></>;
}

function useRefWithInitialization() {
  // simplified version of Tiptap's useEditor:
  // https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/useEditor.ts#L11

  const ref = React.useRef(null);
  const [, forceUpdate] = React.useState({});
  React.useEffect(() => {
    ref.current = "thing";
    // removing the requestAnimationFrame also 'fixes' the bug, the useEffect is rerun properly
    requestAnimationFrame(() => {
      forceUpdate({});
    });
  }, []);

  return ref.current;
}

The example code produces this log trace:

UseAtomValue render null
UseAtomValue useEffect null
UseAtomValue render thing
UseAtomValue render thing

As you can see, the UseAtomValue component is properly rerendered after useRefWithInitialization does its thing. But, the effect is not rerun with the new value.

Deps:

"jotai": "2.8.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"

Some interesting points to note:

• the useEffect is rerun when using useSetAtom. It only breaks with useAtomValue
• A plain useState also works fine
• I also tried this out with the react 19 beta. The behavior is nondeterministic - sometimes the effect reruns properly, sometimes it doesn't!

Sandbox (includes components using useSetAtom and useState):

https://codesandbox.io/p/devbox/vite-react-forked-thktkt?file=%2Fsrc%2Fmain.jsx%3A10%2C1-11%2C1&workspaceId=cb54fff1-7c30-47a6-b51e-4cc1f3702699

[rothsandro]

It's not directly related to Jotai but can be reproduced with React itself, if we use a useReducer and call the dispatch function in an effect (which useAtomValue does).

function Example() {
  const ref = React.useRef(null);
  const refValue = ref.current;

  const [, rerender] = React.useState({});
  const [, dispatch] = React.useReducer(reducer, initial);

  React.useEffect(() => {
    ref.current = "foo";

    const x = setTimeout(() => rerender({}), 1_000);
    return () => clearTimeout(x);
  }, []);

  // Remove this and it works fine.
  React.useEffect(() => dispatch(), []);

  React.useEffect(() => console.log("useEffect", refValue), [refValue]);

  console.log("render", refValue);
  return <></>;
}

Repro: https://codesandbox.io/p/devbox/react-dispatch-effect-yvj5f4

[rothsandro]

We can actually simplify the example. If the reducer dispatch function is called in an effect, and the reducer returns the same state, the component is render twice but the effect is only called once.

function Example() {
  const [, dispatch] = React.useReducer(reducer, initial);

  React.useEffect(() => dispatch(), []);

  // Called once
  React.useEffect(() => console.log('effect'));

  // Called twice
  console.log('render');

  return <></>;
}

In your case, the effect has a dependency on the ref value. Initially, this value is null and the effect is called. On the second render (because of dispatch()) it has the updated value thing but the effect is not called. On the third render, the effect would be called again but because the value is the same as in the second render it's not called.

I would say it's a React bug and should be reported there. The second render should either call the effects or the third render should compare the dependencies with the first render, not the 2nd.