#Too many re render to the component

1 messages · Page 1 of 1 (latest)

clear nimbus
#

Hello everyone, So i have a component that mean to show the categories in the system

"use client"

import { RootState } from "@/stores/store";
import { useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { selectFeaturedCategories } from "@/stores/selectors/categorySelector";

export  function CategoryCarousel() {
    let categoriesList = useSelector(selectFeaturedCategories);    
    let [activeCategory, setActiveCategory] = useState<string | null>(null);

    useEffect(() => {
        if (!categoriesList.length) return;
        setActiveCategory(categoriesList[0].value);
    }, [categoriesList.length])

    return (
        <>
            <div className="my-container overflow-hidden">
                <div className="flex items-center">
                    <h2 className="section-title">Featured Categories {activeCategory}  </h2>
                    <ul className="flex mx-[29.8] gap-[27px] justify-center h-full">
                        {   
                            categoriesList.map((category) => (
                                <li className={`text-[16px] leading-[16px] font-[600] cursor-pointer ${category.value == activeCategory ? "text-primary-green" : ""}`} key={category.label} onClick={() => setActiveCategory(category.value)}>{ category.label }</li>
                            ))
                        }
                    </ul>
                </div>
                <div className="carousel-category mb-20 flex gap-[25px] overflow-auto">
                    
                </div>
            </div>
        </>
    );
}

my main issue here that this component is rendered many time at the first load as when i added console.log i found that it repeated several times i am still learning nextjs,react so i maybe missing something

image.png
near flaxBOT
#

Hi @clear nimbus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your observation about the CategoryCarousel component rendering multiple times on first load is a common experience in Next.js and React development, especially in development mode.

Why does this happen?

  1. React Strict Mode (Development Only):

    • In development, Next.js enables React Strict Mode by default. This intentionally double-invokes certain lifecycle methods and renders components twice to help catch side effects and bugs. This does not happen in production builds. You can read more about this in the React Strict Mode documentation and in related Next.js issues where users report double renders in development, which are expected and not present in production builds Next js is double rendering components.

  2. Client Components in Layouts:

    • If your component is used inside a layout or as part of a shared client component, it may re-render on navigation or when its parent re-renders. There are open issues where client components in layouts re-render more than expected, especially in production mode, and sometimes lose their state on navigation App router: Components in root layout rerender on navigation.

  3. State and Effects:

    • Using hooks like useState and useEffect is fine, but if your parent component or the Redux store updates, your component will re-render as well.

What should you do?

#
  • Check in Production: The extra renders are usually only in development. Build your app (next build and next start) and check if the issue persists in production mode.
  • Strict Mode: If you want to disable Strict Mode in development (not recommended for long-term, but useful for debugging), you can set reactStrictMode: false in your next.config.js. However, it's best to keep it enabled for catching bugs early.
  • Component Structure: If your component is inside a layout or another client component, be aware that navigation or state changes in parents can cause re-renders.
  • Redux Selectors: If your selector or Redux state changes frequently, it will also cause re-renders.

Summary

Multiple renders on first load are expected in development due to React Strict Mode and how Next.js handles client components. This should not be a problem in production. If you still see excessive renders in production, it may be due to your component structure or how state is managed, and you may want to review how your Redux selectors and parent components are set up.

For more details, see:

If you have a specific scenario where renders are excessive even in production, please provide more details about how and where the component is used.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@clear nimbus Kapa.ai is still learning and improving, please let me know how I did by reacting below.

shy vale