A useContext usage, is there a way to know what a parent component's id is?

[exrhizo]

TLDR:
I really like this pattern:

<ControlledField name="user_name" />

The ControlledField is a wrapper that sets value, onChange and error from a context, in my last project, we used react-hook-form with a custom context, where all the defaults get loaded in.

It seems like recoil hooks don't know where they are in the component tree, so I'd need to pass some shared key by piping it or use ReactContext.

I'm looking at react-recoil-form for inspiration, but my current sense is that it's nice if possible to roll your own fetching / form management, because then it can all be integrated nicely, of course this is harder, but if done well, can be simple and expressive.

[exrhizo]

Assuming I'm correct above, maybe a way to track all the fields is to use a prefix key?

react-recoil-form prefixes keys and then does a string match from useRecoilCallback and

const atoms = (snapshot as any).getNodes_UNSTABLE();
...
const matches = atom.key.match(/WitForm_FormFields__"(.*)"(?!__)/);
const name = matches?.length ? matches[1] : null;
if (name) {...}

Okay, so something like that? Is that inefficient? I want to be able to have my field default values come from get(someApiFilledAtom), that way when I submit, I get the new data and just fill it in upstream of the form values. Also support reset and change detection.

Something I don't understand is how recoil decides what to update.

I am thinking out loud, I appreciate all thoughts here!

I'm excited about recoil :)

[devarsh]

I've implemented a form library in recoil, it's not exactly ideal but ideal for my use case you can have a look at it, it does what you're asking for.

https://github.com/devarsh/Ratnafin/tree/master/src/packages/form

[drarmstr]

Snapshots can be inefficient, as they deal with all state, and atom family key mangling is always subject to change.

Trying to understand better what you are trying to accomplish. If you're trying to scope some atoms by part of the component tree, then common patterns include piping props or using React Context to provide parameters to atomFamiliies(). You shouldn't need to manually manipulate the keys.