Self-invoking function as React children

#devterminal #react #frontend #selfinvokingfunctions

I always wanted to be able to use return statement on children rendering. Self-Invoking Function is the solution. This is an example of building page states inside of the Layout component. 💡🧑‍💻

const SelfInvokingChildren = () => {
  const [loading, error, data] = useData()

  return (
    <Layout>
      {(function () {
        if (loading) return <Placeholder />

        if (error) return <Error />

        if (!data) return <NotFound />

        return <PageContent data={data} />
      })()}
    </Layout>
  )
}