How to call useEffect after updating state in a component

Question

I am having a little trouble calling a useEffect using a setstate that I passed as a prop to a child component. I am not sure this is the way to do this.

The code goes something like this:

const Parent = () => {
const [state, setState] = useState()
useEffect(() => {
    console.log ('state updated');
}, [state])

return (
    <>
    <Child state={state} setState = {setState}/>
    </>
)}

const Child = (props) => {
const update = () => {
    props.setState("updated");
}
return(
    <>
    <button onClick={update}></button>
    </>
)}

In this case, I expect the useEffect to run when the button is clicked but it does not. How do I fix it or is there a better way of doing this. Note that the two components are different files.

Thanks in advance!

jmk · Accepted Answer · 2021-12-26 22:26:42Z

2

You need to pass setState as a prop to Child component. Previously you passed only state prop.

const Parent = () => {
    const [state, setState] = useState()

    useEffect(() => {
        console.log ('state updated');
    }, [state])

    return (
        <>
            <Child setState={setState}/>
        </>
    )
}

const Child = (props) => {
    const update = () => {
        props.setState("updated");
    }

    return(
        <>
            <button onClick={update}></button>
        </>
    )
}

answered Dec 26, 2021 at 22:26

jmk

1,6308 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacky Over a year ago

Hi, thank you for your answer. I updated the code and it's still not calling the useEffect. Is there any other reasons that could be causing this?

Antonio Pantano · Accepted Answer · 2021-12-27 00:42:42Z

0

I've tested your code here https://codesandbox.io/s/dank-cherry-n5ygr?file=/src/App.js and it works as expected.

useEffect is called only once because subsequent states have the same value 'updated'. Please note that useEffect is also called when the component is mounted so you should expect to see 2 console.log after you've clicked the button.

answered Dec 27, 2021 at 0:42

Antonio Pantano

5,0822 gold badges26 silver badges27 bronze badges

1 Comment

Jacky Over a year ago

I see. I think there must be something else that is messing with my code and preventing the useEffect to run then. Thank you for your insights!

Jacky · Accepted Answer · 2022-01-06 23:55:49Z

0

Solution to my own problem: There wasn't anything wrong with my code above. However, in my codebase, I didn't realize that I changed the value of the object but not the reference. Now that I assigned a new reference for each value change, it works perfectly.

answered Jan 6, 2022 at 23:55

Jacky

13 bronze badges

Collectives™ on Stack Overflow

How to call useEffect after updating state in a component

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related