Reactjs: Why child components aren't re-rendering on data change?

Question

React.js suppose to re-render all sub components (children) when state of root component changes?

Please have a look at this example: http://jsfiddle.net/F8H7p/8/

In the above example, Only Search sub-component re-renders when the state of Dashboard component changes. But other sub-components - Section, Chart & Widget do not re-render.

This is how my renderComponent looks:

React.renderComponent(Dashboard({title: "D", children: [Section({title: "S", children: [Widget({title: "W"}), Chart()]})]}), document.body);

Any Idea why?

jsfiddle.net/F8H7p/21 switching to jsx in React.renderComponent seems to work. — nimgrg
– nimgrg, Commented May 22, 2014 at 10:23

Sophie Alpert · Accepted Answer · 2014-05-23 01:10:16Z

When you update Dashboard, React re-renders each component created by the Dashboard render method. In this case, you're passing in components via this.props.children and so it's expected that they don't depend on Dashboard's state and so they aren't re-rendered.

If this isn't the case for your app, you probably want to create a higher-level Page component that handles this state and renders the Dashboard component along with its children. With that structure, your renderComponent call would just be something like:

React.renderComponent(Page(), document.body);

Collectives™ on Stack Overflow

Reactjs: Why child components aren't re-rendering on data change?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related