[ASK] Use useMemo for conditional render

Hi, I quite often use this syntax to render my components conditionally and I've got a lot of review about this to not use useMemo to render markups. Is it wrong doing it this way?

The reason I'm doing this is because of the markups I want to render conditionally is wrapped, I don't want to use the same wrapper in three different places. Any suggestion?

function CardContainer({ data, isLoading }) { const renderCards = useMemo(() => { if (isLoading) { return <Loading /> } if (!data.length) { return <EmptyState /> } return <Cards data={data} /> }, [data, isLoading]) return <Container> {renderCards} </Container> }