THE NUANCE OF REACT RENDERING BEHAVIOUR AS IT RELATES TO CHILDREN

Summary from the TLDR Dev newsletter

React child components behave differently when rendered directly versus passed through the `children` prop. The main difference is in object reference equality: when components are rendered directly, React creates new object references on each render, causing child components to re-render, but when passed via `children`, the same object reference is reused, preventing unnecessary re-renders.