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

Inversion

inversion

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.

Example

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

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

or the same using <Counter> component

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