Any drawback of using a custom hook for useAtom?

[ArthurGuez]

Hi,

I was wondering if there was any performance drawback of using a custom hook to encapsulate a call to useAtom?

Here's what the custom hook would look like:

export default function useInfo() {
  const [info, setInfo] = useAtom(infoAtom);

  return { info, setInfo };
}

Then some components would only read from the atom:
const { info } = useInfo();

While others would write to it:
const { setInfo } = useInfo();

Could that potentially mean that when a component only picks up info, others that exploit setInfo would be re-rendered because they share the same custom hook?
Or would it be the same (performance-wise) as using useAtomValue and useSetAtom?

[dai-shi]

Creating custom hooks is totally fine.

For the performance, using useSetAtom is better. const { setInfo } = useInfo() can cause extra rerenders.

[ArthurGuez]

Thank you for your reply.

So to preserve performance and avoid extra rerenders, would you advise me to something like that instead? :

export function useGetInfo() {
  return useAtomValue(infoAtom);
}

export function useSetInfo() {
  return useSetAtom(infoAtom);
}

[dai-shi]

Yeah.

[DavidJFelix]

We provided a facade so that our underlying atoms could change without impacting call sites, and we did this a lot. I also would provide useInfo that just did both and we'd try to only call the one we needed. This helped while we figured out what we wanted our atoms to do and allowed us to reorganize atoms and maintain callsites for awhile.