What would be neat approach update atoms on component mount except using useEffect?

[dante01yoon]

Hi, I'm not a big fan of useEffect, so I'm looking for another approach update atoms on component mount.

There is need to save refs in atom.
when update atoms has ref information of HTMLElement, It should be updated when all useRefs are filled with HTMlElement infos.

what would be best approach with Jotai?

[dai-shi]

I'm not a big fan of useEffect

Me, neither.

There is need to save refs in atom.

But, in this case, useEffect or callback ref will be necessary.

what would be best approach with Jotai?

This is a tough one..
Jotai atoms are independent from DOM or even React.

Hm, I think your atom and an HTML element is one-to-one relationship? In that case, we could use traditional style? i.e. getElementById. I'm not saying it's best. Just exploring. Or, maybe atom has an id.

[dante01yoon]

Thank you,
one of reason I avoid useEffect is it makes hard to read when component get bigger.

using this approach seems better.

one quick question. react doc says react hook shouldn't be assigned nested function,
I know It's not problem in your example, however I guess it would give confusion react beginners using react with external store library. what you think?

[dai-shi]

I guess it would give confusion react beginners using react with external store library.

Can you elaborate?

[dante01yoon]

useEffect(() => {
  useMemo
})

useState(() => {
 ...
  useMemo
})

the way declare hooks in nested function like above would cause run time error in react application.

however, in Jotai library, I see it's pretty normal use hooks in another Jotai hook in some cases.
I think this would give confusion react developers who newly adopt external store libraries in their app.

[dai-shi]

Yeah, it's short for two statements.
Maybe we would separate it to avoid confusion.

const htmlRefAtom = atom(null)

const Component = () => {
  const ref = useRef()
  const mountingAtom = useMemo(() => {
    const a = atom(
      (get) => get(htmlRefAtom),
      (get, set, arg) => set(htmlRefAtom, arg)
    )
    a.onMount = (set) => {
      set(ref.current)
    }
    return a
  }, [])
  useAtom(mountingAtom)
  return (
    <div ref={ref}>Hello</div>
  )
}

[dante01yoon]

thank you!