i'm a bit confused about how react component works. let say i have 3 component class A, B and C. A contain B and C, and i want to render A in my HTML page
class A extends Component {
render() {
return (
<B />
<C />
);
}
}
If i change the state inside component C, do component B get re-rendered too or only component C get re-rendered? thanks :D
More than whether C updates or B updates, I think this is a question on how Reconciliation algorithm works. When you perform a state update React compares this to the copy in Virtual DOM and finds out the easiest way to make the change.
As you can see, when you perform an update on B, only B updates.
C, only C updates.
But when you perform an update on A (which is called App) A, B and C update.
Here is the codebase I used to perform Profiling https://codesandbox.io/s/8n9rx1py5j
You can learn how to perform Profiling in Chrome from React docs
Only Component C and only if the state you change effects the output of your render function.
shouldComponentUpdate function, C will be re-rendered if its state changes. However, there will be no DOM operations if the rendered output is the same as before changing the state.How better to understand what happens than with a sandbox? I've set up a sandbox to help with the same - https://codesandbox.io/s/388wxk9321
Open up the console and click on the buttons to increment counters in
ModuleB&ModuleCand then reset the state fromModuleA
