Search code examples
reactjsreact-propsreact-statereact-lifecycle

In react world, when does props changing happen? It's definitely triggered by parent component re-rendering?


When it comes to thinking about possibility of props changing, should I only care about parent component updating? Any other possible cases exist for props changing?

I can guess only one case like the code below. I would like to know if other cases exist.

const ParentComponent = () => {
  const [message, setMessage] = useState('Hello World');
  return (
    <>
      <button onClick={() => setMessage('Hello Foo')}>Click</button>
      <ChildComponent message={message} />
    </>
  );
};

const ChildComponent = ({ message }: { message: string }) => {
  return <div>{message}</div>;
};

Solution

  • Props can change when a component's parent renders the component again with different properties. I think this is mostly an optimization so that no new component needs to be instantiated.

    Much has changed with hooks, e.g. componentWillReceiveProps turned into useEffect+useRef (as shown in this other SO answer), but Props are still Read-Only, so only the caller method should update it.