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:
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.
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:
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?
