React, let’s Hook Everything

React Hooks, officially released as part of React 16.8+. Hooks make it possible to take a React function component and add state to it or hook lifecycle methods.

Transcript

1. Marko Arsić Senior software developer
7. componentDidMount componentDidUpdate
15. useState useEffect useState, useEffect, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue 3
17. Basic Hooks useState() useEffect() useContext()
18. useState Hook
20. useState
21. useState useState
24. useState
25. useState import React, { useState } from 'react' // (or write React.useState)
26. useState const [clicked, setClicked] = useState(false)
27. const [clicked, setClicked] = useState(false) setClicked
28. import React, { useState } from 'react' const PassengersTracker = () => { const [passengers, setPassengers] = useState(0) const increment = () => { setPassengers(passengers => passengers + 1) } return ( <div> We have {passengers} passengers on board! <br /> <button onClick={increment}>+ New passenger</button> </div> ) }
29. useEffect Hook
30. useEffect
31. useEffect componentDidMount componentDidUpdate componentWillUnmount
32. import React, { useEffect } from 'react' function LifecycleDemo() { // It takes a function useEffect(() => { // Called after every render, by default console.log('render!'); // If you want to implement componentWillUnmount, // return a function from useEffect return () => console.log('unmounting...') }) return "I'm a LifecycleDemo component" }
33. useEffect(() => { return () => console.log('cleanup function...') })
35. useEffect(() => { console.log('render!') return () => console.log('cleaning up...') }) useEffect
37. useEffect
40. const [value, setValue] = useState('initial'); useEffect(() => { // This effect uses the `value` variable, // so it "depends on" `value`. console.log(value); }, [value]) // pass `value` as a dependency
42. useEffect(() => { console.log('mounted'); return () => console.log('unmounting...'); }, [])
43. useContext Hook
44. useContext
45. // Create a Context const NumberContext = React.createContext() // It returns an object with 2 values: // { Provider, Consumer }
46. function App() { // Use the Provider to make a value available to all children return ( <NumberContext.Provider value={42}> <NumberItem /> </NumberContext.Provider> ) }
47. import NumberContext from './NumberContext' function NumberItem() { // Use the Consumer to grab the value from context // Notice this component didn't get any props return ( <NumberContext.Consumer> {value => <div>The number is {value}.</div>} </NumberContext.Consumer> ) }
48. useContext // import useContext // (or we can write React.useContext) import React, { useContext } from 'react' import NumberContext from './NumberContext' const NumberItem() { const value = useContext(NumberContext) return ( <div>The number is {value}.</div> ) }
49. Custom Hooks
51. Additional Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue
52. Demo
53. Q & A React, let’s Hook Everything
54. Marko Arsić Senior software developer web: marsic.dev twitter: @mArsic