Is jotai suitable for storing DOM elements?

[ouweiya]

jotai can handle non-serialized values well, such as: Ref elements. Are there any pitfalls or unexpected errors when using jotai to store DOM elements?

const domAtom = atom<HTMLElement | null>(null);

const One = () => {
    const dom = useAtomValue(domAtom);

    const clickHandler = () => {
        console.log('App DOM:', dom);
    };

    return <div onClick={clickHandler}>One</div>;
};

const App = () => {
    const setDom = useSetAtom(domAtom);

    return (
        <div>
            <h1 ref={setDom}>Hello</h1>
            <One />
        </div>
    );
};

export default App;

[himself65]

Yes you can.

But for React 19, the usage of ref has changed.

https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs

You need to

<div 
  ref={
    (ref) => {
      setDom(ref)
      return () => setDom(null)
    }
}/>

[dai-shi]

FWIW: https://twitter.com/dai_shi/status/1468875799327817730