React Hooks - Reacting to the hype

One of the biggest announcements and excitements of React Conf 2018 was the introduction of React Hooks. Hooks are a new feature that lets us use state and other React features without writing a class, essentially allowing us to reuse stateful logic without changing our component hierarchy as well as write cleaner and more maintainable React code. In this talk, I'll give you a brief overview of state and effect hooks and how to integrate them into your codeflow!

Transcript

1. @flxwu React Hooks - Reacting to the hype REACT HOOKS reacting to the hype useEffect(() => { learnHooks() })
2. @flxwu React Hooks - Reacting to the hype Hooks, at first sight
3. @flxwu React Hooks - Reacting to the hype BACKGROUND USING HOOKS
4. @flxwu React Hooks - Reacting to the hype Why?
5. @flxwu React Hooks - Reacting to the hype Why?
6. @flxwu React Hooks - Reacting to the hype Why? Duplicate logic
7. @flxwu React Hooks - Reacting to the hype Reusing logic
8. @flxwu React Hooks - Reacting to the hype Reusing stateful logic
9. @flxwu React Hooks - Reacting to the hype Reusing stateful logic
10. @flxwu React Hooks - Reacting to the hype Reusing stateful logic " Render props
11. @flxwu React Hooks - Reacting to the hype Reusing stateful logic " Render props # HOCs
12. @flxwu React Hooks - Reacting to the hype Duplicate logic Why?
13. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components Why?
14. @flxwu React Hooks - Reacting to the hype Component code overload
15. @flxwu React Hooks - Reacting to the hype Component code overload Class Boilerplate 
 + Lifecycles
16. @flxwu class GroupStatus extends Component { constructor(props) { super(props); this.state = {...} this.handleClick = this.handleClick.bind(this); } handleClick() { ... } render() { return ... } componentDidMount() { this.subscribeToStore(this.props.group.id); this.getGroupStatusFromAPI(this.props.group.id); this.startTimer(); } componentWillUnmount() { this.unsubscribeFromStore(this.props.group.id); this.cancelPendingRequest(); this.stopTimer(); } }
17. @flxwu class GroupStatus extends Component { constructor(props) { super(props); this.state = {...} this.handleClick = this.handleClick.bind(this); } handleClick() { ... } render() { return ... } componentDidMount() { this.subscribeToStore(this.props.group.id); this.getGroupStatusFromAPI(this.props.group.id); this.startTimer(); } componentWillUnmount() { this.unsubscribeFromStore(this.props.group.id); this.cancelPendingRequest(); this.stopTimer(); } }
18. @flxwu class GroupStatus extends Component { constructor(props) { super(props); this.state = {...} this.handleClick = this.handleClick.bind(this); } handleClick() { ... } render() { return ... } componentDidMount() { this.subscribeToStore(this.props.group.id); this.getGroupStatusFromAPI(this.props.group.id); this.startTimer(); } componentWillUnmount() { this.unsubscribeFromStore(this.props.group.id); this.cancelPendingRequest(); this.stopTimer(); } }
19. @flxwu class GroupStatus extends Component { constructor(props) { super(props); this.state = {...} this.handleClick = this.handleClick.bind(this); } handleClick() { ... } render() { return ... } componentDidMount() { this.subscribeToStore(this.props.group.id); this.getGroupStatusFromAPI(this.props.group.id); this.startTimer(); } componentWillUnmount() { this.unsubscribeFromStore(this.props.group.id); this.cancelPendingRequest(); this.stopTimer(); } componentDidUpdate() { ... } }
20. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components Why?
21. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components ⚛ Complex code Why?
22. @flxwu React Hooks - Reacting to the hype Complex code
23. @flxwu React Hooks - Reacting to the hype Complex code mess of state and side-effects
24. @flxwu React Hooks - Reacting to the hype Complex code mess of state and side-effects coherent code gets split
25. @flxwu React Hooks - Reacting to the hype Complex code mess of state and side-effects coherent code gets split unrelated code ends up together
26. @flxwu React Hooks - Reacting to the hype courtesy @threepointone
27. @flxwu React Hooks - Reacting to the hype courtesy @threepointone
28. @flxwu React Hooks - Reacting to the hype courtesy @threepointone
29. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components ⚛ Complex code Why?
30. @flxwu React Hooks - Reacting to the hype TIL;Hooks let you split one component into smaller functions based on what pieces are related
31. @flxwu React Hooks - Reacting to the hype Sacrifices?
32. @flxwu React Hooks - Reacting to the hype
33. @flxwu React Hooks - Reacting to the hype
34. @flxwu React Hooks - Reacting to the hype
35. @flxwu React Hooks - Reacting to the hype
36. @flxwu React Hooks - Reacting to the hype Hooks!!!!!!!!!!!! (finally)
37. @flxwu React Hooks - Reacting to the hype stateless components function Stateless(props) { // no state 
 return <div /> }
38. @flxwu React Hooks - Reacting to the hype stateless components function Stateless(props) { // no state 
 return <div /> } ⬇
39. @flxwu React Hooks - Reacting to the hype stateless components function Stateless(props) { // no state 
 return <div /> } ⬇ functional components
40. @flxwu React Hooks - Reacting to the hype stateless components function Stateless(props) { // no state 
 return <div /> } ⬇ function WithState(props) { // use State&Lifecycles in Hooks here! return <div /> } functional components
41. @flxwu React Hooks - Reacting to the hype “hooking into” React features
42. @flxwu React Hooks - Reacting to the hype “hooking into” React features ✅ no need to convert to class!
43. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks ⚓ hooking into React state: count [varName, setVarName] = useState(default) import React, { useState } from ‘react’;
44. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks count [varName, setVarName] = useState(default)
45. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks count [varName, setVarName] = useState(default) varName ➡ this.state = { varName: ... } setVarName(val) ➡ this.setState({ varName: val }) default ➡ this.state = { varName: default }
46. @flxwu Built-in Hooks class UglyCounter extends React.Component { state = { counter: 0 }; render() { return ( <div> <p>You clicked {this.state.counter} times</p> <button onClick={this._onClick}> Click me </button> </div>) } _onClick = () => { this.setState({counter: this.state.counter + 1}); } } State Hook
47. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks function HooksCounter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } . . .
48. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks function HooksCounter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
49. @flxwu React Hooks - Reacting to the hype State Hook Built-in Hooks const [count, setCount] = useState(0); . . . <button onClick={() => setCount(count + 1)}>
50. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks ⚓ hooking into React lifecycles: useEffect( () => any side effects, [state variables to trigger this effect]) import React, { useEffect } from ‘react’;
51. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks ⚓ hooking into React lifecycles: useEffect(() => any side effects) import React, { useEffect } from ‘react’;
52. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks ⚓ componentDidMount ⏫ componentDidUpdate componentWillUnmount }useEffect
53. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks function Stopwatch() { const [isOn, setIsOn] = useState(false); return ( <div> <button type="button" onClick={() => setIsOn(!isOn)}> {isOn ? 'Stop' : 'Start'} </button> </div> ); }
54. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks function Stopwatch() { const [isOn, setIsOn] = useState(false); useEffect(() => { setInterval(() => console.log('tick'), 1000); }); return ( <div> <button type="button" onClick={() => setIsOn(!isOn)}> {isOn ? 'Stop' : 'Start'} </button> </div> ); }
55. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { setInterval(() => console.log('tick'), 1000); });
56. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { setInterval(() => console.log('tick'), 1000); }, []);
57. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { setInterval(() => console.log('tick'), 1000); }, []); ⬆ only called on mount / unmount
58. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { let interval = setInterval(() => console.log('tick'), 1000); return () => clearInterval(interval); }, []);
59. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { let interval = setInterval(() => console.log('tick'), 1000); return () => clearInterval(interval); }, []);
60. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(() => { let interval; if (isOn)
 interval = setInterval(() => console.log('tick'), 1000); return () => clearInterval(interval); }, [isOn]);
61. @flxwu Built-in Hooks function Stopwatch() { const [isOn, setIsOn] = useState(false); useEffect(() => { let interval; if (isOn)
 interval = setInterval(() => console.log('tick'), 1000); return () => clearInterval(interval); }, [isOn]); return ( <div> <button type="button" onClick={() => setIsOn(!isOn)}> {isOn ? 'Stop' : 'Start'} </button> </div> ); } Effect Hook
62. @flxwu React Hooks - Reacting to the hype Effect Hook Built-in Hooks useEffect(function, array?) function => side-effect; return function to clean-up side-effect on unmount array? => only run effect if one of the state variables change on a rendering update
63. @flxwu React Hooks - Reacting to the hype Custom Hooks
64. @flxwu React Hooks - Reacting to the hype Reusing logic Custom Hooks
65. @flxwu React Hooks - Reacting to the hype show display window width Custom Hooks ⚛ save current width in state ⏰ listen for window resize & update state
66. @flxwu Custom Hooks
67. @flxwu Custom Hooks function MyResponsiveComponent() { const width = useWindowWidth(); // Our custom Hook return ( <p>Window width is {width}</p> ); }
68. @flxwu Custom Hooks
69. @flxwu Custom Hooks function OtherResponsiveComponent() { const width = useWindowWidth(); // Our custom Hook return ( <p>Half of the width is {width / 2}</p> ); }
70. @flxwu function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }); return width; } Custom Hooks
71. @flxwu Custom Hooks
72. @flxwu Custom Hooks function OtherResponsiveComponent() { const width = useWindowWidth(); return ( <p>Half of the width is {width / 2}</p> ); }
73. @flxwu Custom Hooks function OtherResponsiveComponent() { const width = useWindowWidth(); return ( <p>Half of the width is {width / 2}</p> ); } function MyResponsiveComponent() { const width = useWindowWidth(); return ( <p>Window width is {width}</p> ); }
74. @flxwu React Hooks - Reacting to the hype TIL;Hooks are fully encapsulated — each time you call a Hook, it gets isolated local state within the currently executing component.
75. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components
76. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components ⚛ Complex code
77. @flxwu React Hooks - Reacting to the hype Duplicate logic Huge components ⚛ Complex code
78. @flxwu React Hooks - Reacting to the hype ✅ Reuse logic ✅ Smaller bundles and components
79. @flxwu React Hooks - Reacting to the hype ✅ Reuse logic ✅ Smaller bundles and components ✅ Readable, simple code
80. @flxwu React Hooks - Reacting to the hype Resources https:/ /reactjs.org/docs/hooks-intro.html https:/ /medium.com/@dan_abramov/making-sense-of- react-hooks-fdbde8803889
81. @flxwu
82. @flxwu