[Proposal] context

[probeiuscorp]

Hey,

First off, I love this library. Jotai is easily a DX improvement on par with hooks. However, initializing atoms from the React tree is messy and difficult (#1113).

Why?

Currently the only way to initialize atoms on render is with a <Provider />. However, this has drawbacks:

• Can't be nested, so you can't use a <Provider /> at the top for global app context and then use another <Provider /> for a page's path param.
• Can only update via key, so multiple values and non-string values are difficult to work with.

Currently:

const userIdAtom = atom('');
const userDataAtom = atom(
    get => fetch(`/user/${get(userIdAtom)}`).then(res => res.json())
);

function UserPage() {
    const { id } = useParams();

    return (
        <Provider initialValues={[[userIdAtom, id]]} key={id}>

        </Provider>
    )
}

Proposal

Provide context() that returns a read only atom. Similar to React Context, it can then be mounted in the React tree.

With context():

const userIdAtom = context<string>();
const userDataAtom = atom(
    get => fetch(`/user/${get(userIdAtom)}`).then(res => res.json())
);

function UserPage() {
    const { id } = useParams();
    const UserID = useAtomContext(userIdAtom);

    return (
        <UserID value={id}>

        </UserID>
    );
}

Accessing the context atom outside of its descendants could throw.

Example

type Context = { id: string };
const appContextAtom = context<Context>();
function App({ context }) {
    const AppContext = useAtomContext(appContextAtom);

    return (
        <AppContext value={context}>
            <Routes>
                <Route path="/user/:id" element={<UserPage />} />
            </Routes>
        </AppContext>
    );
}

const userIdAtom = context<string>();
const userFriendsAtom = atom(
    get => fetch(`/user/${get(userIdAtom)}/friends`).then(res => res.json())
);
const userIsMyFriend = atom(
    get => {
        const me = get(appContextAtom).id:
        const userFriends = get(userFriendsAtom);
        return userFriends.includes(me);
    }
);

function UserPage() {
    const { id } = useParams();
    const UserID = useAtomContext(userIdAtom);

    return (
        <UserID value={id}>
            <UserRelationship />
        </UserID>
    )
}

function UserRelationship() {
    const userIsMyFriend = useAtomValue(userIsMyFriendAtom);
    return userIsMyFriend ? 'You are their friend' : 'You are not their friend';
}

Notes

• Using context as a name might be confusing, but it might also make its purpose clearer, especially considering that Jotai is easily a complete replacement for React Context.

• Some public interface ideas:

const genericContextAtom = context();
function App({ context }) {
    const GenericContext = useAtomContext();
    return <GenericContext value={context} />
}

const [genericContextAtom, GenericContext] = context();
function App({ context }) {
    return <GenericContext value={context} />
}

const genericContextAtom = context();
function App({ context }) {
    return <genericContextAtom.Provider value={context} />
}

[dai-shi]

Yes, we misguided the use of Provider for initializing atom values from props. That doesn't work well for typical cases.
useHydrateAtoms were to rescue, but it can only set values for uninitialized atoms, which doesn't cover all cases.

I think what you propose is covered by jotai-molecules. If so, what we should do is to write docs about it and recommend using it.

From the API surface, your proposal looks a little different though. I like the idea of making an atom contextual. Although, we can't implement the proposed api without breaking some of React rules. (Otherwise, we could have made useHydrateAtoms to update already initialized atoms.)

[probeiuscorp]

Jotai molecules seems to fit very well! Thank you again for this library ❤️