React componentDidUpdate() does not fire

Question

I have an react app with primereact installed and I am using primereact/captcha.

Maybe I have misunderstood something, but isn't the following code supposed to work (console.log('Child component did update'))?

import React from 'react';
import { Captcha } from 'primereact/captcha';
export default function App() {
 return (
 <div className="App">
 <ParentComponent/>
 </div>
 );
}
class Child extends React.Component {
 componentDidUpdate () {
 console.log('Child component did update');
 }
 render() {
 return (<h2>Child component</h2>);
 }
}
class ParentComponent extends React.Component {
 constructor() {
 super();
 this.state = {
 captchaSovled: false,
 key : Math.random()
 }
 }
 render() {
 let output;
 if (this.state.captchaSolved) {
 output = <Child key={this.state.key} />;
 } else {
 output =<Captcha siteKey="xxxxxxx" onResponse={() => this.setState({ key : Math.random(), captchaSolved: true })} />
 }
 return (
 <div>
 <h1>Parent component</h1>
 {output}
 </div>
 );
 }
}

Answer 1

From React doc

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

In your code, the Child component is mounted after captchaSolved state is set, therefore only componentDidMount is fired on Child component.

• Emmanouil Dagdilelis: I have the key prop <Child key={this.state.key} />
• Son Dang: Initially, your captchaSolved state is false, the component tree is: ParentComponent -> Captcha. At this point the Child component is not mounted yet. ParentComponent will trigger its own componentDidMount (and Captcha component as well). After captcha is set, component tree become ParentComponent -> Child, at this point, componentDidMount will be called on Child, and componentDidUpdate will be called on ParentComponent. The fact that you have key or other props passed to your Child component won't affect this behaviour.
• Son Dang: Also key is kind of a special thing, it's not actually a prop, but it helps React knows whether they should perform update or mount a new component after re-render. See React keys doc

Answer 2

componentDidUpdate is fired, if there is any change in the state or props. As of your component child:

class Child extends React.Component {
 componentDidUpdate () {
 console.log('Child component did update');
 }
 render() {
 return (<h2>Child component</h2>);
 }
}

There is no state or props which are changing, that's why componentDidUpdate never get's invoked.

• Emmanouil Dagdilelis: What about the key prop ? <Child key={this.state.key} />
• Muhammad Zeeshan: That is just for React itself for minimal updates in DOM. That's not a prop.