Best practices for passing in dependencies

[thielium]

Hello!

We're evaluating recoil and are excited about it's async handling!

However, like many projects, we need to pass in an object encapsulating our API.

Because there is no built in mechanism for passing in dependencies, the only way I see to do it is to close over the atoms when they are instantiated.

The pattern I have landed on looks like this:

import { useMemo } from "react";
import type { Api } from "./path/to/api";
import { atom, selector } from "recoil";

export function useCreateApplicationAtoms(api: Api) {
  return useMemo(() => {
    const atom1 = atom<string[]>({
      key: `app.namespace.atom1`,
      default: api.getInitialValue(), // This is a promise
    });

    const selector1 = selector<string[]>({
      key: `app.namespace.selector1`,
      get: ({ get }) => get(atom1),
      set: async ({ set }, newValue) => {
        await api.logEventWithValue(newValue);
        set(atom1, newValue);
      },
    });

    return { atom1, selector1 };
  }, [api]);
}

Is there a better way to do this? Are there dragons to look out for 🐉 ?

Thanks.

[thielium]

Alternative:

export function createAtoms(api:Api) {
    const atom1 = atom<string[]>({
      key: `app.namespace.atom1`,
      default: api.getInitialValue(), // This is a promise
    });

    const selector1 = selector<string[]>({
      key: `app.namespace.selector1`,
      get: ({ get }) => get(atom1),
      set: async ({ set }, newValue) => {
        await api.logEventWithValue(newValue);
        set(atom1, newValue);
      },
    });

    return { atom1, selector1 };
}

[drarmstr]

While useCreateApplicationAtoms() does use useMemo() to memoize the atom/selector creation it is worthwhile to note that technically React documents this API as an optimization and it may choose to not memoize in some cases. I don't believe it currently does that, but they do reserve that option in the future. Not memoizing means you may produce redundant atoms and cause a bug. More immediately, the useMemo() will only memoize across a single component instance. So, if you try using this hook across multiple components or component instances then it will also attempt to create redundant atoms. You may want a more formal singleton pattern for all calls that does not rely on useMemo() memoization.