UseState won't trigger useEffect

Question

I have 2 functional components that the Parent is passing a state variable a prop to the Child component:

Parent:

const Parent = () => {
    const [data,setData] = useState()


    const printSomething = async () =>{
       console.log("Use effect called")
    }

    useEffect(() => {
        printSomething();
    }, []);


    return (
        <Child setData={setData}/>
    );
}

export default Parent

Child:

const Child = ({setData}) => {

    const doSomething = async () => {
        setData("Data")
    }

   
    return (
    <div className='task-container'>
        <div>
            <button onClick={doSomething}>Click me</button>
        </div>
    </div>
    );
}

export default Child;

My question why using setData() on the Child component won't trigger useEffect() of the Parent component to run?

CertainPerformance CertainPerformance · Accepted Answer · 2021-01-02T23:59:13

A useEffect will only run its callback when something in its dependency array changes. If the dependency array is empty, it'll only run on mount. Use:

useEffect(() => {
    printSomething();
}, [data]);

so that it runs whenever data changes.

UseState won't trigger useEffect

1 Answers