Why Do I Get This Error ?

Question

176

Updating component's state using props with functional components

rated 0 times [ 178] [ 2] / answers: 1 / hits: 5930 / 5 Years ago, tue, september 24, 2019, 12:00:00

I am trying to update the state of my component using props that I get from the parent component, but I get the following error message:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I want the local state to update if the prop changes.
The similar posts (Updating component's state using props, Updating state with props on React child component, Updating component's state using props) did not fixed it for me.

import React, {useState} from react





const HomeWorld = (props) => {

    const [planetData, setPlanetData] = useState([]);

    if(props.Selected === true){

        setPlanetData(props.Planet)

        console.log(planetData)

    }





    return(

        <h1>hi i am your starship, type: {planetData}</h1>

    )

}



export default HomeWorld

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazlynnessencec

Add To Favorites

Follow

Total Points: 434

Total Questions: 113

Total Answers: 94

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

jazlynnessencec questions

1 How to fix You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Tue, Jun 14, 22, 00:00, 2 Years ago

1 Load PDF document with PDF-LIB on Node gives No PDF header found

Tue, Dec 14, 21, 00:00, 3 Years ago

1 Testing a node-cron Job function with Jest

Wed, May 13, 20, 00:00, 4 Years ago

1 How to get webpack to include the generated declaration files for a Typescript Nodejs (not browser) project (and how to consume)

Wed, Dec 4, 19, 00:00, 5 Years ago

1 How long is the delay for CSS scroll snap?

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 5 Years ago kylanalis · Accepted Answer

You need to use the useEffect hook to run it only once.

import { useEffect }  from 'react'



... 



const HomeWorld = (props) => {

    const [planetData, setPlanetData] = useState([]);



    useEffect(() => {

        if(props.Selected === true){

            setPlanetData(props.Planet)

            console.log(planetData)

        }

    }, [props.Selected, props.Planet, setPlanetData]) // This will only run when one of those variables change



    return(

        <h1>hi i am your starship, type: {planetData}</h1>

    )

}

Please notice that if props.Selected or props.Planet change, it will re run the effect.

Why Do I Get This Error ?

Too many re-renders. React limits the number of renders to prevent an infinite loop.

What is happening here is that when your component renders, it runs everything in the function, calling setPlanetData wich will rerender the component, calling everything inside the function again (setPlanetData again) and making a infinite loop.