This document discusses React hooks. It begins with an overview of hooks and their benefits over classes for managing state and side effects in React components. It then provides examples of how to use the useState, useEffect, and custom hooks. Key points covered include how hooks allow components to use state and side effects without classes, how hooks enable code reuse through custom hooks, and the rules for using hooks, such as only calling them at the top level.

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 + Suspensereact-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