The app hanging when initializing the store with and array of objects. about zustand

[dbritto-dev]

initialiseTasks: () =>
  set((state) => {
    state.tasks = [
      {
        id: "0",
        name: "Hi",
        energy: 10,
        active: true,
        done: false,
      },
      {
        id: "1",
        name: "Hello",
        energy: 10,
        active: true,
        done: false,
      },
    ];
  });

I create this function inside the store and I call it in the _layout.tsx file.

const { initialiseTasks } = useTaskStore();

useEffect(() => {
  initialiseTasks();
}, []);

Some improvements that you can implement:

• Move the init outside of _layout.tsx, that's not the right place to do that
• Use set(() => { ... }, true) for initialization
• Use FlashList instead of FlatList -> https://shopify.github.io/flash-list/

[dbritto-dev]

@bouthouri would you mind sharing us how you are updating the array?

[bouthouri]

initialiseTasks: () =>
  set((state) => {
    state.tasks = [
      {
        id: "0",
        name: "Hi",
        energy: 10,
        active: true,
        done: false,
      },
      {
        id: "1",
        name: "Hello",
        energy: 10,
        active: true,
        done: false,
      },
    ];
  });

I create this function inside the store and I call it in the _layout.tsx file.

const { initialiseTasks } = useTaskStore();

useEffect(() => {
  initialiseTasks();
}, []);

[bouthouri]

The FlashList fixed everything.
Thanks a lot I really appreciate it 🙏