Functional, Reactive React Components

Look ma, no state!

Why?

React has a way to define components as a function Props → λ → JSX Element. The problem is, it doesn't work for any type of advanced component that needs to do asynchronous requests, handle events etc. Coincidently, these types of componets are the ones that would benefit the most from a functional definition instead of setState() everywhere. It is possible to achieve that with RxJS, but you have to use the React class syntax, which means you still need state in your component to tell the render() method what to render, need to manage subscriptions, convert React lifecycle hooks in cumbersome ways.

rx-component allows you to express your component as that single, functional render pipeline Props → λ → JSX Element while still being able to do asynchronous requests, handle events, everything you can do with React class syntax. No mutable state to manage, no bugs with asynchronous setState, clear data flow. You have full control over when to render, without having to implement any class methods.

Example

See it in action

import reactive from 'rx-component'
import { Subject } from 'rxjs'

export const Counter = reactive(() => {

    const increments = new Subject()
    const nextIncrement = e => increments.next(e)

    const decrements = new Subject()
    const nextDecrement = e => decrements.next(e)

    return Observable.merge(
        increments.mapTo(1),
        decrements.mapTo(-1)
    )
        .startWith(0)
        .scan((count, change) => count + change, 0)
        .map(count =>
            <div>
                {count}
                <button onClick={nextIncrement}>Increment</button>
                <button onClick={nextDecrement}>Decrement</button>
            </div>
        )
})

Hack on examples

npm run examples fires up a local development server that serves the examples and opens a browser.

Comparison to other libraries

• xreact Not plain RxJS, introduces more complex concepts like "intents"
• react-rx-component Only maps Props → State and separates the render.
• rx-react Allows you to define your state with rxjs with getStateStream(), but not get rid of state completely.
• react-rx Requires you to create external stores
• reaxjs More complex, takes eventToValues, observablesFactory and PureComponent