Refactoring.md

Given a function component

export default function MyComponent({ value }) {
  return (
    <div>
      <p>{value}</p>
    </div>
  );
}

Let's introduce a state with recompose

-export default function MyComponent({ value }) {
+function MyComponent({ counter, setCounter, flag, setFlag }) {
  return (
    <div>
-      <p>{value}</p>
+      <p>{counter}</p>
+      <button onClick={() => setCounter(counter + 1)}>increment</button>
+      <button onClick={() => setFlag(!flag)}>toggle</button>
    </div>
  );
}
+
+const enhancer = compose(
+  withState("counter", "setCounter", props => props.value),
+  withState("flag", "setFlag", () => false)
+);
+export default enhancer(MyComponent);

And compare to the same thing with hooks

export default function MyComponent({ value }) {
+  let [counter, setCounter] = useState(value);
+  let [flag, setFlag] = useState(false);
  return (
    <div>
-      <p>{value}</p>
+      <p>{counter}</p>
+      <button onClick={() => setCounter(counter + 1)}>increment</button>
+      <button onClick={() => setFlag(!flag)}>toggle</button>
    </div>
  );
}