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.