React Hooks

Transcript

1. React Hooks
2. React Hooks • released in React 16.8 • a new way to “hook into” React features • but first, let’s recap the API we have now
3. Class components
4. function MyComponent() { return <input type="email" "/> }
5. class MyComponent extends React.Component { state = { email: '' } render() { return ( <input type="email" value={this.state.email} onChange={event "=> { this.setState({ email: event.target.value, }) }} "/> ); } }
6. function MyComponent({ value, onChange }) { return ( <input type="email" value={value} onChange={onChange} "/> ) }
7. Pros • custom methods • reusing logic • naming logic
8. Cons • switching back and forth between functions and classes • a lot of typing • noisy Git diffs • class components are weird • we don’t instantiate them • we don’t extend them
9. Lifecycle methods
10. class MyComponent extends React.Component { constructor(props) static getDerivedStateFromProps(props, state) render() componentDidMount() shouldComponentUpdate(nextProps, nextState) getSnapshotBeforeUpdate(prevProps, prevState) componentDidUpdate(prevProps, prevState, snapshot) componentWillUnmount() }
11. Pros • transparency • descriptive method names • API is well documented • fine-grained control • easily target exact moment in the lifecycle
12. Cons • no way to escape the complexity • memorizing common pitfalls like endless loops • spreading a single feature across multiple methods
13. Higher-order components (HOCs)
14. import email from './hocs/email' function MyComponent({ email, handleEmailChange }) { return ( <input type="email" value={email} onChange={handleEmailChange} "/> ) } export default email(MyComponent)
15. Pros • reusing complex behavior • we can keep using function components
16. Cons • readability • all props are mixed together • the HOC call is usually the last thing we see
17. Ok, back to hooks
19. Hooks • can only be used in function components • they represent a new mental model
20. Lifecycle methods
21. Basic hooks • useState for local state • useEffect for side-effects • useContext for applying context
22. import React from 'react' function MyComponent() { const [email, setEmail] = React.useState('') return ( <input type="email" value={email} onChange={event "=> { setEmail(event.target.value) }} "/> ) }
23. Stateless or function components?
24. import React from 'react' function MyComponent() { React.useEffect(() "=> { console.log('mounted') return () "=> { console.log('unmounted') } }, []) return "// ""... }
25. A must-read: A Complete Guide to useEffect by Dan Abramov
26. Additional hooks • useMemo for memoizing a computed value • useCallback for memoizing a function reference • etc. https://reactjs.org/docs/hooks-reference.html
27. import React from 'react' import { computeExpensiveValue } from './utils/slow' function MyComponent({ id }) { const value = React.useMemo(() "=> { return computeExpensiveValue(id) }, [id]) return "// ""... }
28. Read before memoizing • One simple trick to optimize React re-renders • When to useMemo and useCallback
29. Custom hooks
30. import React from 'react' function useModal() { const CLASS_NAME = 'modal-open' React.useEffect(() "=> { document.body.classList.add(CLASS_NAME) return () "=> { document.body.classList.remove(CLASS_NAME) } }, []) }
31. Custom hooks recipes: usehooks.com
32. eslint-plugin-react-hooks
33. yarn install "--save-dev eslint-plugin-react-hooks module.exports = { plugins: [ 'react-hooks', ], rules: { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', } }
35. import React from 'react' import AnotherComponent from './AnotherComponent' function MyComponent({ id }) { const onClick = React.useCallback(() "=> { "// do something with id }, [id]) return ( <AnotherComponent onClick={onClick} "/> ) }
36. const onClick = React.useCallback(() "=> { "// do something with id }, [id])
37. const onClick = React.useMemo(() "=> { return () "=> { "// do something with id } }, [id])
38. import React from 'react' import AnotherComponent from './AnotherComponent' function MyComponent({ id }) { const onClick = React.useCallback(() "=> { "// do something with id }, [id]) return ( <AnotherComponent onClick={onClick} "/> ) }
39. Does AnotherComponent need reference equality?
40. import React from 'react' function AnotherComponent({ onClick }) { "// expensive rendering } export default React.memo(AnotherComponent)
41. Pros • less typing, more thinking • reusing behavior is nicer • no need for classes anymore…?
42. Cons • unlearning lifecycle methods • are there any more cons? that’s up to you
43. Questions? @silvenon