Performance issues when resetting a modestly sized atomFamily

I have a atomFamily, wordState, that contains 250+ members on average. I keep track of the ‘ids’ in a separate atom, wordListState.

The user needs to be able to reset the members of wordState back to default. I implemented this using a useRecoilCallback which loops through the wordListState, resetting each atom individually.

Ideally, this would be an ‘instant’ operation, however it takes anywhere from 100ms-500ms+ to complete.

Basically, wordState contains each letter of a word. Each letter is an object with some meta information which determines how it is rendered. When the user wants to reset, we need wordListState to have a new list of words, and each atom in the wordState atomFamily to be reset.

You can find a minimal reproduction here, with the update time logged to the console.

This might not be the most efficient way to get the job done either, would be open to optimizations as well!

[drarmstr]

Yep I ran to a similar issue where an atom with 20 - 30 objects, was taking ~1 second when using await snapshot.getPromise(atom) found that instead using a set function to get the current value (set(atom, (current) => ....)) worked much better. Not sure if this has any stale data implications but in my case it wasn’t the end of the world if that was the case

Using an updater function with set in order to get the current value is actually the recommended way to ensure you are working with the latest value for the current React tree state. Looking at the snapshot with either getPromise() or getLoadable() (which should be a bit faster) will provide the currently committed React state when the callback was initiated.

[manyopensource]

@EricPKerr I checked and it’s really the reset calls that cause the issue!