#Too many rendered

1 messages · Page 1 of 1 (latest)

raven totem
#

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

cerulean summitBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

worldly oxide
#

you can ignore greyed out logs

#

the real ones are the one in white color

#

so 1st log is actual render