spreadPropDrilling.jsx

const Site = (props) => (
	{/*
		 🤔 props.imgUrl isn't being used in here.
		 😨 I'm too scared to change it because I don't know what it does.
	*/}
	<Header {...props} />
);

const Header = (props) => {
	{/*
		🤔 What's getting passed?
		🤔 Which props do Logo and Navigation actually need?
		😨 What if I need to move Logo into a different component?
		😡 this component re-renders when props.imgUrl changes, but it's not even being used here!
	*/}
	<Logo {...props} />
	<Navigation {...props} />
};

const Logo = (props) => {
	{/*
		🤔 Where is this imgUrl prop even coming from? I don't see it in the parent
		😡 this should have been an easy change
	*/}
	<img src={props.imgUrl} />

	{/*
		😡 this div is getting invalid DOM attributes
	*/}
	<div {...props}>lol</div>
};