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.

• <State> — inverts .state and .setState() method.
  • <Toggle>, <Flipflop>, <Value>, <Counter>, <List>, and <Map>
• <ShouldUpdate> — inverts .shouldComponentUpdate() life-cycle method.
• invert() and <Inverted> — inverts DOM element ref reference.

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>