CODEWITHSUNDEEP
javascriptreactjs
newprint
newprint

Reputation: 7136

Passing prop down to the child is causing Re-rendering of all the owners

I have a component PP, which has a decorator, that causes it to receive a props patternStreams every few seconds. PP owns a component called PPView and passes it patternStreams, consecutively, PPView owns a RP component and passes it patternStreams.
By placing console.log within render() method of each component, I have noticed that it all 3 components are being redrawn every few seconds, when prop is being passed to PP component.
The only component that needs to be redrawn is RP, so how do I prevent rest of components from being redrawn ?

Upvotes: 0

Views: 30

Answers (1)

Hugo Silva
Hugo Silva

Reputation: 6958

There is a lifecycle method called shouldComponentUpdate that does exactly what you need - https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.

Upvotes: 1

Related Questions