update state when props change in react-ag捕鱼王app官网

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';
functionchild({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 functionparent() {
  const [parentcount, setparentcount] = usestate(0);
  return (
    <div><buttononclick={() => setparentcount(current => current   1)}>
        parent count: {parentcount}
      button><hr /><childparentcount={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';
functionchild({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 functionparent() {
  const [parentcount, setparentcount] = usestate(0);
  return (
    <div><buttononclick={() => setparentcount(current => current   1)}>
        parent count: {parentcount}
      button><hr /><childparentcount={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';
functionchild({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 functionparent() {
  const [parentcount, setparentcount] = usestate(0);
  return (
    <div><childsetparentcount={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.