CODEWITHSUNDEEP
reactjs
Emmanouil Dagdilelis
Emmanouil Dagdilelis

Reputation: 171

React componentDidUpdate() does not fire

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>
        );
    }
}

Upvotes: 0

Views: 1326

Answers (2)

Son Dang
Son Dang

Reputation: 199

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.

Upvotes: 1

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

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.

Upvotes: 0

Related Questions