Props change does not re render

[jeff-lau]

As far as I know changing props doesn't cause a component to re render. Props change will trigger componentWillReceiveProps and will only cause a re render if we update the state in this life cycle method?

[NiGhTTraX]

@jeff-lau a new set of props coming in for a component will always cause it to try to re-render (I say try because you can stop rendering with shouldComponentUpdate). Think of components as functions and of props as the arguments to the functions. Receiving props is like calling the function. If you call add(1, 2) you expect 3. If you call it again with add(3, 3) you expect 6.

componentWillReceiveProps can be used to react to incoming new props and possibly trigger state changes, but a component will always try to re-render regardless if you call setState or not in that life cycle method.

[jeff-lau]

@NiGhTTraX thank you for replying!

I find that, if a parent container changes the props passed in to a child component. The child component does not re-render automatically. The way I can get it to re-render is to update the state of the child component with the new props in the componentWillReceiveProps method.

https://stackoverflow.com/questions/38892672/react-why-child-component-doesnt-update-when-prop-changes

That seems to be the way how react behaves?
thanks,

[NiGhTTraX]

In your example you're mutating the this.props object which is not allowed because React won't notice the change. The props do indeed change but the component is unaware of this. That's why you need to forcefully trigger an update, either by calling setState or forceUpdate. Then, React will see the new value for this.props and use it.

You should never manually update this.props. If you want a component to send new props to a child component then those new props should be computed at render time e.g. as a derivation of the parent's state.

Container {
  state= { foo: 123 }
  handleEvent() {
    this.setState({ foo: 456 })
  },

  render() {
    return <Child foo={this.state.foo} />
}

Child {
  render() {
    return <div>{this.props.foo}</div>
  }
}

[swashata]

Thanks @NiGhTTraX for the clarification. I am just starting with React and I wasn't sure that updating the props from outside will cause re-render (because this is what I need). I came across the stackoverflow example and I thought it is indeed not okay to change props inside a component. Your clarification clears things up.

Bottom line is I am passing props from parent to child without of course mutating them ever. So if the prop does change (from an even external component, like GrandParent) then react will re-render.

The only situation I have found to actually look for prop change is, if I am using one of the props to set an initial state. Then I would not set any state at constructor. I would rather use getDerivedStateFromProps(nextProps, prevState) and do it there. I may compare against prevState to check if it is actually necessary for me to update.

Further down I may use shouldComponentUpdate to fine tune it further.

So please correct me if my understanding is wrong. Thank you.

[NiGhTTraX]

@swashata your understanding is correct. I just want to clarify one small thing for future readers:

I would not set any state at constructor. I would rather use getDerivedStateFromProps(nextProps, prevState) and do it there

At least with the current API in 16.3.0, state needs to be defined in the constructor before calling getDerivedStateFromProps. If you don't initialize it then you get the following warning:

Warning: Foo: Did not properly initialize state during construction.
Expected state to be an object, but it was undefined.

getDerivedStateFromProps is meant to replace componentWillReceiveProps so its main purpose will be to adjust existing state based on new incoming props, not to define the initial state.

[swashata]

@NiGhTTraX Thanks for the pointer. I was already setting this.state = {...} with some initial value. I did face the error when I didn't do it.

Bdw, could you please do a quick review of the codebase I am working on? I will be very glad 😅

[ryan2clw]

Great pointer about the forceUpdate when new props are passed to the component in some edge case scenarios. I may try the getDerviedStateFromProps in the future. I agree with your comment @swashata that "The only situation I have found to actually look for prop change is, if I am using one of the props to set an initial state", plus of course setting static items. I ran into a conundrum earlier today where I wanted to get the derived state from the initial props, so I did this https://stackoverflow.com/questions/50103629/passing-data-from-ajax-call-to-view-in-react-native. Seems to work for me, thought I'd pass the knowledge along. Thanks for clearing some things up for me @NiGhTTraX; reading this conversation helped validate my solution.

[bologer]

@NiGhTTraX I have a small question:

I have shouldComponentUpdate() in child component. For the first render, props seems to be passed, on the state change of the parent shouldComponentUpdate() seems missing the props.

Is is somewhat expected?

[NiGhTTraX]

Hey @bologer, can you provide some example code?

[phtmgt]

Guys, I am having a problem with re-rendering of a component (and came here Googling) on its props change:

Component rendered in parent:

<JobList project={this.state.element} jobs={this.state.activeJobs} user={this.props.user} onChange={handleChange} title="Active Jobs"/>

Change state in parent:

const handleChange = (...) => {
  ...
  this.setState({
    exclusionList: exclusionList,
    activeJobs: activeJobs,
    completedJobs: completedJobs,
  });
  ...
}

onClick method in child:

const handleClick = (job, action) => {
	      	this.props.onChange(job, action);
	    }

<button className="btn btn-icon btn-danger btn-simple btn-round btn-sm" onClick={() => handleClick({value:element.id, title: element.title, complete: element.complete}, 'removeJob')}><i className="fal fa-times"></i></button>

Set state fires for sure, as another component, that takes its props from state re-renders immediately:

<Progress value={(this.state.completedJobs.length/(this.state.activeJobs.length + this.state.completedJobs.length))*100} />

I hope I am not hijacking the thread.

EDIT: RESOLVED!

I found my (probably newbie mistake). It was very simple: I was assuming that the constructor of the child would be called whenever props is changed and was copying props to state, then using state in the render functions. Apparently, constructor of child did not run when props were changed. Once I started using props instead of state in child function everything started working.

[Microserf]

Thank you, @finkbg. I had made the exact same wrong assumption about the constructor() function running each time the properties changed. Your post helped me understand the issue I was having, and how to fix.

[solzhang777]

I think should be use Vuex, put the model object for react with parent and children components. in vue template(ui), you can bind the object (from $store.state.object). when the object changed by this.$store.commit('updateObject', newObject); your children component will be render. The means: parent, children component, even sibling components share same model object with Vuex

[bizcontact]

In your example you're mutating the this.props object which is not allowed because React won't notice the change. The props do indeed change but the component is unaware of this. That's why you need to forcefully trigger an update, either by calling setState or forceUpdate. Then, React will see the new value for this.props and use it.

You should never manually update this.props. If you want a component to send new props to a child component then those new props should be computed at render time e.g. as a derivation of the parent's state.

Container {
  state= { foo: 123 }
  handleEvent() {
    this.setState({ foo: 456 })
  },

  render() {
    return <Child foo={this.state.foo} />
}

Child {
  render() {
    return <div>{this.props.foo}</div>
  }
}

Excellent! Child should not keep this as state if it is property replication. If it is transforming then event passing and transform again.