Theo's Typesafe Cult•14mo ago

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

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.

4 Replies

Josh•14mo ago

Is this in development? If so it's probably react strict mode

Josh•14mo ago

https://react.dev/reference/react/StrictMode

– React

The library for web and native user interfaces

Josh•14mo ago

Nextjs automatically uses strict mode

Jonathan.AlphonsoOP•14mo ago

I don't think its strict mode. The app on vercel has the same issue, you can see double requests in the network tab. I tested it locally and disabled strict mode and still have issues. It might be that I have a lot of state updates. I have the user session that loads and the API that fetches stories. I think its updating after these bits of data are loaded.... still working on it I had to revert a few commits, where it was working a bit better. The initial loading spinner is causing an additional fetch. trying to figure out why Fixed it. The useStories hook was being loading on the page, and on an imported component. Also a bunch of state duplication, I lifted up state to the page level and passed it down through props. Also my hook didn't account for pages when pulling allStories.... lots of sloppy code, and lots of learning. Its all good now.

Gaming

Programming

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