Giter VIP home page Giter VIP logo

react-nil's Introduction

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

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 <timestamp value={value} />
}

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

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

react-nil's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-nil's Issues

Return data ?

This is more a question than an issue. (sorry for that)

Are those "components" should not return data? Or should react-nil provide a new type of "components" that return data (object, array,...) instead of return null.

Just an idea.

Dead?

What's the status with this project, it seems rather inactive?
Has the idea been canned or superseded by something else?

Async components?

It would be awesome if the package supported RSC.

For now, it's throwing an error:

Objects are not valid as a React child (found: [object Promise]). 
If you meant to render a collection of children, use an array instead.

Scheduler dependency?

Hi Poimandres,

Love this. Really creative thinking IMHO. Just taking it for a spin.

I had to "npm i scheduler" to get it to work with node / parcel because scheduler wasn't found in react-nil/node_modules.

My bad?

Howard

what's the difference between react-nil and this

what's the difference between react-nil and this:

import React from 'react'
import ReactDOM from 'react-dom'

function UseFriendStatus(friendID) {
  console.log('21212121')
  return null
}

ReactDOM.render(<UseFriendStatus />, document.getElementById('root'))

return null is a valid case

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.