Fetching contributors…
Cannot retrieve contributors at this time
47 lines (34 sloc) 1.16 KB



the action of inverting something or the state of being inverted.

Inversion is a technique where one injects state and/or life-cycle methods into a render prop.

This effectively allows you to have

  1. State
  2. Life-cycle methods
  3. Refs to DOM elements
  4. Other objects

in JSX tree without having to write stateful React components.


A basic example, cnt is incremented by 1 on each click

<State init={{cnt: 0}}>
  {({cnt}, set) =>
    <div onClick={() => set({cnt: cnt + 1})}>

or the same using <Counter> component

<Counter>{({value, inc}) =>
  <div onClick={inc}>