Demonstrating with a small peek under the hood how these highly anticipated functionalities will change the way people think about stateful components.

1. Hot React Hooks
Tomas Weiss
1

2. Component-Based approach - Classes
import React from "react";
class Counter extends React.Component {
state = {
value: 0
};
incrementValue = () => {
this.setState({ value: this.state.value + 1 });
};
render() {
return <button onClick={this.incrementValue}>{this.state.value}</button>;
}
}
2

3. Component-Based approach - Functions
import React from "react";
const Counter = ({ value, incrementValue }) => (
<button onClick={incrementValue}>{value}</button>
);
3

4. Introducing React Hooks!
4

5. Component-Based approach - Hooks
import React, { useState } from "react";
const Counter = () => {
const [value, setState] = useState(0);
return <button onClick={() => setState(value + 1)}>{value}</button>;
};
export default Counter;
5

6. Why React Hooks?
● No more mixing Stateful and Stateless components
● Replacement for HoC and render props
● Facebook got it with almost zero effort with transition to Fiber
○ Fiber = Unit of work
○ Work prioritization
○ Virtual stack implementation
6

7. Built-in hooks
● useState - setState replacement
● useEffect - component lifecycle replacement
● useContext - context API
● useReducer - setState using Event Sourcing approach
● useMemo - memoization of computationally expensive functions
● ...
7

8. Component-Based approach - Custom Hooks 1/2
const useStatefulCounter = (initialValue = 0) => {
const [value, setState] = useState(initialValue);
const increment = () => setState(value + 1);
return { value, increment };
};
const TwoCounters = () => {
const counter1 = useStatefulCounter();
const counter2 = useStatefulCounter(42);
return (
<div>
<button onClick={counter1.increment}>{counter1.value}</button>
<br />
<button onClick={counter2.increment}>{counter2.value}</button>
</div>
);
};
8

9. Component-Based approach - Custom Hooks 2/2
const Counter = () => {
const counter1 = useStatefulCounter();
let counter2;
if (counter1.value > 3) {
counter2 = useStatefulCounter(42);
}
const counter3 = useStatefulCounter();
return (
<div>
<button onClick={counter1.increment}>{counter1.value}</button>
<br />
{counter2 && (
<Fragment>
<button onClick={counter2.increment}>{counter2.value}</button>
<br />
</Fragment>
)}
<button onClick={counter3.increment}>{counter3.value}</button>
</div>
);
};
9

10. What is the magic behind it?
11

11. Invocation order
12

12. // Originally written by @jamiebuilds
let hooks = null;
export function useHook() {
hooks.push(hookData);
}
function reactInternalRenderAComponentMethod(component) {
hooks = [];
component();
let hooksForThisComponent = hooks;
hooks = null;
}
13

13. Is it really a rocket science?
https://github.com/tomkis/treact/pull/1/files
14

14. So what now?
15

15. Thank you!
16