Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
7 replies
Jonathan.Alphonso

Unwanted Re-renders with Custom Hook in Next.js (T3)

Hello everyone,

I'm currently working on a Next.js project and I'm facing an issue with unwanted re-renders. I have a custom hook useStories that fetches stories from an API. This hook is used in my AllUserStories component.
You can see the page the component is rendered at:
https://ai-fight-pits.vercel.app/stories

Here's the code for the useStories hook:
https://github.com/JonathanAlphonso/ai-fight-pits/blob/main/src/hooks/useStories.ts

And here's the AllUserStories component:
https://github.com/JonathanAlphonso/ai-fight-pits/blob/main/src/pages/stories/index.tsx

The problem I'm facing is that the AllUserStories component is re-rendering multiple times, and the useStories hook is being called more times than I expect. I've tried using useMemo to memoize the return value of useStories, but it didn't solve the issue.

Here are the logs I'm getting when I added console logs to various files:
useStories hook called
AllUserStories rendered
Session data: undefined
Session status: loading
Stories: []
Is loading: true
AllUserStories rendered
Session data: undefined
Session status: loading
Stories: []
Is loading: true
useStories hook called
AllUserStories rendered
Session data: {user: {...}, expires: '2023-12-05T22:17:06.022Z'}
Session status: authenticated
Stories: []
Is loading: true
useStories hook called
AllUserStories rendered
Session data: {user: {...}, expires: '2023-12-05T22:17:06.022Z'}
Session status: authenticated
Stories: []
Is loading: true
useStories hook called
AllUserStories rendered
Session data: {user: {...}, expires: '2023-12-05T22:17:06.022Z'}
Session status: authenticated
Stories: (5) [{…}, {…}, {…}, {…}, {…}]
Is loading: false
useStories hook called


I'm not sure why the useStories hook is being called so many times and why the AllUserStories component is re-rendering so many times. Any help would be greatly appreciated!

Thank you in advance.
Was this page helpful?