How to return useSnapshot for later use

[canyavall]

We have built a form library (like react hook form but with more features) using Valtio

It is working like a charm, but one challenge I faced was, how to be able to create a hook that would return useSnapshot for one specific field in the state

So, for a little more of context, we create one fieldState with Valtio inside a useRef in a provider, then parse it down, but I need to be able to consume it and return the useSNapshot for that field. We made it and it is working like a charm but, now that we ahve to write some tests, Jest complains that the hook is inside a function:

"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

Can you help me to find out how to deal with it? I tried using watch, subscribe, but I could not succeed, I guess I miss a better understanding overall

This is the code we have now

export const useYodaForm = ({
  createdFormState,
  createdFieldsState,
  createdGroupsState,
  createdStepsState,
  createdStepperState,
  debounceTime = 300,
}: UseYodaFormProps = {}) => {
  const context = useContext(YodaFormProviderContext);

  const formState = useConst(createdFormState || context.formState);
  const fieldsState = useConst(createdFieldsState || context.fieldsState);

.....

  const useWatchField = (fieldName: string) => useSnapshot(fieldsState, { sync: true })[fieldName] || defaultYodaField;
  const useWatchForm = () => useSnapshot(formState) || defaultYodaFormState;

return {
   useWatchField,
   useWatchForm 
}

With this code, any component can use useWatchField('fieldName') and will get updated without any problem.

[dai-shi]

You shouldn't create a hook in a hook. It can violate the rules of hooks.
Can you create two top level hooks? useYodaFormWatchField useYodaFormWatchForm or so.

[canyavall]

but how? I still need to use useSnapshot given a field name and return that state...

[dai-shi]

I don't know the entire structure, but you need to define a top-level hook:

const useYodaWatchField = ({
  createdFormState,
  createdFieldsState,
  createdGroupsState,
  createdStepsState,
  createdStepperState,
  debounceTime = 300,
  fieldName
}) => {
  const context = useContext(YodaFormProviderContext);
  const formState = useConst(createdFormState || context.formState);
  const fieldsState = useConst(createdFieldsState || context.fieldsState);
  return useSnapshot(fieldsState, { sync: true })[fieldName] || defaultYodaField;
};

[canyavall]

ok, then I'd need one specific hook for it outside of this one, I'll give it a try

[canyavall]

it is working but I have the problem on how it consumes the context... I can not use watch at the same level than the context... will keep investigating.

[canyavall]

what I don't get is that react is not complaining, is jest who complains, but not react itself... because anyway I'm returning the state