CODEWITHSUNDEEP
reactjsreduxreact-redux
oligofren
oligofren

Reputation: 22923

Re-render `connect()`ed sub-component if parent's `shouldComponentUpdate`=false?

I was wondering if a connect()ed sub-component will re-render if its parent returns false in shouldComponentUpdate?

Say, we have a component tree looking like this

connect(Foo extends PureComponent)
    DumbBar
        connect(Baz extends PureComponent)

So neither Baz, nor Foo, should re-render if their own props, supplied to them by mapStateToProps, keeps the same. But what happens if the state of the redux store changes and the connect()ed Baz component is notified of a state change and is supplied with new props? Will it re-render, or will the hierarchical update model of React prevent anything from rendering?

Or is this whole question perhaps a bit off, since it's not possible for a child components new rendering to take effect without affecting the ancestors - forcing the ancestors to re-render if a child changes?

If the last point is true, then putting a connect-ed component as a child of a PureComponent is lethal, as it breaks all optimizations you thought were in place, causing re-renders in other places in the sub-tree of the parent.

Upvotes: 1

Views: 332

Answers (2)

Chad Edrupt
Chad Edrupt

Reputation: 1584

Each component built with connect will wire up it's own subscription to be notified of changes to the redux store.

So if only the props supplied to mapStateToProps for the child component have changed then the child component will re-render whereas the parent component will not.

You can see this yourself by adding a simple console.log to the render function.

Upvotes: 1

pwolaq
pwolaq

Reputation: 6381

Yes, it will re-render.

That's the whole idea of using connect - you don't have to pass the props and you can embed it anywhere - it will take care of keeping your component up-to-date.

Upvotes: 1

Related Questions