Deriving state from fetched data

[theodoretliu]

Hi! I was wondering what the best practices were for augmenting the data returned from useSWR with state. As a toy example, suppose I use useSWR to fetch a user's todos from an API endpoint. But on the client, the user should be able to "check" those todos to mark them for exporting to CSV or similar. The "check" operation should be stored as client state and ideally would "augment" the fetched data in a way. Is there a proper way to do this? As an incomplete example, see below

function TodoList() {
  const [todos, setTodos] = useState([]);
  const { data } = useSWR("/getTodos", fetcher);

  if (data === undefined) {
    return <div>Loading</div>;
  }

  // this will run on every render which seems wrong
  for (let todo of data.todos) {
    // append a todo to the local state along with "check"
    setTodos([...todos, { checked: false, ...todo }]);
  }

  return (
    <div>
      {todos.map((todo) => (
        <div
          onClick={() => {
            todo.checked = !todo.checked; // I know this doesn't work but you get the point
          }}
        >
          {todo.checked && "I'm checked"}
        </div>
      ))}
    </div>
  );
}

[shuding]

You can put this inside a useEffect:

useEffect(() => {
  // this will run on every render which seems wrong
  for (let todo of data.todos) {
    // append a todo to the local state along with "check"
    setTodos([...todos, { checked: false, ...todo }]);
  }
}, [data])

---

Although I don't think you should maintain your local state. SWR is your state. I'd implement it this way:

function TodoList() {
  const { data, mutate } = useSWR("/getTodos", fetcher);

  if (data === undefined) {
    return <div>Loading</div>;
  }

  const todos = data.todos;

  return (
    <div>
      {todos.map((todo, index) => (
        <div
          onClick={() => {
            const updatedTodo = {...todo, checked: !todo.checked};
            const updatedTodos = [...todos];
            updatedTodos[index] = updatedTodo;
            mutate(updatedTodos, false);
          }}
        >
          {todo.checked && "I'm checked"}
        </div>
      ))}
    </div>
  );
}

[theodoretliu]

What if the API response does not include a "checked" field? Or can we just attach that in the fetcher function?

[shuding]

Or can we just attach that in the fetcher function?

Yeah that's a good choice if you want to manipulate the data right after it arrives.