Introducing Hooks

Hooks are a new feature proposal currently in React v16.7.0-alpha. But what are they? What problem are they trying to solve? How might they affect my code?

This talk answers these questions, toward a clear understanding of this new tool and the potential benefits it may provide.

Transcript

1. Introducing Hooks Jake Worth 1
2. @jwworth Hashrocket 2
3. Agenda 1. What are hooks? 2. API Tour 3. Practical example 3
5. 1. What are hooks? 5
6. What are hooks? » A new feature(!) described by an open RFC1 and currently part of the React v16.7.0-alpha » 'Hook into' core features of React » A primitive for sharing stateful logic without writing a class 1 https://github.com/reactjs/rfcs/pull/68 6
7. What are hooks? » Completely opt-in » 100% backwards-compatible » There are no plans to remove classes from React "Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know..."2 2 https://reactjs.org/docs/hooks-intro.html 7
8. 2. API Tour 8
9. API Tour Code examples: https://codesandbox.io/s/z35k2jmz6x 9
10. class ClassComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } 10
11. import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 11
12. import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 12
13. import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 13
14. import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 14
15. import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 15
16. const DumbComponent = () => { return ( <div> <p>I am dumb</p> </div> ); }; 16
17. class NotSoDumbComponent extends React.Component { state = { count: 0 }; render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } 17
18. import React, { useState } from 'react'; const NotSoDumbComponent = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 18
19. import React, { useState } from 'react'; const DumbComponent = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 19
20. class ClassComponentWithSideEffects extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { console.log(`You clicked ${this.state.count} times`); } componentDidUpdate() { console.log(`You clicked ${this.state.count} times`); } // render the button } 20
21. import React, { useEffect, useState } from 'react'; const FunctionalComponentWithEffectHook = () => { const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`); }); // render the button }; 21
22. 3. Practical Example 22
23. Practical Example » https://github.com/jwworth/conway/pull/2 const App = () => { const [days, setDays] = useState(0); const [randomness, setRandomness] = useState(RANDOMNESS); const [sideLength, setSideLength] = useState(SIDELENGTH); const [world, setWorld] = useState(randomWorld(SIDELENGTH, RANDOMNESS)); ... } 23
24. Conclusion 24
25. Thanks! @jwworth 25
26. Links » Introducing Hooks: https://reactjs.org/docs/hooks-intro.html » Motivation: https://reactjs.org/docs/hooks-intro.html#motivation » RFC: https://github.com/reactjs/rfcs/pull/68 » Recipes: https://usehooks.com » Slides: https://speakerdeck.com/jwworth » Code Sandbox: https://codesandbox.io/s/z35k2jmz6x » Refactoring example (Conway): https://github.com/jwworth/conway/pull/2 » Refactoring example (Equality Table): https://github.com/jwworth/javascript-equality/ pull/1 » Photos: darkroomsg and Brook Anderson Unsplash 26