How does the child component receive props from the parent component without listening for the lifecycle method?

Question

To update the props object in the child components, usually the life cycle method ComponentWillReceiveProps is used. But I realized that the props for the child component could be updated without listening for ComponentWillReceiveProps.

For example, in the following component named App, the child component Comp is able to receive the props without listening for the life cycle method ComponentWillReceiveProps.

The main App component:

import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }

    this.incrementCounter = this.incrementCounter.bind(this);
  }

  componentDidMount() {
    this.setState({
      counter: 100
    })
  }

  incrementCounter() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    return (
      <div>
              <button onClick={this.incrementCounter}>Increment</button>
              <br />
              <br />
              <Comp counter={this.state.counter}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

and the child Comp component:

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("prev props ", prevProps);
    console.log("prev state", prevState)
  }

  render() {
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

Here is also the working demo of the above code I prepared

You will see that the child component Comp receives property counter without listening for any lifecycle method.

What does it mean? Am I missing anything?

I think the child component is being re-rendered. That is why you are getting the updated props. On change of state of App, it renders again, making child component to re rendered too. life cycle method comes in handy when are parent component is not be re rendered. We just want our child component to re rendered. — Osama Khalid, Jul 09 '19 at 07:07
@OsamaKhalid I do not understand. Could you give an example of a case where parent component does not get re rendered but the child component gets re rendered. — Amanda, Jul 09 '19 at 07:20
Sorry I made a mistake in above comment. ComponentWillReceiveprops does not control the child component re rendering. Child component will always be re rendered when the state of parent change. The use of this method is that it gives us to make logical decisions for our child component as it has previous props and nextprops, so we can use them to set some data/state for out child component, before the render of child function is called. — Osama Khalid, Jul 09 '19 at 07:43

Chris Ngo · Answer 1 · 2019-07-09T07:46:56.287

componentWillReceiveProps() is a deprecated life-cycle method that is triggered when a component is about to receive new props. However, it has no control over whether the component actually receives those props.

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

The component will receive updated props from parent regardless of whether componentWillReceiveProps() is executed.

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    console.log(this.props.counter) //still gets printed with new props data
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

Note that props are passed down strictly from Parent to Child Component.

When a Parent component is re-rendered via state-change, it re-renders the Child components as well and it passes down updated props. Now the children component have access to those new props and they go through the React life-cycle of events.

Events like componentDidUpdate() and componentWillReceiveProps() allow you to execute some extra logic, but they are not required for the component to receive props or re-render. The component will re-render regardless of their usage.

Additionally, a Child-component can update itself via internal state-updating the same way any class-based component would.

score 1 · Answer 2 · answered Jul 09 '19 at 07:21

Every time you do setState on the parent node/component it re-renders all the child component with the latest props. So basically whenever parent component is re-rendered, all the child components of that node are re-rendered.

The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

In case you don't want your child component to re-render on some condition the you can use shouldComponentUpdate lifecycle. This lifecycle is just a performance optimization. Read about shouldcomponentupdate

Also consider using PureComponent instead of component. It performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update. Read about PureComponent

How does the child component receive props from the parent component without listening for the lifecycle method?

2 Answers2