That is actually not true as you can see in the examples. This behavior can be prevented though either by using memoization or the shouldComponentUpdate method (assuming the state can't be moved to another component of course).
The shouldComponentUpdate method returns true by default. This is why the default behavior of React is to re-render all child components on state change.
I stand corrected. But can I ask, why are you re-assigning the component to a variable and then using that variable to render the component? Because this seems to be why SomeComponent is not re-rendering.
It does re-render when you plug it in directly with <SomeComponent /> even though its still not changing when count updates.
I'm not re-assigning anything. someComponent is a React element and <SomeComponent/> is a function call that returns a React element. These are two different things from JavaScript standpoint.
If you have A = () => ({}) then A() !== A() but when a = A() then a === a. That's the gist of it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
That is actually not true as you can see in the examples. This behavior can be prevented though either by using memoization or the
shouldComponentUpdatemethod (assuming the state can't be moved to another component of course).The
shouldComponentUpdatemethod returnstrueby default. This is why the default behavior of React is to re-render all child components on state change.Not true, huh?
I've provided an example code, have you even checked it? Does
SomeComponentre-renders when you click the button? So annoying...I stand corrected. But can I ask, why are you re-assigning the component to a variable and then using that variable to render the component? Because this seems to be why
SomeComponentis not re-rendering.It does re-render when you plug it in directly with
<SomeComponent />even though its still not changing whencountupdates.I'm not re-assigning anything.
someComponentis a React element and<SomeComponent/>is a function call that returns a React element. These are two different things from JavaScript standpoint.If you have
A = () => ({})thenA() !== A()but whena = A()thena === a. That's the gist of it.