React Stateful (!) Functional Components

counter.js

// counter.js
import stateful from 'new-fancy-statefulness'

const Counter = (props, state, { setState }) => (
  <div>
    <div>Clicked {state.clicks} times</div>
    <button onClick={props.onClick}>Increase +</button>
  </div>
)

const increase = () => state => ({ clicks: state.clicks + 1 })

export default stateful(Counter, { clicks: 0 }, {
  onClick: event => ({ setState }) => setState(increase())
})

There was a small mistake in the first version. Instead of correcting onClick={setState(increase())} to onClick={() => setState(increase())} I eliminated the arrow function by adding a props.onClick handler.

That should make it faster if the component gets re-rendered frequently :)