`useAtomCallback` creates a lot of atoms, resulting in performance issues

useAtomCallback dynamically creates an atom whenever it is called, once per call site. Because of that, code with a number of components, where each component uses just a couple of callbacks, can result in a very large number of atoms being created. This appears to have a serious impact on performance.

I made a recording where I show the extent of the problem (sorry for crappy quality, I had to compress it because it was too big for Github). I also have a link to the Codesandbox I used.

https://codesandbox.io/s/demonstration-of-useatomcallback-performance-issues-29qtj?file=/src/App.tsx.

https://user-images.githubusercontent.com/10849003/128598500-a75f8984-a1f9-4da0-8f6b-5e7dd4207c84.mov

[papermana]

@dai-shi I will try to investigate the cause of the slowness, but can’t make any specific promises right now, because I’m fairly busy with stuff. 🙁 Thank you for your work on this library, it’s very nice.

[Thisen]

Not sure I see the issue tbh - It’s correct that useAtomCallback comes with a cost, because it’s additional code. It’s a way to interact with atoms imperatively.

@papermana, Can you just not use it or lift the state up, so you have the useAtomCallback in the parent component?