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>
}
Top comments (0)