React - Back to the Future

An overview of ReactJS new and upcoming features, including Lazy loading, data fetching, concurrent rendering and of course - hooks.

Transcript

1. React
3. • Data Caching • Concurrent Rendering • Hooks • Code Splitting
4. Code Splitting
5. Developer, Consultant, Trainer CEO @ 500Tech Me Adam Klein
8. Follow Me @adamklein500
11. Code Splitting
12. Code Splitting Lazy + Suspense react-loadable
13. import React from 'react'; import OtherComponent from './OtherComponent'; const MyComponent = props => ( <div> <OtherComponent /> </div> );
14. import React from 'react'; import OtherComponent from './OtherComponent'; const MyComponent = props => ( <div> <OtherComponent /> </div> );
15. import React from 'react'; import OtherComponent from './OtherComponent'; const MyComponent = props => ( <div> <OtherComponent /> </div> );
16. const OtherComponent = React.lazy(() => import('./OtherComponent'));
17. const OtherComponent = React.lazy(() => import('./OtherComponent'));
18. const OtherComponent = React.lazy(() => import('./OtherComponent'));
19. const MyComponent = (props) => <div> <Suspense fallback={<div>Loading..</div>}> <OtherComponent /> </Suspense> </div>
20. const MyComponent = (props) => <div> <Suspense fallback={<div>Loading..</div>}> <OtherComponent /> </Suspense> </div>
21. <Suspense fallback={<div>Loading..</div>}> <div> <OtherComponent /> </div> <OtherComponent3 /> <OtherComponent2 /> </Suspense>
22. Data Fetcher AKA Cache
23. Stuttering Transition
24. Smooth Transition
25. Concurrent Rendering AKA Async Rendering AKA Time Slicing
29. React Hooks
31. 22 Redux Hook Libraries redux-hooks react-hooks-redux react-hook-redux redux-react-hook redux-react-hooks react-redux-hooks react-redux-hook hook-redux redux-hook react-use-redux use-store react-hooks-easy-redux use-redux react-usemiddleware react-use-dux react-redux-peach hux rehux redux-hooker rehooker
33. More verbose Binding Harder to prepack Functional components are limited Code Reuse Classes
34. Hard to debug / read Prop clashing Wrapper hell HOC / renderProps
36. Maintaining an execution context without ‘this’ The Solution - Hooks
37. class Counter extends React.Component { state = { count: 1 }; render() { return ( <button onClick={() => this.setState({ count: this.state.count + 1 })}> { this.state.count } </button> ); } } State - Classes
38. class Counter extends React.Component { state = { count: 1 }; render() { return ( <button onClick={() => this.setState({ count: this.state.count + 1 })}> { this.state.count } </button> ); } } State - Classes
39. class Counter extends React.Component { state = { count: 1 }; render() { return ( <button onClick={() => this.setState({ count: this.state.count + 1 })}> { this.state.count } </button> ); } } State - Classes
40. const Counter = () => { const [count, setCount] = useState(1); return ( <button onClick={() => setCount(count + 1)}> { count } </button>; ) } State - Hooks
41. const Counter = () => { const [count, setCount] = useState(1); return ( <button onClick={() => setCount(count + 1)}> { count } </button>; ) } State - Hooks
42. const Counter = () => { const [count, setCount] = useState(1); return ( <button onClick={() => setCount(count + 1)}> { count } </button>; ) } State - Hooks
43. const Counter = () => { const [count, setCount] = useState(1); return ( <button onClick={() => setCount(count + 1)}> { count } </button>; ) } State - Hooks
44. const Counter = () => { const [count, setCount] = useState(1); const [value, setValue] = useState(‘’); return ( <button onClick={() => setCount(count + 1)}>{ count } </button>; ) } State - Hooks
45. const Counter = () => { const [count, setCount] = useState(1); const [value, setValue] = useState(‘’); return ( <button onClick={() => setCount(count + 1)}>{ count } </button>; ) } State - Hooks
46. Side Effects - Classes componentDidMount() { console.log("effect"); } componentDidUpdate() { console.log("effect"); }
47. useEffect(() => { console.log("effect"); }); Side Effects - Hooks
48. useEffect(() => { api.fetchData(id); }, [id]); On Change
49. Cleanup Function useEffect(() => { window.addEventListener(…); return () => window.removeEventListener(…); });
50. Separation of Concerns useEffect(() => { // listen to window resize }, []); useEffect(() => { // fetch data from API }, [id]);
51. Custom Hooks = Reusable Code
52. function useCurrentWidth() { const [width, setWidth] = useState( () => document.body.clientWidth ); const resize = () => { setWidth(document.body.clientWidth); } useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return width; }
53. function useCurrentWidth() { const [width, setWidth] = useState( () => document.body.clientWidth ); const resize = () => { setWidth(document.body.clientWidth); } useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return width; }
54. function useCurrentWidth() { const [width, setWidth] = useState( () => document.body.clientWidth ); const resize = () => { setWidth(document.body.clientWidth); } useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return width; }
55. function useCurrentWidth() { const [width, setWidth] = useState( () => document.body.clientWidth ); const resize = () => { setWidth(document.body.clientWidth); } useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return width; }
56. const MyComp = () => { const width = useCurrentWidth(); return <span>{ width }</span>; }
57. const MyComp = () => { const user = useCurrentUser(); return <span>{ user.name }</span>; }
58. Other Hooks •useContext •useRef •useMemo •useCallback •useReducer •useImperativeHandle •useLayoutEffect •useDebugValue
59. How Does React Know? const [name, setName] = useState(‘’); const [role, setRole] = useState(‘’);
60. Component1 State Count1 Count2 Component2 State Cell 1 Cell 2 How Does React Know?
61. Component1 State Current Component Count1 Count2 Current Cell Component2 State Cell 1 Cell 2 Setting context before render
62. Component1 State Current Cell Count1 Count2 const [count, setCount] = useState(1); const [count2, setCount2] = useState(1); Current Component
63. const [count, setCount] = useState(1); const [count2, setCount2] = useState(1); Component1 State Current Cell Count1 Count2 Current Component
64. const [count, setCount] = useState(1); const [count2, setCount2] = useState(1); Component1 State Current Cell Count1 Count2 Current Component
65. Conditionals Component1 State Current Cell Count1 Count2 const [count, setCount] = useState(1); if (count === 0) { const [count2, setCount2] = useState(1); } const [count3, setCount3] = useState(1); Count3
66. Component1 State Current Cell Count1 Count2 const [count, setCount] = useState(1); if (count === 0) { const [count2, setCount2] = useState(1); } const [count3, setCount3] = useState(1); Count3 Conditionals
67. Component1 State Current Cell Count1 Count2 Count3 const [count, setCount] = useState(1); if (count === 0) { const [count2, setCount2] = useState(1); } const [count3, setCount3] = useState(1); Conditionals
68. Component1 State Current Cell Count1 Count2 const [count, setCount] = useState(1); if (count === 0) { const [count2, setCount2] = useState(1); } const [count3, setCount3] = useState(1); Count3 Conditionals
70. Rules of Hooks •Must be used in the same order •No conditionals, no loops •Must be called at top level •Must be called from a functional component
71. eslint-plugin-react-hooks Rules of Hooks
74. –Me. Right Now “Start using hooks. Today”
75. Will classes be supported? Is this a breaking change? Q&A
76. State of Hooks Works
77. State of Hooks Works Used inside Facebook
78. State of Hooks Works Used inside Facebook Server-side rendering
79. State of Hooks Works Used inside Facebook Server-side rendering React Native
80. State of Hooks Works Used inside Facebook Server-side rendering React Native Tests
81. State of Hooks Works Used inside Facebook Server-side rendering React Native Tests eco-system
82. State of Hooks Works Used inside Facebook Server-side rendering React Native Tests eco-system DevTools
83. React Roadmap • Suspense for Code Splitting - Already Shipped 16.6 with • React Hooks - ~Q1 2019 • Concurrent Mode - ~Q2 2019 • Suspense for Data Fetching - ~mid 2019 • All minor releases
84. @adamklein500 @_500tech slideshare.net/500tech 500tech.com/articles Thank You