React nil

<p align="left"> <a id="cover" href="#cover"> <picture> <source media="(prefers-color-scheme: dark)" srcset=".github/dark.svg"> <img style="white-space:pre-wrap" alt="There are legitimate use cases for null components or logical components.&#10&#10A component has a lifecycle, local state, packs side-effects into useEffect, memoizes calculations in useMemo, orchestrates async ops with suspense, communicates via context, maintains fast response with concurrency. And of course — the entire React ecosystem is available." src=".github/light.svg"> </picture> </a> </p>

Nothing to see here ...

Quite so. This package allows you to bring React's high-level component abstraction to Node or wherever you need it. Why not manage your REST endpoints like routes on the client, users as components with mount/unmount lifecycles, self-contained separation of concern, and clean side effects? Suspense for requests, etc.

You can try a small demo here: https://codesandbox.io/s/react-nil-mvpry

How does it work?

The following renders a logical component without a view, it renders nothing, but it has a real lifecycle and is managed by React regardless.

jsxCopy
import { useState, useEffect } from 'react'
import { render } from 'react-nil'

function Foo() {
  const [active, set] = useState(false)
  useEffect(() => void setInterval(() => set((a) => !a), 1000), [])

  // false, true, ...
  console.log(active)
}

render(<Foo />)

We can take this further by rendering made-up elements that get returned as a reactive JSON tree from render.

You can take a snapshot for testing via React.act which will wait for effects and suspense to finish.

tsxCopy
import { useState, useEffect, act } from 'react'
import { render } from 'react-nil'

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      timestamp: Record<string, unknown>
    }
  }
}

function Test() {
  const [value, setValue] = useState(-1)
  useEffect(() => setValue(Date.now()), [])
  return <timestamp value={value} />
}

const container = await act(async () => render(<Test />))

// { type: 'timestamp', props: { value: number }, children: [] }
console.log(container.head)