Component didn't render when I setState in useEffect

Question

Why my component didn't do the render again when I setState inside my useEffect? I read on google that the component is render another time if I setState inside the useEffect

My code:

export default function CarouselMusicGenres() {
    const [musicGenres, setMusicGenres] = useState(null)

    const setAllMusicGenres = () => {
        MusicGenresAPI.getAll()
            .then((response) => {
                if (response.status === 200) {
                    setMusicGenres(response.data.musicGenres)
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }

    const displayAllMusicGenres = () => {
        if (musicGenres && musicGenres.length > 0) {
            musicGenres.forEach((musicGenre) => {
                return (
                    <SwiperSlide>
                        <Col
                            className="genre"
                            style={{
                                backgroundImage: `url(/assets/images/music-genres/${musicGenre.image_background_url})`,
                            }}
                        >
                            <span>{musicGenre.genre}</span>
                            <div className="transparent-background"></div>
                        </Col>
                    </SwiperSlide>
                )
            })
        }
    }

    useEffect(() => {
        setAllMusicGenres()
    }, [])

    return (
        <Row className="carousel-genres">
            <Swiper spaceBetween={10} slidesPerView={6}>
                {displayAllMusicGenres()}
            </Swiper>
        </Row>
    )
}

I try someting like that instead useEffect but still don't work

if (!musicGenres) {
        setAllMusicGenres()
}

Problem Fixed

I need to use map instead foreach to get the array returned and add return before my musicGenres.map

Answer 1

in order to return an array you should use map and you need to add something in your dependency array if you want to rerender on change. when you do it like that

useEffect(() => {
    setAllMusicGenres()
}, [])

you are only telling it to setAllMusicGenre on load and not on change, if you would like it to change when a certain change happens to musicGenres you should add it to the array.

useEffect(() => {
    setAllMusicGenres()
}, [musicGenres ])

Answer 2

you need to add dependency in order to Render it, again and again, for example, In your case musicGenres state will be your dependency so you need to write your useState Like below -

    useEffect(() => {
    setAllMusicGenres()
},[musicGenres])

It will update your component whenever you update musicGenres Note: You need to Pass Key(It should always be unique) also So DOM can Understand Something change and it will Update accordingly

When you write useEffect like given below in hooks -

useEffect(() => {
        setAllMusicGenres()
    }, [])

it will act Like componentDidMount