Cannot delete atomFamily values

[HonzaKirchner]

Hey, first of all, thank you for an amazing library!

I am trying to connect jotai with formik to get some performance boost. The idea is to have atomFamily for all the forms
creating formik bag for each of them, propagating it to atom, from where some select-atoms would be derived for fields, actions etc.

Problem is that when navigating from some page with form and then back, formik bag needs to be recreated in order to avoid can't perform react state update on unmounted error. I was hoping to achieve such behavior with Provider, but there seems to be some issue.

Here is working example - I would expect that after reloading the page old atom value will be deleted and then recreated.

I also tried to use atomFamily.remove when unmounting the components. There are some inconsistencies though - because it 'works' only after clicking the reload button multiple times.

I would really appreciate help.

[dai-shi]

I don't have time to look into details, but this sounds something challenging. We should come up with good practice. Meanwhile cc'ing @barelyhuman who works on jotai-form.

[barelyhuman]

I'll ping with a working version soon :)

[dai-shi]

https://codesandbox.io/s/jotai-playground-forked-2u8v2h?file=/src/App.tsx

It looks like working as expected. (I removed formAtomFamily.remove({ formId: "LOGIN" });)
@HonzaKirchner How can I reproduce the can't perform react state update on unmounted error?

[barelyhuman]

I'm assumings it's about the react warning that throws up when a state update is left in the queue, for that, I'd recommend managing a mounted ref in the component and use that for the atom updates instead.

It's not something that the library can do internally since it would add undefined behaviours for when working with shared atoms.
@HonzaKirchner

You can in a way ignore the error if the form state isn't being shared

[HonzaKirchner]

Thank you for suggestions @dai-shi @barelyhuman
I did some studying to understand better what's going on...
It's quite handy to use atomFamily because it easily allows me to init atom with some value right away. Problem is that this initial value (config) is persisted even if Provider unmounts. I guess it's expected, but for my use case I would really need to completely recreate the atom.

So I guess two ways to achieve this would be:

1. First init atom with only formId and update it with formikBag later on (then if provider unmounts, the critical part of atom I need to get rid of will be discarded)
2. Utilize shouldRemove function and delete all the links to the old atom, so new one is created when needed

As I said, I like the easy initialization so I'd rather proceed with the second variant for which I updated the example
I would expect that after clicking on 'Reload' button, there will be 'FORM CREATED ' message in console log and new age generated.
Then I would expect this age will increase when clicking on the second button. But it all behaves quite randomly.

[dai-shi]

Problem is that this initial value (config) is persisted even if Provider unmounts.

I don't think atomFamily is the right tool for this case. The atom config exists globally. Only atom values exist under Provider.

[barelyhuman]

Also, It'll be easier for you to just create multiple atoms and use the same logic jotai-form uses right now but instead the methods could invoke formik instead of the externally provided functions.
Obvioulsy a little more verbose but I think I could create an example for this as compared to the above