pmndrs/react-nil

⃝ A react null renderer

TypeScript

1,000

62 commits

updated Jan 13, 2025

See the code

README

Size Version Downloads Twitter Discord

There are legitimate use cases for null components or logical components.

A 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.

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.

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.

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)
fiber
node
null
react
renderer

pmndrs/react-nil

⃝ A react null renderer

TypeScript

1,000

62 commits

updated Jan 13, 2025

See the code

README

Size Version Downloads Twitter Discord

There are legitimate use cases for null components or logical components.

A 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.

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.

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.

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)
fiber
node
null
react
renderer

Project health

Latest release

2.0.0 · Jan 13, 2025

Releases this year

0

Significant stargazers

Aiden Bai

5,830 followers · starred Aug 2025

Mark Dalgleish

3,287 followers · starred Jan 2021

Andrew Joslin

602 followers · starred Sep 2020

Resi Respati

850 followers · starred Jan 2022