Persisting values on change and restore on refreshing the page

[karfau]

Hey there, I have a requirement to make sure the user input is not lost on navigating away from the form or when refreshing the page.

I wonder how to best achieve this using formik without tears.
We already have a mechanism for making the persistence as simple as possible and subscribing to updates of the persisted values using hooks, so it feels strange to duplicate the hole state in formiks values.

what would be a nice way to pass everything in as initialValues and initialErrors and on every change (maybe depending on the validation) write the changed values to our storage?

Or do you have another idea how to handle such a scenario in a consistent way?

I already found out about https://github.com/jaredpalmer/formik-persist and https://www.lightpohl.me/p/persist-formik-state-on-refresh-with-react-hooks but the issue is that our mechanism for storing the values and subscribing to them is actually not only used in that form, so the data we need to store is more then just the things currently visible in the form...
of course one way would be to build something similar for the values we need to persist.
But I just wnated to ask if somebody has yet another idea.

[karfau]

Tried it with the approach which makes more and more sense the longer you think about it.

Regading our possibility to subscribe to the updates of the stored values which we use heavily in our code base, we just don't need it when using Formik, so it boils down to only using our "persistence layer for reading (to create initialValues) and writing (in a component that has one or multiple useEffects) the values.