CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Jonas.D
Jonas.D

Reputation: 357

Updating component's state using props with functional components

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

Upvotes: 5

Views: 6217

Answers (2)

Retsam
Retsam

Reputation: 33389

You're generally better off not updating your state with props. It generally makes the component hard to reason about and can often lead to unexpected states and stale data. Instead, I would consider something like:

const HomeWorld = (props) => {
    const planetData = props.Selected
        ? props.Planet
        //... what to display when its not selected, perhaps:
        : props.PreviousPlanet

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

This might require a bit more logic in the parent component, to control what displays when the Selected prop is false, but it's a lot more idiomatic React.

Upvotes: 0

Vencovsky
Vencovsky

Reputation: 31565

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.

Upvotes: 9

Related Questions