But there is a big difference between element and component/function: Who renders the component.
Elements are components being rendered by the parent, while components/functions are components that will be rendered by the child.
With complex lifecycles and state dependencies, this can make a huge impact.
You can look at it this way: Functions/components are "lazy elements" (elements that will be rendered when needed). This can also affect performance.
Not exactly. Even with element approach, the component is still rendered by the child. Parent will generate only this component's description, it will not trigger any of the lifecycle events, including render.
I removed the icon from button's render, while still passing it from parent - and it's render is not triggered.
So the effect of that on parent will be comparable with creating an object there, and will be very cheap. Otherwise latest react-router wouldn't have been able to transition to this model: reactrouter.com/docs/en/v6/upgradi...
Huh, interesting. Thank you very much for correcting me!
I'm pretty sure it worked like that in the past (but I could be wrong again). If that's the case, React has advanced quite a lot.
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.
But there is a big difference between element and component/function: Who renders the component.
Elements are components being rendered by the parent, while components/functions are components that will be rendered by the child.
With complex lifecycles and state dependencies, this can make a huge impact.
You can look at it this way: Functions/components are "lazy elements" (elements that will be rendered when needed). This can also affect performance.
Not exactly. Even with element approach, the component is still rendered by the child. Parent will generate only this component's description, it will not trigger any of the lifecycle events, including render.
Check this out: codesandbox.io/s/buttons-with-icon...
I removed the icon from button's render, while still passing it from parent - and it's render is not triggered.
So the effect of that on parent will be comparable with creating an object there, and will be very cheap. Otherwise latest react-router wouldn't have been able to transition to this model: reactrouter.com/docs/en/v6/upgradi...
Huh, interesting. Thank you very much for correcting me!
I'm pretty sure it worked like that in the past (but I could be wrong again). If that's the case, React has advanced quite a lot.