Best practice to convert Recoil atomFamilies and selectorFamilies to atoms

[erictompkins]

We are currently converting our form state from Recoil to Zedux. Our app has a lot of forms so we use the selectorFamily and atomFamily functionality from Recoil to keep the state within a form isolated from other forms.

We use React context on our form to hold a unique identifier string for the form called stateId.

Here is a really simple example of our Recoil code: (not our real code, but a simple example to for this discussion)

/**
 * Atom family to store form field values
 */
export const formFieldValuesAtom = atomFamily<FieldValues, string>({
    key: 'formFieldValuesAtomState',
    default: {},
});


const ComponentInForm = () => {
    // Get the form context
    const form = useContext(FormContext);

    const [fieldValues, setFieldValues] = useRecoilState(formFieldValuesAtom(form?.stateId ?? ''));
}

As you can see in our atomFamily we're not actually using the form state id value. It's just there to organize the state under a form.

We started to set up this code with Zedux:

export const formFieldValuesAtom = atom('formButtonClickedAtom', (formId: string) => {
    const store = injectStore({});

    return store;
});

const ComponentInForm = () => {
    // Get the form context
    const form = useContext(FormContext);

    const [fieldValues, setFieldValues] = useAtomState(formFieldValuesAtom, [form?.stateId ?? '']);
}

That technically seems to work. However, I'm not sure if it's best-practice.

What is the best way to emulate the atomFamily of Recoil in Zedux when the family key isn't used in the atom?

eslint is rightly complaining about the unused formId value for the atom.

(I saw the example on https://omnistac.github.io/zedux/docs/about/recoil-comparison but it didn't match our use case.)

Thank you for any guidance.

[bowheart]

Atom params are indeed the Zedux equivalent of Recoil's atomFamily (and selectorFamily too, really, since all Zedux atoms can also be "selectors" by injecting any other atom).

There are a few approaches

Underscore-Prefix

We do exactly what you have in some places. We have the no-unused-vars eslint rule configured with "argsIgnorePattern": "^_" which makes eslint ignore underscore-prefixed vars

export const formAtom = atom('form', (_formId: string) => ...);

Use the Param

If you don't want that eslint rule, one thing I do in some side projects is export the id parameter:

export const formAtom = atom('form', (formId: string) => {
  const store = injectStore({});

  return api(store).setExports({ formId })
});

This can actually be nice for debugging.

Atom Factories

If you really want to be rid of the extra parameter, you can use an atom factory to create atom templates with the formId as part of the atom key string - that's all the param is doing anyway.

The factory would return a singleton atom that's instantiated once in the parent component and provided via normal React Context. Full example:

const formAtomFactory = (formId: string) =>
  atom(`form-${formId}`, () => {
    const store = injectStore({});

    return store;
  });

type FormAtomType = ReturnType<typeof formAtomFactory>;

const formAtomContext = createContext<AtomInstanceType<FormAtomType> | undefined>(undefined)

const useFormAtomContext = () => {
  const formAtomInstance = useContext(formAtomContext)

  if (!formAtomInstance) {
    throw new Error('Form atom was not provided')
  }

  return formAtomInstance
}

function ParentComponent() {
  const atomTemplate = useMemo(() => formAtomFactory('my-form-id'), [])
  const formAtomInstance = useAtomInstance(atomTemplate);

  return (
    <formAtomContext.Provider value={formAtomInstance}>
      <ChildComponent />
    </formAtomContext.Provider>
  )
}

function ChildComponent() {
  const formAtomInstance = useFormAtomContext()
  const [fieldValues, setFieldValues] = useAtomState(formAtomInstance)
  ...
}

[erictompkins]

Thank you @bowheart! The second option with the export is probably what we'll do.

One more question.

Our Form component wraps all the fields. When the Form is unmounted we were using the recoil useResetRecoilState to reset the state of all the atomFamilies and selectorFamilies related to that form (using the formId context value from my example above).

Do we need to do that type of cleanup with Zedux? Or does Zedux clean itself up well enough?

Our app has a lot of forms and each form will have a separate id, and therefore add to the state.

This is some simple code on how we did the cleanup before.

const FormComponent = () => {
    const resetFormState = useResetRecoilState(formAtom(props.stateId));
    const resetFieldInitialValues = useResetRecoilState(formFieldInitialValuesAtom(props.stateId));
    const resetFieldPersistentValues = useResetRecoilState(formFieldValuesPersistentAtom(props.stateId));
    const resetFieldValidations = useResetRecoilState(formFieldValidationAtom(props.stateId));
    const resetFieldValues = useResetRecoilState(formFieldValuesAtom(props.stateId));
    const resetFormLeaveAfterSubmit = useResetRecoilState(formLeaveAfterSubmitAtom(props.stateId));
    const resetRepeatingItemIds = useResetRecoilState(formRepeatingItemIdsAtom(props.stateId));
   
    // Reset form state when component unmounts
    useEffect(
        () => () => {
            resetFormState();
            resetFieldInitialValues();
            resetFieldValidations();
            resetFieldValues();
            resetFieldPersistentValues();
            resetFormLeaveAfterSubmit();
            resetRepeatingItemIds();
        },
        [
            resetFormState,
            resetFieldInitialValues,
            resetFieldValidations,
            resetFieldValues,
            resetFormLeaveAfterSubmit,
            resetRepeatingItemIds,
            resetFieldPersistentValues,
        ],
    );
}

[bowheart]

You definitely don't usually do that type of cleanup with Zedux. ttl usually handles "reset" on unmount.

const formAtom = atom(
  'form',
  () => { ... },
  { ttl: 0 }
)

This destroys the atom completely when it's no longer used. It'll be automatically recreated with its default initial state if consuming components mount again, essentially resetting it.

Depending on the case, a non-zero ttl might be preferable to keep the user's input around for a while. And ttl can even be a promise or observable when set via api().setTtl() giving full control.

I'd definitely recommend trying to use ttl. It's how Zedux is designed to work and, of course, streamlines a lot for you - you should be able to delete all your code there.

If you really need atoms to not be destroyed in the interim, the resets walkthrough has some other methods for resetting state.

[erictompkins]

Ok - that makes complete sense and simplifies our code. Thank you for that.

One more question if I may:

We have an instance where we need to batch some updates in a component. For various reasons, we need to have three states of a field value. We need to batch the updates so that they all get changed at the same time.

This is how we did it with Recoil.

const updateAllValuesTypes = useRecoilTransaction_UNSTABLE(
        ({ get, set }) =>
            (value: object) => {
                const initialValues = get(formFieldInitialValuesAtom(props.stateId));
                const fieldValues = get(formFieldValuesAtom(props.stateId));
                const persistentFieldValues = get(formFieldValuesPersistentAtom(props.stateId));

                set(formFieldInitialValuesAtom(props.stateId), { ...initialValues, ...value });
                set(formFieldValuesAtom(props.stateId), { ...fieldValues, ...value });
                set(formFieldValuesPersistentAtom(props.stateId), { ...persistentFieldValues, ...value });
            },
        [props.stateId],
    );

updateAllValuesTypes(newValues);

I know with Zedux we can use ecosystem.batch(), but where we need a callable I was thinking that an ion may be the solution.

/**
 * Update the initial, field, and persistent values at the same time.
 *
 * This is done to reduce rerendering of the component by changing the state three times.
 *
 * Previously only the initial value was set. This meant that when the field was rendered that the value state
 * always had to be updated. This caused an additional render of the field component.
 */
export const updateAllValueTypes = ion('updateAllValueTypes', ({}, formId: string, fieldValues: FieldValues) => {
    const initialValuesInstance = injectAtomInstance(formFieldInitialValuesAtom, [formId]);
    const valuesInstance = injectAtomInstance(formFieldValuesAtom, [formId]);
    const persistantValuesInstance = injectAtomInstance(formFieldValuesPersistentAtom, [formId]);

    // injectCallback for batching ?
    const updateAll = injectCallback(() => {
        // Update the initial values
        initialValuesInstance.setState((state) => ({...state, ...fieldValues,}));
        valuesInstance.setState((state) => ({...state, ...fieldValues})
        persistantValuesInstance.setState((state) => ({...state, ...fieldValues})
    }, [fieldValues]);

    updateAll();
});

It seems a bit odd to do it this way though, so I'm not sure that this is right. I was thinking that it would be best to have this batch done within an atom or ion instance. What do you recommend?

[bowheart]

You can use an atom/ion for this, but I wouldn't pass it arguments via atom params. You can make that callback itself the state of the atom and pass the callback arguments directly:

export const updateAllValueTypes = ion('updateAllValueTypes', ({ getInstance }, formId: string) => {
    const initialValuesInstance = getInstance(formFieldInitialValuesAtom, [formId]);
    const valuesInstance = getInstance(formFieldValuesAtom, [formId]);
    const persistantValuesInstance = getInstance(formFieldValuesPersistentAtom, [formId]);

    // injectCallback for batching
    const updateAll = injectCallback((fieldValues: FieldValues) => {
        // Update the initial values
        initialValuesInstance.setState((state) => ({...state, ...fieldValues,}));
        valuesInstance.setState((state) => ({...state, ...fieldValues})
        persistantValuesInstance.setState((state) => ({...state, ...fieldValues})
    }, [initialValuesInstance, valuesInstance, persistantValuesInstance]);

    return updateAll; // this function reference _is_ the atom's state
}, { ttl: 0 });

// then in a component:
const updateAll = useAtomValue(updateAllValueTypes, [formId]);
...
updateAll(fieldValues);

We do something similar - we have a concept of "controller atoms" that have no own state and simply export some callback functions

const formControllerAtom = ion('formController', ({ getInstance }, formId: string) => {
    const initialValuesInstance = getInstance(formFieldInitialValuesAtom, [formId]);
    const valuesInstance = getInstance(formFieldValuesAtom, [formId]);
    const persistantValuesInstance = getInstance(formFieldValuesPersistentAtom, [formId]);

    // injectCallback for batching
    const updateAllValueTypes = injectCallback((fieldValues: FieldValues) => {
        // Update the initial values
        initialValuesInstance.setState((state) => ({...state, ...fieldValues,}));
        valuesInstance.setState((state) => ({...state, ...fieldValues})
        persistantValuesInstance.setState((state) => ({...state, ...fieldValues})
    }, [initialValuesInstance, valuesInstance, persistantValuesInstance]);

    return api().setExports({ updateAllValueTypes })
}, { ttl: 0 })

// then in a component:
const { updateAllValueTypes } = useAtomInstance(formControllerAtom, [formId]).exports;

If you do only want a single callback, I'd use an atom selector - it's simpler and has ttl: 0 by default

export const updateAllValueTypes = ({ ecosystem, getInstance }: AtomGetters, formId: string) => {
    const initialValuesInstance = getInstance(formFieldInitialValuesAtom, [formId]);
    const valuesInstance = getInstance(formFieldValuesAtom, [formId]);
    const persistantValuesInstance = getInstance(formFieldValuesPersistentAtom, [formId]);

    return (fieldValues: FieldValues) => ecosystem.batch(() => {
        // Update the initial values
        initialValuesInstance.setState((state) => ({...state, ...fieldValues,}));
        valuesInstance.setState((state) => ({...state, ...fieldValues})
        persistantValuesInstance.setState((state) => ({...state, ...fieldValues})
    });
};

// then in a component:
const updateAll = useAtomSelector(updateAllValueTypes, [formId]);
...
updateAll(fieldValues);