Optimizing loader when refetching data after an action | Remix | Page 1

Hello,

I've got a route in which I display todo items and the ability to create a todo that's assigned to a user.

I've included a contrived example below.

My question: when I successfully create the todo item, how do I prevent re-fetching users, which haven't changed as part of the form submission?

I leaning to think there's no way to prevent refetching users with the current setup -- I should just cache users in myApi (which maybe I should be doing anyway).

Thanks for the responses!

// routes/todos.tsx

export const loader = async () => {
  const users = await myApi.fetchUsers(); // only need to fetch this once
  const todos = await myApi.fetchTodos();
  
  return json({
    users,
    todos
  });
}

export const action = async ({ request }) => {
  const formData = await request.formData();

  const res = await myApi.createTodo({
    text: formData.get('text'),
    userId: formData.get('userId'),
  });

  if (res.status !== 201) {
    return { success: false }
  }

  return { success: true }
}

export default Component() {
  const { todos, users } = useLoaderData();
  return (
    <div>
      <TodosList todos={todos} />
      
      <Form action="/todos">
        <input name="text" type="text" />
        <select name="userId">
          {users.map(user) => (
            <option key={user.id} value={user.id}>{user.name}</option>
          )}
        </select>
        <button type="submit">Submit</button>
      </Form>
    </div>
  )
}

Bonus question: What would I do if I wanted a combobox-like component for selecting a user -- if I have > 100 users, I'd want to take in an input query, search/filter for the users based on that query, then display those filtered users as options in my combobox. It doesn't seem like Remix can handle that situation unless the combobox makes client-side requests, right?

#Optimizing loader when refetching data after an action