Menu
Fragments in React Now you can render multiple DOM nodes. In order to do this, wrap it inside a parent div which essentially makes it a single DOM node with multiple elements inside it. Fragments in React do not deviate much from their literal meaning.
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
You can see in the console tab, that the render lifecycle got triggered more than once on both the app and greeting component. This is because the React app component got re-rendered after the state values were modified, and it also re-rendered its child components.
All I know is that any function in React Life-Cycle runs only once. So, why am I seening 2 render functions here (or running 2 times). Won't it affect the memory and overuse for running 2nd time.
Yes, it is perfectly fine to call React.render multiple times on the same page. Just as you've suggested, the React library itself is only loaded once, but each call to React.render will create a new component instance independent of any others. (In fact, such a situation is not uncommon on sites that are in the process of transitioning to React, where some portions of the page are generated using React.render and others are not.)
This approach is ok from a page load performance point of view, but there are other downsides and multiple React roots should be avoided if possible.
Further reading
If you were wondering if it's ok to use ReactDOM.render() multiple times with the same container, the docs say: "If the React element was previously rendered into [the same] container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With