DEV Community

Cover image for How to Use Jotai and useTransition for Mutation
Daishi Kato
Daishi Kato

Posted on • Originally published at blog.axlight.com

How to Use Jotai and useTransition for Mutation

The power of promise values

Introduction

Jotai is a powerful library designed for seamless integration with React Suspense. Unlike Zustand, Jotai's primary focus is React Suspense from the beginning.

In its simplest form, Jotai effortlessly works with Suspense, and gives superior developer experience and user experience with async data.

https://codesandbox.io/s/vjfpcd

import { Suspense } from "react";
import { atom, useAtomValue, useSetAtom } from "jotai";

const id = 1;

const postAtom = atom(async (get) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
});

const Post = () => {
  const { title } = useAtomValue(postAtom);
  return <div>Title: {title}</div>;
};

const App = () => (
  <Suspense fallback="Loading...">
    <div>
      <Post />
    </div>
  </Suspense>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

There are no issues so far.

This blog post explores Jotai's strength in handling mutations using promise values in atoms and useTransition. Let's learn how to leverage React Suspense with Jotai to handle async data.

The problem

Now, if we want to mutate the server data, our first option would be a derived atom with an async write function. For simplicity, let's use a write-only atom.

https://codesandbox.io/s/z84n9x

import { Suspense, useTransition } from "react";
import { atom, useAtomValue, useSetAtom } from "jotai";

const id = 1;

const mutationResultAtom = atom<{ title: string } | null>(null);

const postAtom = atom(async (get) => {
  const mutationResult = get(mutationResultAtom);
  if (mutationResult) {
    return mutationResult;
  }
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
});

const mutateAtom = atom(null, async (get, set, title) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title })
  });
  const data = await res.json();
  set(mutationResultAtom, data);
});

const Post = () => {
  const { title } = useAtomValue(postAtom);
  return <div>Title: {title}</div>;
};

const Mutate = () => {
  const mutate = useSetAtom(mutateAtom);
  const handleClick = () => {
    mutate("changed title");
  };
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

const App = () => (
  <Suspense fallback="Loading...">
    <div>
      <Post />
      <Mutate />
    </div>
  </Suspense>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Currently, it doesn't suspend during mutation, which causes it to not work well with useTransition.

What we would like to do is the following:

  const [isPending, startTransition] = useTransition();
  const handleClick = () => {
    startTransition(() => {
      mutate("changed title");
    });
  };
Enter fullscreen mode Exit fullscreen mode

However, it's a NO-OP because we resolve a promise before updating the post atom. We need to avoid resolving a promise in the write function, and resolve the promise in the read function to make an atom to suspend.

The solution

We want to tell React to suspend on mutation. How can we achieve that?

The solution is to store a promise value in an atom, and resolve it in the read function.

Let's see what it looks like.

https://codesandbox.io/s/fkjvrg

import { Suspense, useTransition } from "react";
import { atom, useAtomValue, useSetAtom } from "jotai";

const id = 1;

const mutationResultAtom = atom<Promise<{ title: string }> | null>(null);

const postAtom = atom(async (get) => {
  const mutationResult = await get(mutationResultAtom);
  if (mutationResult) {
    return mutationResult;
  }
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
});

const mutateAtom = atom(null, (get, set, title) => {
  const data = fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title })
  }).then((res) => res.json());
  set(mutationResultAtom, data);
});

const Post = () => {
  const { title } = useAtomValue(postAtom);
  return <div>Title: {title}</div>;
};

const Mutate = () => {
  const mutate = useSetAtom(mutateAtom);
  const [isPending, startTransition] = useTransition();
  const handleClick = () => {
    startTransition(() => {
      mutate("changed title");
    });
  };
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {isPending && "Pending..."}
    </div>
  );
};

const App = () => (
  <Suspense fallback="Loading...">
    <div>
      <Post />
      <Mutate />
    </div>
  </Suspense>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Now, it works with useTransition, and it shows "Pending..." while performing mutations.

This pattern also works well when a mutation doesn't return updated data. In such cases, we can discard the mutation result and fetch the data again.

A more complex case

In many cases, an async atom depends on another atom. In our example, let's assume the id is in an atom idAtom.

We need a small trick, but this is how it works.

https://codesandbox.io/s/jpfqwy

import { Suspense, useTransition } from "react";
import { atom, useAtomValue, useSetAtom } from "jotai";

const idAtom = atom(1);

const mutationResultAtom = atom<{
  id: number;
  data: Promise<{ title: string }>;
} | null>(null);

const postAtom = atom(async (get) => {
  const id = get(idAtom);
  const mutationResult = get(mutationResultAtom);
  if (mutationResult && mutationResult.id === id) {
    return mutationResult.data;
  }
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
});

const mutateAtom = atom(null, (get, set, title) => {
  const id = get(idAtom);
  const data = fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title })
  }).then((res) => res.json());
  set(mutationResultAtom, { id, data });
});

const Post = () => {
  const { title } = useAtomValue(postAtom);
  return <div>Title: {title}</div>;
};

const Next = () => {
  const setId = useSetAtom(idAtom);
  const [isPending, startTransition] = useTransition();
  const handleClick = () => {
    startTransition(() => {
      setId((id) => id + 1);
    });
  };
  return (
    <div>
      <button onClick={handleClick}>Next Post</button>
      {isPending && "Pending..."}
    </div>
  );
};

const Mutate = () => {
  const mutate = useSetAtom(mutateAtom);
  const [isPending, startTransition] = useTransition();
  const handleClick = () => {
    startTransition(() => {
      mutate("changed title");
    });
  };
  return (
    <div>
      <button onClick={handleClick}>Change title</button>
      {isPending && "Pending..."}
    </div>
  );
};

const App = () => (
  <Suspense fallback="Loading...">
    <div>
      <Post />
      <Next />
      <Mutate />
    </div>
  </Suspense>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

The trick is to associate the mutation result with the corresponding id. This technique can be applied to handle more complex scenarios as well.

Closing notes

Jotai's seamless integration with useTransition also works for handling mutations. By leveraging promise values, we can develop better user experience, even with complex state models.

Hope you find it useful and discover the true power of Jotai.


Originally published at https://blog.axlight.com on July 27, 2023.

Top comments (0)