How do I stop unnecessary re-renders of child component when the parent changes

So I currently have a component that looks like this:

<Parent>
<Child/>
</Parent>

However, sometimes I want to only return:
<Child/>

This could be done like this:

if (condition) {
return <Child/>
}

return (
<Parent>
<Child/>
</Parent>
) 

The problem is when condition is met (true) <Child/> will re-render. It’s a shame because none of the props/state inside <Child/> change and this component can be quite expensive to render.

I would prefer not to rewrite <Parent/> so that what is needed in it becomes a sibling to <Child/> as it’s a big change.

How would I go about stopping this unnecessary render of <Child/> each time condition is met.

I have tried to use React.memo but it wasn’t working how I expected.