I have potentially tens to thousands of Tasks that I’m rendering in Rows, with fields that are always open for editing. The Row isn’t super important, just that there are multiple fields with onChange to update the value passed to them.

Below is a small reproduction of my code.

Here’s my zustand store:

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { Task } from "./types";

interface WorkspaceState {
  tasks: Record<string, Task>;
  setTasks: (tasks: Record<string, Task>) => void;
  updateTask: (task: Task) => void;
  updateTaskOnChange: <K extends keyof Task>(
    taskId: number,
    key: K,
    value: Task[K]
  ) => void;

  resetAll: VoidFunction;
}

const initialState = {
  tasks: {},
};

export const useWorkspaceState = create<WorkspaceState>()(
  immer((set) => ({
    ...initialState,
    setTasks: (tasks) => set({ tasks }),
    updateTask: (updatedTask) => {
      set((state) => {
        state.tasks[updatedTask.id] = updatedTask;
      });
    },
    updateTaskOnChange: (taskId, key, value) => {
      set((state) => {
        const task = state.tasks[taskId];
        if (task) {
          task[key] = value;
        }
      });
    },
    resetAll: () => {
      set(() => initialState);
    },
  }))
);

Unfortunately, when I update it is extremely slow.

Is there a better way to do this? I want to allow user to inline edit and it should feel fast. Right now it is basically unusable. I’m sure I must be doing something wrong.

Here is the working code – https://codesandbox.io/p/sandbox/59hhsk