Infinite Rerender with Custom Hook

[fazlulShanto]

I used rematch.js before in a pattern where i created 2/3 models. if i need states/actions from multiple model i usually create a new custom hook for that particular feature and share them from that single custom hook.

i have tried same pattern with zustand but my component keeps calling the action i used inside a useEffect hook. it's a simple todo app which calls the fetch todo data action on initial render and then update the state.
CodeSandbox url : https://codesandbox.io/p/devbox/clever-neumann-24ndct

Here what i was doing?

• useTodo is the custom hook where i have imported all the things i need from zustand store & exported them. i might need data from multiple zustand store.
• useTodo custom hook also have a useEffect which calls the fetchUserTodoList only one time and the fetchUserTodoList action fetch the data and update the zustand store state .

i don't understand why i the useEffect keeps running infinitely here.
How can i fix this?

Thanks in advance.

[dbritto-dev]

@fazlulShanto would you mind creating a minimal repro on stackblitz?

[fazlulShanto]

@dbritto-dev there u go: https://stackblitz.com/edit/vitejs-vite-bnuvlf?file=src%2FApp.tsx

check the network calls 🙏

[dbritto-dev]

const useTodo = () => {
  const todo: ITodo[] = useStore((state) => state.todo);
  const { appendTodo, removeTodo, updateTodo, updateTodoList, fetchUserTodoList } = useStore();
  // and states from  other store i need and share all of them from a single hook

  useEffect(()=>{
    fetchUserTodoList()
  })

  return { todo, appendTodo, removeTodo, updateTodo, updateTodoList, fetchUserTodoList };
}

I believe this

useEffect(()=>{
  fetchUserTodoList()
})

should be this

useEffect(()=>{
  fetchUserTodoList()
}, [])

[fazlulShanto]

thanks, can't believe i wasted much time & couldn't figure it out. Thanks again.
so there is no problem with such style ,right?

[dbritto-dev]

@fazlulShanto shouldn't be a problem but we usually keep useEffects outside of the hook store. Keep in mind if you call useTodo n times then you have n requests/calls so if you useEffect only when you need, you can control that