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

[Oussama Bouthouri]

Summary

Hello and thank you for the amazing work you are doing!
I am working on a RN project:

 "dependencies": {
    "@types/react": "~18.2.14",
    "expo": "~49.0.13",
    "immer": "^10.0.3",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "typescript": "^5.1.3",
    "zustand": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }

I have an issue with state initialisation when working with an array of objects.

If I initialise the array directly in the store the app keeps hanging in the splash screen and I don't get any error message.
This is a minimal code

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

export interface TaskModel 

interface TasksState {
  tasks: {
    id: string;
    name: string;
    energy: number;
    done: boolean;
    active: boolean;
  }[];
}

export const useTaskStore = create(
    immer<TasksState>(() => ({
      tasks: [
          {
            id: "0",
            name: "Hi",
            energy: 10,
            active: true,
            done: false,
          },
          {
            id: "1",
            name: "Hello",
            energy: 10,
            active: true,
            done: false,
          },
      ],
    }))
);

Usage in the page:

  const {tasks} = useTaskStore();

 <FlatList
      data={tasks}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
    />

What I have tried?

I tried initializing the store when the first page is mounted and it's partially working as I can see the list but It creates another issue and the expo icons are not displayed anymore.
I feel like I am causing a crush somewhere but I am unable to get the logs!

I have tried working with Map and it's exactly the same behaviour.
I tried without immer but it's not the issue.

Do you know what can be the issue? I don't even have a clue what can cause this!
Thank you again for this amazing tool!

Link to reproduction

It's a big app and a link to production would be hard to provide, sorry for that!

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[Danilo Britto]

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

[Oussama 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();
}, []);

[Danilo Britto]

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/

[Oussama Bouthouri]

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