https://github.com/pmndrs/react-nil

⃝ A react null renderer
https://github.com/pmndrs/react-nil

fiber node null react renderer

Last synced: 27 days ago
JSON representation

⃝ A react null renderer

• Host: GitHub
• URL: https://github.com/pmndrs/react-nil
• Owner: pmndrs
• License: mit
• Created: 2020-09-15T19:53:38.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T14:28:17.000Z (6 months ago)
• Last Synced: 2024-05-01T11:29:10.451Z (6 months ago)
• Topics: fiber, node, null, react, renderer
• Language: TypeScript
• Homepage:
• Size: 331 KB
• Stars: 782
• Watchers: 10
• Forks: 14
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - react-nil - A react null renderer (Uncategorized / Uncategorized)
• awesome-learning-resources - react-nil - A react null renderer (Uncategorized / Uncategorized)
• awesome-list - react-nil
• awesome-react - react-nil - ⃝ A react null renderer ` 📝 8 months ago` (React [🔝](#readme))

README

        
[![Size](https://img.shields.io/bundlephobia/minzip/react-nil?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/react-nil)

[![Version](https://img.shields.io/npm/v/react-nil?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-nil)

[![Downloads](https://img.shields.io/npm/dt/react-nil.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-nil)

[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)

[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/poimandres)



  

    

      

      

    

  



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

```jsx

import * as React from 'react'

import { render } from 'react-nil'

function Foo() {

  const [active, set] = React.useState(false)

  React.useEffect(() => void setInterval(() => set((a) => !a), 1000), [])

  // false, true, ...

  console.log(active)

}

render()

```

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 `act` which will wait for effects and suspense to finish.

```jsx

import * as React from 'react'

import { act, render } from 'react-nil'

function Test(props) {

  const [value, setValue] = React.useState(-1)

  React.useEffect(() => setValue(Date.now()), [])

  return 

}

const container = await act(async () => render())

// { type: 'timestamp', props: { value: number }, children: [] }

console.log(container.head)

```