JIYIK CN >

To update state when props change in React:

1. Pass propsas a dependency to useEffectthe hook.
2. Every time propschanges are made, useEffectthe logic in is re-run.

import {useEffect, useState} from 'react';

function Child({parentCount}) {
  const [childCount, setChildCount] = useState(0);

  useEffect(() => {
    setChildCount(parentCount * 2);

    console.log('useEffect logic ran');
  }, [parentCount]); // 👈️ Add props as a dependency

  return (
    <div>
      <button>Child count {childCount}</button>
    </div>
  );
}

export default function Parent() {
  const [parentCount, setParentCount] = useState(0);

  return (
    <div>
      <button onClick={() => setParentCount(current => current + 1)}>
        Parent count: {parentCount}
      </button>

      <hr />

      <Child parentCount={parentCount} />
    </div>
  );
}

We use useEffecthooks to update the component's state when its props change.

useEffect(() => {
  setChildCount(parentCount * 2);

  console.log('useEffect logic ran');
}, [parentCount]); // 👈️ Add props as a dependency

useEffectThe logic in the hook is re-run every time one of its dependencies changes .

Every parentCounttime the property changes, useEffectthe hook is re-run and we use setChildCountthe function to update the state.

Add all the properties you want to track useEffectto the hook's dependencies array.

Note, the function we pass to the useEffect hook will also be called on the initial render.

If you don't want to run the logic in your hook on the initial render useEffect, but only when a specific property changes, use a ref to return early on the initial render.

import {useEffect, useRef, useState} from 'react';

function Child({parentCount}) {
  const [childCount, setChildCount] = useState(0);

  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return; // 👈️ If it is the first rendering, please return early
    }
    setChildCount(parentCount * 2);

    console.log('useEffect logic ran');
  }, [parentCount]);

  return (
    <div>
      <button>Child count {childCount}</button>
    </div>
  );
}

export default function Parent() {
  const [parentCount, setParentCount] = useState(0);

  return (
    <div>
      <button onClick={() => setParentCount(current => current + 1)}>
        Parent count: {parentCount}
      </button>

      <hr />

      <Child parentCount={parentCount} />
    </div>
  );
}

When running the hook on mount useEffect, we use ref to exit early.

Use this method if we want to listen to property changes but need to skip the first render.

It's important to note that if we update the value of a prop and that prop is in the hook's dependencies array, you'll end up in an infinite re-rendering loop.

Below is an example that demonstrates this problem.

import {useEffect, useState} from 'react';

function Child({parentCount, setParentCount}) {
  useEffect(() => {
    // 👇️ This will cause an infinite loop
    setParentCount(current => current + 1);

    console.log('useEffect logic ran');
  }, [parentCount, setParentCount]); // 👈️ parentCount is a dependency

  return (
    <div>
      <button>Parent count {parentCount}</button>
    </div>
  );
}

export default function Parent() {
  const [parentCount, setParentCount] = useState(0);

  return (
    <div>
      <Child setParentCount={setParentCount} parentCount={parentCount} />
    </div>
  );
}

The problem is that we parentCountadded the property to the hook's dependencies array, but we also updated its value inside the hook.

Every useEffecttime is run parentCountthe value of changes, which will re-run the hook again because parentCountis in its dependencies array.