[ASK] Use useMemo for conditional render

Ridho Putra — Tue, 22 Mar 2022 09:00:04 +0000

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>
}

DEV Community: Ridho Putra

[ASK] Use useMemo for conditional render