Как убрать бесконечный цикл Zustand?

Question

[Donny_Joy]

При вызове функции useToDoStore и присваивании, компонент App рендерится бесконечно. Так же при деструктуризации компонент App сразу начинает бесконечно рендериться.
Понял что дело в самом присваивании, так как если присваивать каждое свойство по отдельности, без массивов и объектов, то нормально.
к примеру так:

const tasks = useToDoStore((state) => state.tasks);
  const createTask = useToDoStore((state) => state.createTask);

Но это ведь не лучшее решении, store ведь может быть большой, что делать ?

Вот код store:

import { create } from "zustand";

import { generateId } from "../helpers";

interface Task {
  id: string;
  title: string;
  createdAd: number;
}

interface ToDoStore {
  tasks: Task[];
  createTask: (title: string) => void;
  updateTask: (id: string, title: string) => void;
  removeTask: (id: string) => void;
}

export const useToDoStore = create<ToDoStore>((set, get) => ({
  tasks: [
    {
      id: "asdasd",
      title: "kekeeee",
      createdAd: 124124,
    },
  ],
  createTask: (title) => {
    const { tasks } = get();
    const newTask = {
      id: generateId(),
      title,
      createdAd: Date.now(),
    };

    set({
      tasks: [newTask].concat(tasks),
    });
  },
  updateTask: (id, title) => {},
  removeTask: (id) => {},
}));

А вот так я пытаюсь его вызвать и он выдаёт у меня бесконечный рендер:

const [tasks, createTask, updateTask, removeTask] = useToDoStore((state) => [
    state.tasks,
    state.createTask,
    state.updateTask,
    state.removeTask,
  ]);

Answer 1

[Ekseft]

Попробуйте использовать useShallow, createWithEqualityFn (подробнее) или вторым аргументом в useToDoStore передать функцию shallow из import { shallow } from 'zustand/shallow'