Question: Nested recoil roots to force state reset

[finction]

Im building an app where a user selects a document and is taken into a wizard to modify it. I want to put some data related to the document into recoil state, but I had some trouble earlier related to resetting this data when changing to a different document and in some cases the two states of the two documents got mixed up. I was wondering if this would be a use case for having multiple recoil roots.

A dumbed down version of the root of my whole app:

<RecoilRoot> <App /> </RecoilRoot>

The App component could contain:

<Route path="/documents" component={DocumentSelector} /> <Route path="/:documentId/document-wizard" component={DocumentWizard} />

DocumentWizard could contain a nested recoil root:
<RecoilRoot> <ComponentsRelatedToDocumentWizard /> </RecoilRoot>

I could then use the selected document's id to initialise all recoil state related to that single document. Thus, when the user switches to another one, I could ensure that all state related to the previous document is wiped out. Does this make sense?
Is this an intended use case for multiple recoil roots or will I run into problems?

[kelvinsekx]

Well for me I still don't see it as enough reason for a nested RecoilRoot. Having another one could resolve but it can be elegantly done without it. You might want to check into useResetRecoilState hook, https://recoiljs.org/docs/api-reference/core/useResetRecoilState/, to see how to reset states more elegantly.

If you could share a codesandbox or something to show a minimal replica of what you intended could help us even more.

[drarmstr]

Yes, if you want completely independent state for each document then it might be reasonable to use different <RecoilRoot>'s. You may want to provide a key prop so they are fully unmounted/remounted with fresh state. However, note that selector caches apply across multiple roots as they have a contract their values should be "idempotent," that is they should always provide a consistent value given a set of input parameters/dependencies. With remote queries or if the document ID is not formally part of the selector dependencies that may not apply and you may wish to flush those caches. You could use this pattern or the new useRecoilRefresher_UNSTABLE() hook (#1294, #1302) (currently in nightly, but not yet a released version)