score:1

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

score:2

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.


Related Query

More Query from same tag