react-thunk

react-thunk

Define React functional stateless components as thunks

Install

npm i --save react-thunk

Why?

Instead of doing the following, and setting a new change listener on each render:

function NameField(props) {
    const { name, setName } = props;

    return <input type="text" value={ name } onChange={ (evt) => setName(evt.target.value) } />;
}

Do the following, and only define your change listener once:

function NameField(initialProps) {
    const { setName } = initialProps;
    const changeHandler = (evt) => setName(evt.target.value);

    return (props) => {
        const { name } = props;

        return <input type="text" value={ name } onChange={ changeHandler } />;
    };
}

How?

It creates a class for you: https://github.com/troch/react-thunk/blob/master/modules/index.js. That is all the source code.

API

thunk(component: Function[, pure: Boolean])

Since a thunk creates a class, it gives you the opportunity to have pure components (set second argument to true).

import React from 'react';
import thunk from 'react-thunk';

function NameField() {
    /* ... */
}

export default thunk(NameField);