Saw this seemingly useful pattern in AI-generated React code for showing and hiding a component without unmounting and consequently without losing state (and without doing something hacky using opacity).

Gist: Early return

function ComponentToHide({show}) {
	// some state and other inexpensive logic
	
	// key part to render null if 'show' is false.
	if (!show) return null
	
	return (
		<div>
			{/*Some additional JSX*/}
		</div>
	}
}

Note that this will not preserve state for components nested/rendered within this component.