99 |
101 |
107 | )
108 | }
109 |
110 | function AppWithUnmountCheckbox() {
111 | const [mountApp, setMountApp] = React.useState(true)
112 | return (
113 | 101 |
102 |
103 |
105 |
106 |
114 |
122 |
123 | {mountApp ?
125 | )
126 | }
127 |
128 | export default AppWithUnmountCheckbox
129 |
--------------------------------------------------------------------------------
/src/final/02.extra-1.js:
--------------------------------------------------------------------------------
1 | // useCallback: custom hooks
2 | // 💯 use useCallback to empower the user to customize memoization
3 | // http://localhost:3000/isolated/final/02.extra-1.js
4 |
5 | import * as React from 'react'
6 | import {
7 | fetchPokemon,
8 | PokemonForm,
9 | PokemonDataView,
10 | PokemonInfoFallback,
11 | PokemonErrorBoundary,
12 | } from '../pokemon'
13 |
14 | function asyncReducer(state, action) {
15 | switch (action.type) {
16 | case 'pending': {
17 | return {status: 'pending', data: null, error: null}
18 | }
19 | case 'resolved': {
20 | return {status: 'resolved', data: action.data, error: null}
21 | }
22 | case 'rejected': {
23 | return {status: 'rejected', data: null, error: action.error}
24 | }
25 | default: {
26 | throw new Error(`Unhandled action type: ${action.type}`)
27 | }
28 | }
29 | }
30 |
31 | function useAsync(asyncCallback, initialState) {
32 | const [state, dispatch] = React.useReducer(asyncReducer, {
33 | status: 'idle',
34 | data: null,
35 | error: null,
36 | ...initialState,
37 | })
38 | React.useEffect(() => {
39 | const promise = asyncCallback()
40 | if (!promise) {
41 | return
42 | }
43 | dispatch({type: 'pending'})
44 | promise.then(
45 | data => {
46 | dispatch({type: 'resolved', data})
47 | },
48 | error => {
49 | dispatch({type: 'rejected', error})
50 | },
51 | )
52 | }, [asyncCallback])
53 | return state
54 | }
55 |
56 | function PokemonInfo({pokemonName}) {
57 | const asyncCallback = React.useCallback(() => {
58 | if (!pokemonName) {
59 | return
60 | }
61 | return fetchPokemon(pokemonName)
62 | }, [pokemonName])
63 |
64 | const state = useAsync(asyncCallback, {
65 | status: pokemonName ? 'pending' : 'idle',
66 | })
67 | const {data: pokemon, status, error} = state
68 |
69 | if (status === 'idle') {
70 | return 'Submit a pokemon'
71 | } else if (status === 'pending') {
72 | return 123 | {mountApp ?
95 |
97 |
103 | )
104 | }
105 |
106 | function AppWithUnmountCheckbox() {
107 | const [mountApp, setMountApp] = React.useState(true)
108 | return (
109 | 97 |
98 |
99 |
101 |
102 |
110 |
118 |
119 | {mountApp ?
121 | )
122 | }
123 |
124 | export default AppWithUnmountCheckbox
125 |
--------------------------------------------------------------------------------
/src/final/02.js:
--------------------------------------------------------------------------------
1 | // useCallback: custom hooks
2 | // http://localhost:3000/isolated/final/02.js
3 |
4 | import * as React from 'react'
5 | import {
6 | fetchPokemon,
7 | PokemonForm,
8 | PokemonDataView,
9 | PokemonInfoFallback,
10 | PokemonErrorBoundary,
11 | } from '../pokemon'
12 |
13 | function asyncReducer(state, action) {
14 | switch (action.type) {
15 | case 'pending': {
16 | return {status: 'pending', data: null, error: null}
17 | }
18 | case 'resolved': {
19 | return {status: 'resolved', data: action.data, error: null}
20 | }
21 | case 'rejected': {
22 | return {status: 'rejected', data: null, error: action.error}
23 | }
24 | default: {
25 | throw new Error(`Unhandled action type: ${action.type}`)
26 | }
27 | }
28 | }
29 |
30 | function useAsync(asyncCallback, initialState, dependencies) {
31 | const [state, dispatch] = React.useReducer(asyncReducer, {
32 | status: 'idle',
33 | data: null,
34 | error: null,
35 | ...initialState,
36 | })
37 |
38 | React.useEffect(() => {
39 | const promise = asyncCallback()
40 | if (!promise) {
41 | return
42 | }
43 | dispatch({type: 'pending'})
44 | promise.then(
45 | data => {
46 | dispatch({type: 'resolved', data})
47 | },
48 | error => {
49 | dispatch({type: 'rejected', error})
50 | },
51 | )
52 | // too bad the eslint plugin can't statically analyze this :-(
53 | // eslint-disable-next-line react-hooks/exhaustive-deps
54 | }, dependencies)
55 |
56 | return state
57 | }
58 |
59 | function PokemonInfo({pokemonName}) {
60 | const state = useAsync(
61 | () => {
62 | if (!pokemonName) {
63 | return
64 | }
65 | return fetchPokemon(pokemonName)
66 | },
67 | {status: pokemonName ? 'pending' : 'idle'},
68 | [pokemonName],
69 | )
70 |
71 | const {data: pokemon, status, error} = state
72 |
73 | if (status === 'idle') {
74 | return 'Submit a pokemon'
75 | } else if (status === 'pending') {
76 | return 119 | {mountApp ?
99 |
101 |
107 | )
108 | }
109 |
110 | function AppWithUnmountCheckbox() {
111 | const [mountApp, setMountApp] = React.useState(true)
112 | return (
113 | 101 |
102 |
103 |
105 |
106 |
114 |
122 |
123 | {mountApp ?
125 | )
126 | }
127 |
128 | export default AppWithUnmountCheckbox
129 |
--------------------------------------------------------------------------------
/src/exercise/06.md:
--------------------------------------------------------------------------------
1 | # useDebugValue: useMedia
2 |
3 | ## 📝 Your Notes
4 |
5 | Elaborate on your learnings here in `src/exercise/06.md`
6 |
7 | ## Background
8 |
9 | [The React DevTools browser extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
10 | is a must-have for any React developer. When you start writing custom hooks, it
11 | can be useful to give them a special label. This is especially useful to
12 | differentiate different usages of the same hook in a given component.
13 |
14 | This is where `useDebugValue` comes in. You use it in a custom hook, and you
15 | call it like so:
16 |
17 | ```javascript
18 | function useCount({initialCount = 0, step = 1} = {}) {
19 | React.useDebugValue({initialCount, step})
20 | const [count, setCount] = React.useState(0)
21 | const increment = () => setCount(c => c + 1)
22 | return [count, increment]
23 | }
24 | ```
25 |
26 | So now when people use the `useCount` hook, they'll see the `initialCount` and
27 | `step` values for that particular hook.
28 |
29 | ## Exercise
30 |
31 | Production deploys:
32 |
33 | - [Exercise](https://advanced-react-hooks.netlify.com/isolated/exercise/06.js)
34 | - [Final](https://advanced-react-hooks.netlify.com/isolated/final/06.js)
35 |
36 | In this exercise, we have a custom `useMedia` hook which uses
37 | `window.matchMedia` to determine whether the user-agent satisfies a given media
38 | query. In our `Box` component, we're using it three times to determine whether
39 | the screen is big, medium, or small and we change the color of the box based on
40 | that.
41 |
42 | Now, take a look at the png files associated with this exercise. You'll notice
43 | that the before doesn't give any useful information for you to know which hook
44 | record references which hook. In the after version, you'll see a really nice
45 | label associated with each hook which makes it obvious which is which.
46 |
47 | If you don't have the browser extension installed, install it now and open the
48 | React tab in the DevTools. Select the `123 | {mountApp ?
14 | {messages.map((message, index, array) => (
15 |
21 | )
22 | }
23 |
24 | // this is to simulate major computation/big rendering tree/etc.
25 | function sleep(time = 0) {
26 | const wakeUpTime = Date.now() + time
27 | while (Date.now() < wakeUpTime) {}
28 | }
29 |
30 | function SlooooowSibling() {
31 | // try this with useLayoutEffect as well to see
32 | // how it impacts interactivity of the page before updates.
33 | React.useEffect(() => {
34 | // increase this number to see a more stark difference
35 | sleep(300)
36 | })
37 | return null
38 | }
39 |
40 | function App() {
41 | const [messages, setMessages] = React.useState(allMessages.slice(0, 8))
42 | const addMessage = () =>
43 | messages.length < allMessages.length
44 | ? setMessages(allMessages.slice(0, messages.length + 1))
45 | : null
46 | const removeMessage = () =>
47 | messages.length > 0
48 | ? setMessages(allMessages.slice(0, messages.length - 1))
49 | : null
50 |
51 | return (
52 |
16 | {message.author}: {message.content}
17 | {array.length - 1 === index ? null :
} 18 |
19 | ))}
20 | } 18 |
53 |
58 |
61 | )
62 | }
63 |
64 | export default App
65 |
66 | const allMessages = [
67 | `Leia: Aren't you a little short to be a stormtrooper?`,
68 | `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
69 | `Leia: You're who?`,
70 | `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
71 | `Leia: Ben Kenobi is here! Where is he?`,
72 | `Luke: Come on!`,
73 | `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
74 | `Leia: Put that thing away! You're going to get us all killed.`,
75 | `Han: Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not going to take them long to figure out what happened to us.`,
76 | `Leia: It could be worse...`,
77 | `Han: It's worse.`,
78 | `Luke: There's something alive in here!`,
79 | `Han: That's your imagination.`,
80 | `Luke: Something just moves past my leg! Look! Did you see that?`,
81 | `Han: What?`,
82 | `Luke: Help!`,
83 | `Han: Luke! Luke! Luke!`,
84 | `Leia: Luke!`,
85 | `Leia: Luke, Luke, grab a hold of this.`,
86 | `Luke: Blast it, will you! My gun's jammed.`,
87 | `Han: Where?`,
88 | `Luke: Anywhere! Oh!!`,
89 | `Han: Luke! Luke!`,
90 | `Leia: Grab him!`,
91 | `Leia: What happened?`,
92 | `Luke: I don't know, it just let go of me and disappeared...`,
93 | `Han: I've got a very bad feeling about this.`,
94 | `Luke: The walls are moving!`,
95 | `Leia: Don't just stand there. Try to brace it with something.`,
96 | `Luke: Wait a minute!`,
97 | `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
98 | ].map((m, i) => ({id: i, author: m.split(': ')[0], content: m.split(': ')[1]}))
99 |
--------------------------------------------------------------------------------
/src/exercise/04.js:
--------------------------------------------------------------------------------
1 | // useLayoutEffect: auto-scrolling textarea
2 | // http://localhost:3000/isolated/exercise/04.js
3 |
4 | import * as React from 'react'
5 |
6 | function MessagesDisplay({messages}) {
7 | const containerRef = React.useRef()
8 | // 🐨 replace useEffect with useLayoutEffect
9 | React.useEffect(() => {
10 | containerRef.current.scrollTop = containerRef.current.scrollHeight
11 | })
12 |
13 | return (
14 |
54 |
55 |
56 |
57 | 58 |
15 | {messages.map((message, index, array) => (
16 |
22 | )
23 | }
24 |
25 | // this is to simulate major computation/big rendering tree/etc.
26 | function sleep(time = 0) {
27 | const wakeUpTime = Date.now() + time
28 | while (Date.now() < wakeUpTime) {}
29 | }
30 |
31 | function SlooooowSibling() {
32 | // try this with useLayoutEffect as well to see
33 | // how it impacts interactivity of the page before updates.
34 | React.useEffect(() => {
35 | // increase this number to see a more stark difference
36 | sleep(300)
37 | })
38 | return null
39 | }
40 |
41 | function App() {
42 | const [messages, setMessages] = React.useState(allMessages.slice(0, 8))
43 | const addMessage = () =>
44 | messages.length < allMessages.length
45 | ? setMessages(allMessages.slice(0, messages.length + 1))
46 | : null
47 | const removeMessage = () =>
48 | messages.length > 0
49 | ? setMessages(allMessages.slice(0, messages.length - 1))
50 | : null
51 |
52 | return (
53 |
17 | {message.author}: {message.content}
18 | {array.length - 1 === index ? null :
} 19 |
20 | ))}
21 | } 19 |
54 |
59 |
62 | )
63 | }
64 |
65 | export default App
66 |
67 | const allMessages = [
68 | `Leia: Aren't you a little short to be a stormtrooper?`,
69 | `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
70 | `Leia: You're who?`,
71 | `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
72 | `Leia: Ben Kenobi is here! Where is he?`,
73 | `Luke: Come on!`,
74 | `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
75 | `Leia: Put that thing away! You're going to get us all killed.`,
76 | `Han: Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not going to take them long to figure out what happened to us.`,
77 | `Leia: It could be worse...`,
78 | `Han: It's worse.`,
79 | `Luke: There's something alive in here!`,
80 | `Han: That's your imagination.`,
81 | `Luke: Something just moves past my leg! Look! Did you see that?`,
82 | `Han: What?`,
83 | `Luke: Help!`,
84 | `Han: Luke! Luke! Luke!`,
85 | `Leia: Luke!`,
86 | `Leia: Luke, Luke, grab a hold of this.`,
87 | `Luke: Blast it, will you! My gun's jammed.`,
88 | `Han: Where?`,
89 | `Luke: Anywhere! Oh!!`,
90 | `Han: Luke! Luke!`,
91 | `Leia: Grab him!`,
92 | `Leia: What happened?`,
93 | `Luke: I don't know, it just let go of me and disappeared...`,
94 | `Han: I've got a very bad feeling about this.`,
95 | `Luke: The walls are moving!`,
96 | `Leia: Don't just stand there. Try to brace it with something.`,
97 | `Luke: Wait a minute!`,
98 | `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
99 | ].map((m, i) => ({id: i, author: m.split(': ')[0], content: m.split(': ')[1]}))
100 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* For exercise 2 and 3, we're handling errors with an error boundary */
2 | body[class*='2'] :not(.render-container) > iframe,
3 | body[class*='2'] > iframe,
4 | body[class*='3'] :not(.render-container) > iframe,
5 | body[class*='3'] > iframe {
6 | display: none;
7 | }
8 |
9 | .pokemon-info-app a {
10 | color: #cc0000;
11 | }
12 |
13 | .pokemon-info-app a:focus,
14 | .pokemon-info-app a:hover,
15 | .pokemon-info-app a:active {
16 | color: #8a0000;
17 | }
18 |
19 | .pokemon-info-app input {
20 | line-height: 2;
21 | font-size: 16px;
22 | box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
23 | border: none;
24 | border-radius: 2px;
25 | padding-left: 10px;
26 | padding-right: 10px;
27 | background-color: #eee;
28 | }
29 |
30 | .pokemon-info-app button {
31 | font-size: 1rem;
32 | font-family: inherit;
33 | border: 1px solid #ff0000;
34 | background-color: #cc0000;
35 | cursor: pointer;
36 | padding: 8px 10px;
37 | color: #eee;
38 | border-radius: 3px;
39 | }
40 |
41 | .pokemon-info-app button:disabled {
42 | border-color: #dc9494;
43 | background-color: #f16161;
44 | cursor: unset;
45 | }
46 |
47 | .pokemon-info-app button:hover:not(:disabled),
48 | .pokemon-info-app button:active:not(:disabled),
49 | .pokemon-info-app button:focus:not(:disabled) {
50 | border-color: #cc0000;
51 | background-color: #8a0000;
52 | }
53 |
54 | .pokemon-info-app .totally-centered {
55 | width: 100%;
56 | height: 100%;
57 | display: flex;
58 | justify-content: center;
59 | align-items: center;
60 | }
61 |
62 | .pokemon-info-app {
63 | max-width: 500px;
64 | margin: auto;
65 | }
66 | [class*='_isolated'] .pokemon-info-app {
67 | margin-top: 50px;
68 | }
69 |
70 | .pokemon-form {
71 | display: flex;
72 | flex-direction: column;
73 | align-items: center;
74 | }
75 |
76 | .pokemon-form input {
77 | margin-top: 10px;
78 | margin-right: 10px;
79 | }
80 |
81 | .pokemon-info {
82 | height: 400px;
83 | width: 300px;
84 | margin: auto;
85 | overflow: auto;
86 | background-color: #eee;
87 | border-radius: 4px;
88 | padding: 10px;
89 | position: relative;
90 | }
91 |
92 | .pokemon-info.pokemon-loading {
93 | opacity: 0.6;
94 | transition: opacity 0s;
95 | /* note: the transition delay is the same as the busyDelayMs config */
96 | transition-delay: 0.4s;
97 | }
98 |
99 | .pokemon-info h2 {
100 | font-weight: bold;
101 | text-align: center;
102 | margin-top: 0.3em;
103 | }
104 |
105 | .pokemon-info img {
106 | max-width: 100%;
107 | max-height: 200px;
108 | }
109 |
110 | .pokemon-info .pokemon-info__img-wrapper {
111 | text-align: center;
112 | margin-top: 20px;
113 | }
114 |
115 | .pokemon-info .pokemon-info__fetch-time {
116 | position: absolute;
117 | top: 6px;
118 | right: 10px;
119 | }
120 |
121 | .pokemon-info-app button.invisible-button {
122 | border: none;
123 | padding: inherit;
124 | font-size: inherit;
125 | font-family: inherit;
126 | cursor: pointer;
127 | font-weight: inherit;
128 | background-color: transparent;
129 | color: #000;
130 | }
131 | .pokemon-info-app button.invisible-button:hover,
132 | .pokemon-info-app button.invisible-button:active,
133 | .pokemon-info-app button.invisible-button:focus {
134 | border: none;
135 | background-color: transparent;
136 | }
137 |
138 | .messaging-app {
139 | max-width: 350px;
140 | margin: auto;
141 | }
142 |
143 | [class*='_isolated'] .messaging-app {
144 | margin-top: 50px;
145 | }
146 |
147 | .messaging-app [role='log'] {
148 | margin: auto;
149 | height: 300px;
150 | overflow-y: scroll;
151 | width: 300px;
152 | outline: 1px solid black;
153 | padding: 30px 10px;
154 | }
155 |
156 | .messaging-app [role='log'] hr {
157 | margin-top: 8px;
158 | margin-bottom: 8px;
159 | }
160 |
--------------------------------------------------------------------------------
/src/exercise/05.md:
--------------------------------------------------------------------------------
1 | # useImperativeHandle: scroll to top/bottom
2 |
3 | ## 📝 Your Notes
4 |
5 | Elaborate on your learnings here in `src/exercise/05.md`
6 |
7 | ## Background
8 |
9 | When we had class components, we could do stuff like this:
10 |
11 | ```javascript
12 | class MyInput extends React.Component {
13 | _inputRef = React.createRef()
14 | focusInput = () => this._inputRef.current.focus()
15 | render() {
16 | return
17 | }
18 | }
19 |
20 | class App extends React.Component {
21 | _myInputRef = React.createRef()
22 | handleClick = () => this._myInputRef.current.focusInput()
23 | render() {
24 | return (
25 |
55 |
56 |
57 |
58 | 59 |
26 |
27 |
29 | )
30 | }
31 | }
32 | ```
33 |
34 | The key I want to point out in the example here is that bit above that says:
35 | `
27 | {messages.map((message, index, array) => (
28 |
34 | )
35 | })
36 |
37 | function App() {
38 | const messageDisplayRef = React.useRef()
39 | const [messages, setMessages] = React.useState(allMessages.slice(0, 8))
40 | const addMessage = () =>
41 | messages.length < allMessages.length
42 | ? setMessages(allMessages.slice(0, messages.length + 1))
43 | : null
44 | const removeMessage = () =>
45 | messages.length > 0
46 | ? setMessages(allMessages.slice(0, messages.length - 1))
47 | : null
48 |
49 | const scrollToTop = () => messageDisplayRef.current.scrollToTop()
50 | const scrollToBottom = () => messageDisplayRef.current.scrollToBottom()
51 |
52 | return (
53 |
29 | {message.author}: {message.content}
30 | {array.length - 1 === index ? null :
} 31 |
32 | ))}
33 | } 31 |
54 |
59 |
67 | )
68 | }
69 |
70 | export default App
71 |
72 | const allMessages = [
73 | `Leia: Aren't you a little short to be a stormtrooper?`,
74 | `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
75 | `Leia: You're who?`,
76 | `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
77 | `Leia: Ben Kenobi is here! Where is he?`,
78 | `Luke: Come on!`,
79 | `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
80 | `Leia: Put that thing away! You're going to get us all killed.`,
81 | `Han: Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not going to take them long to figure out what happened to us.`,
82 | `Leia: It could be worse...`,
83 | `Han: It's worse.`,
84 | `Luke: There's something alive in here!`,
85 | `Han: That's your imagination.`,
86 | `Luke: Something just moves past my leg! Look! Did you see that?`,
87 | `Han: What?`,
88 | `Luke: Help!`,
89 | `Han: Luke! Luke! Luke!`,
90 | `Leia: Luke!`,
91 | `Leia: Luke, Luke, grab a hold of this.`,
92 | `Luke: Blast it, will you! My gun's jammed.`,
93 | `Han: Where?`,
94 | `Luke: Anywhere! Oh!!`,
95 | `Han: Luke! Luke!`,
96 | `Leia: Grab him!`,
97 | `Leia: What happened?`,
98 | `Luke: I don't know, it just let go of me and disappeared...`,
99 | `Han: I've got a very bad feeling about this.`,
100 | `Luke: The walls are moving!`,
101 | `Leia: Don't just stand there. Try to brace it with something.`,
102 | `Luke: Wait a minute!`,
103 | `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
104 | ].map((m, i) => ({id: i, author: m.split(': ')[0], content: m.split(': ')[1]}))
105 |
--------------------------------------------------------------------------------
/src/exercise/05.js:
--------------------------------------------------------------------------------
1 | // useImperativeHandle: scroll to top/bottom
2 | // http://localhost:3000/isolated/exercise/05.js
3 |
4 | import * as React from 'react'
5 |
6 | // 🐨 wrap this in a React.forwardRef and accept `ref` as the second argument
7 | function MessagesDisplay({messages}) {
8 | const containerRef = React.useRef()
9 | React.useLayoutEffect(() => {
10 | scrollToBottom()
11 | })
12 |
13 | // 💰 you're gonna want this as part of your imperative methods
14 | // function scrollToTop() {
15 | // containerRef.current.scrollTop = 0
16 | // }
17 | function scrollToBottom() {
18 | containerRef.current.scrollTop = containerRef.current.scrollHeight
19 | }
20 |
21 | // 🐨 call useImperativeHandle here with your ref and a callback function
22 | // that returns an object with scrollToTop and scrollToBottom
23 |
24 | return (
25 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
64 |
65 |
66 |
26 | {messages.map((message, index, array) => (
27 |
33 | )
34 | }
35 |
36 | function App() {
37 | const messageDisplayRef = React.useRef()
38 | const [messages, setMessages] = React.useState(allMessages.slice(0, 8))
39 | const addMessage = () =>
40 | messages.length < allMessages.length
41 | ? setMessages(allMessages.slice(0, messages.length + 1))
42 | : null
43 | const removeMessage = () =>
44 | messages.length > 0
45 | ? setMessages(allMessages.slice(0, messages.length - 1))
46 | : null
47 |
48 | const scrollToTop = () => messageDisplayRef.current.scrollToTop()
49 | const scrollToBottom = () => messageDisplayRef.current.scrollToBottom()
50 |
51 | return (
52 |
28 | {message.author}: {message.content}
29 | {array.length - 1 === index ? null :
} 30 |
31 | ))}
32 | } 30 |
53 |
58 |
66 | )
67 | }
68 |
69 | export default App
70 |
71 | const allMessages = [
72 | `Leia: Aren't you a little short to be a stormtrooper?`,
73 | `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
74 | `Leia: You're who?`,
75 | `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
76 | `Leia: Ben Kenobi is here! Where is he?`,
77 | `Luke: Come on!`,
78 | `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
79 | `Leia: Put that thing away! You're going to get us all killed.`,
80 | `Han: Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not going to take them long to figure out what happened to us.`,
81 | `Leia: It could be worse...`,
82 | `Han: It's worse.`,
83 | `Luke: There's something alive in here!`,
84 | `Han: That's your imagination.`,
85 | `Luke: Something just moves past my leg! Look! Did you see that?`,
86 | `Han: What?`,
87 | `Luke: Help!`,
88 | `Han: Luke! Luke! Luke!`,
89 | `Leia: Luke!`,
90 | `Leia: Luke, Luke, grab a hold of this.`,
91 | `Luke: Blast it, will you! My gun's jammed.`,
92 | `Han: Where?`,
93 | `Luke: Anywhere! Oh!!`,
94 | `Han: Luke! Luke!`,
95 | `Leia: Grab him!`,
96 | `Leia: What happened?`,
97 | `Luke: I don't know, it just let go of me and disappeared...`,
98 | `Han: I've got a very bad feeling about this.`,
99 | `Luke: The walls are moving!`,
100 | `Leia: Don't just stand there. Try to brace it with something.`,
101 | `Luke: Wait a minute!`,
102 | `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
103 | ].map((m, i) => ({id: i, author: m.split(': ')[0], content: m.split(': ')[1]}))
104 |
--------------------------------------------------------------------------------
/src/final/03.extra-2.js:
--------------------------------------------------------------------------------
1 | // useContext: Caching response data in context
2 | // 💯 caching in a context provider (final)
3 | // http://localhost:3000/isolated/final/03.extra-2.js
4 |
5 | // you can edit this here and look at the isolated page or you can copy/paste
6 | // this in the regular exercise file.
7 |
8 | import * as React from 'react'
9 | import {useAsync} from '../utils'
10 | import {
11 | fetchPokemon,
12 | PokemonForm,
13 | PokemonDataView,
14 | PokemonInfoFallback,
15 | PokemonErrorBoundary,
16 | } from '../pokemon'
17 |
18 | const PokemonCacheContext = React.createContext()
19 |
20 | function pokemonCacheReducer(state, action) {
21 | switch (action.type) {
22 | case 'ADD_POKEMON': {
23 | return {...state, [action.pokemonName]: action.pokemonData}
24 | }
25 | default: {
26 | throw new Error(`Unhandled action type: ${action.type}`)
27 | }
28 | }
29 | }
30 |
31 | function PokemonCacheProvider(props) {
32 | const [cache, dispatch] = React.useReducer(pokemonCacheReducer, {})
33 | return
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
63 |
64 |
65 |
85 | Previous Pokemon
86 |
99 | )
100 | }
101 |
102 | function PokemonSection({onSelect, pokemonName}) {
103 | return (
104 | -
87 | {Object.keys(cache).map(pokemonName => (
88 |
- 89 | 95 | 96 | ))} 97 |
106 |
116 |
108 | onSelect('')}
110 | resetKeys={[pokemonName]}
111 | >
112 |
114 |
115 |
133 |
135 |
137 | )
138 | }
139 |
140 | export default App
141 |
--------------------------------------------------------------------------------
/src/exercise/03.extra-2.js:
--------------------------------------------------------------------------------
1 | // useContext: Caching response data in context
2 | // 💯 caching in a context provider (exercise)
3 | // http://localhost:3000/isolated/exercise/03.extra-2.js
4 |
5 | // you can edit this here and look at the isolated page or you can copy/paste
6 | // this in the regular exercise file.
7 |
8 | import * as React from 'react'
9 | import {
10 | fetchPokemon,
11 | PokemonForm,
12 | PokemonDataView,
13 | PokemonInfoFallback,
14 | PokemonErrorBoundary,
15 | } from '../pokemon'
16 | import {useAsync} from '../utils'
17 |
18 | // 🐨 Create a PokemonCacheContext
19 |
20 | // 🐨 create a PokemonCacheProvider function
21 | // 🐨 useReducer with pokemonCacheReducer in your PokemonCacheProvider
22 | // 💰 you can grab the one that's in PokemonInfo
23 | // 🐨 return your context provider with the value assigned to what you get back from useReducer
24 | // 💰 value={[cache, dispatch]}
25 | // 💰 make sure you forward the props.children!
26 |
27 | function pokemonCacheReducer(state, action) {
28 | switch (action.type) {
29 | case 'ADD_POKEMON': {
30 | return {...state, [action.pokemonName]: action.pokemonData}
31 | }
32 | default: {
33 | throw new Error(`Unhandled action type: ${action.type}`)
34 | }
35 | }
36 | }
37 |
38 | function PokemonInfo({pokemonName}) {
39 | // 💣 remove the useReducer here (or move it up to your PokemonCacheProvider)
40 | const [cache, dispatch] = React.useReducer(pokemonCacheReducer, {})
41 | // 🐨 get the cache and dispatch from useContext with PokemonCacheContext
42 |
43 | const {data: pokemon, status, error, run, setData} = useAsync()
44 |
45 | React.useEffect(() => {
46 | if (!pokemonName) {
47 | return
48 | } else if (cache[pokemonName]) {
49 | setData(cache[pokemonName])
50 | } else {
51 | run(
52 | fetchPokemon(pokemonName).then(pokemonData => {
53 | dispatch({type: 'ADD_POKEMON', pokemonName, pokemonData})
54 | return pokemonData
55 | }),
56 | )
57 | }
58 | }, [cache, pokemonName, run, setData])
59 |
60 | if (status === 'idle') {
61 | return 'Submit a pokemon'
62 | } else if (status === 'pending') {
63 | return 135 |
76 | Previous Pokemon
77 |
90 | )
91 | }
92 |
93 | function PokemonSection({onSelect, pokemonName}) {
94 | // 🐨 wrap this in the PokemonCacheProvider so the PreviousPokemon
95 | // and PokemonInfo components have access to that context.
96 | return (
97 | -
78 | {Object.keys(cache).map(pokemonName => (
79 |
- 80 | 86 | 87 | ))} 88 |
98 |
108 | )
109 | }
110 |
111 | function App() {
112 | const [pokemonName, setPokemonName] = React.useState(null)
113 |
114 | function handleSubmit(newPokemonName) {
115 | setPokemonName(newPokemonName)
116 | }
117 |
118 | function handleSelect(newPokemonName) {
119 | setPokemonName(newPokemonName)
120 | }
121 |
122 | return (
123 |
100 | onSelect('')}
102 | resetKeys={[pokemonName]}
103 | >
104 |
106 |
107 |
124 |
126 |
128 | )
129 | }
130 |
131 | export default App
132 |
--------------------------------------------------------------------------------
/src/exercise/02.js:
--------------------------------------------------------------------------------
1 | // useCallback: custom hooks
2 | // http://localhost:3000/isolated/exercise/02.js
3 |
4 | import * as React from 'react'
5 | import {
6 | fetchPokemon,
7 | PokemonForm,
8 | PokemonDataView,
9 | PokemonInfoFallback,
10 | PokemonErrorBoundary,
11 | } from '../pokemon'
12 |
13 | // 🐨 this is going to be our generic asyncReducer
14 | function pokemonInfoReducer(state, action) {
15 | switch (action.type) {
16 | case 'pending': {
17 | // 🐨 replace "pokemon" with "data"
18 | return {status: 'pending', pokemon: null, error: null}
19 | }
20 | case 'resolved': {
21 | // 🐨 replace "pokemon" with "data" (in the action too!)
22 | return {status: 'resolved', pokemon: action.pokemon, error: null}
23 | }
24 | case 'rejected': {
25 | // 🐨 replace "pokemon" with "data"
26 | return {status: 'rejected', pokemon: null, error: action.error}
27 | }
28 | default: {
29 | throw new Error(`Unhandled action type: ${action.type}`)
30 | }
31 | }
32 | }
33 |
34 | function PokemonInfo({pokemonName}) {
35 | // 🐨 move both the useReducer and useEffect hooks to a custom hook called useAsync
36 | // here's how you use it:
37 | // const state = useAsync(
38 | // () => {
39 | // if (!pokemonName) {
40 | // return
41 | // }
42 | // return fetchPokemon(pokemonName)
43 | // },
44 | // {status: pokemonName ? 'pending' : 'idle'},
45 | // [pokemonName],
46 | // )
47 | // 🐨 so your job is to create a useAsync function that makes this work.
48 | const [state, dispatch] = React.useReducer(pokemonInfoReducer, {
49 | status: pokemonName ? 'pending' : 'idle',
50 | // 🐨 this will need to be "data" instead of "pokemon"
51 | pokemon: null,
52 | error: null,
53 | })
54 |
55 | React.useEffect(() => {
56 | // 💰 this first early-exit bit is a little tricky, so let me give you a hint:
57 | // const promise = asyncCallback()
58 | // if (!promise) {
59 | // return
60 | // }
61 | // then you can dispatch and handle the promise etc...
62 | if (!pokemonName) {
63 | return
64 | }
65 | dispatch({type: 'pending'})
66 | fetchPokemon(pokemonName).then(
67 | pokemon => {
68 | dispatch({type: 'resolved', pokemon})
69 | },
70 | error => {
71 | dispatch({type: 'rejected', error})
72 | },
73 | )
74 | // 🐨 you'll accept dependencies as an array and pass that here.
75 | // 🐨 because of limitations with ESLint, you'll need to ignore
76 | // the react-hooks/exhaustive-deps rule. We'll fix this in an extra credit.
77 | }, [pokemonName])
78 |
79 | // 🐨 this will change from "pokemon" to "data"
80 | const {pokemon, status, error} = state
81 |
82 | if (status === 'idle' || !pokemonName) {
83 | return 'Submit a pokemon'
84 | } else if (status === 'pending') {
85 | return 126 |
108 |
110 |
116 | )
117 | }
118 |
119 | function AppWithUnmountCheckbox() {
120 | const [mountApp, setMountApp] = React.useState(true)
121 | return (
122 | 110 |
111 |
112 |
114 |
115 |
123 |
131 |
132 | {mountApp ?
134 | )
135 | }
136 |
137 | export default AppWithUnmountCheckbox
138 |
--------------------------------------------------------------------------------
/src/final/02.extra-3.js:
--------------------------------------------------------------------------------
1 | // useCallback: custom hooks
2 | // 💯 make safeDispatch with useCallback, useRef, and useEffect
3 | // http://localhost:3000/isolated/final/02.extra-3.js
4 |
5 | import * as React from 'react'
6 | import {
7 | fetchPokemon,
8 | PokemonForm,
9 | PokemonDataView,
10 | PokemonInfoFallback,
11 | PokemonErrorBoundary,
12 | } from '../pokemon'
13 |
14 | function useSafeDispatch(dispatch) {
15 | const mountedRef = React.useRef(false)
16 |
17 | // to make this even more generic you should use the useLayoutEffect hook to
18 | // make sure that you are correctly setting the mountedRef.current immediately
19 | // after React updates the DOM. Even though this effect does not interact
20 | // with the dom another side effect inside a useLayoutEffect which does
21 | // interact with the dom may depend on the value being set
22 | React.useEffect(() => {
23 | mountedRef.current = true
24 | return () => {
25 | mountedRef.current = false
26 | }
27 | }, [])
28 |
29 | return React.useCallback(
30 | (...args) => (mountedRef.current ? dispatch(...args) : void 0),
31 | [dispatch],
32 | )
33 | }
34 |
35 | function asyncReducer(state, action) {
36 | switch (action.type) {
37 | case 'pending': {
38 | return {status: 'pending', data: null, error: null}
39 | }
40 | case 'resolved': {
41 | return {status: 'resolved', data: action.data, error: null}
42 | }
43 | case 'rejected': {
44 | return {status: 'rejected', data: null, error: action.error}
45 | }
46 | default: {
47 | throw new Error(`Unhandled action type: ${action.type}`)
48 | }
49 | }
50 | }
51 |
52 | function useAsync(initialState) {
53 | const [state, unsafeDispatch] = React.useReducer(asyncReducer, {
54 | status: 'idle',
55 | data: null,
56 | error: null,
57 | ...initialState,
58 | })
59 |
60 | const dispatch = useSafeDispatch(unsafeDispatch)
61 |
62 | const {data, error, status} = state
63 |
64 | const run = React.useCallback(
65 | promise => {
66 | dispatch({type: 'pending'})
67 | promise.then(
68 | data => {
69 | dispatch({type: 'resolved', data})
70 | },
71 | error => {
72 | dispatch({type: 'rejected', error})
73 | },
74 | )
75 | },
76 | [dispatch],
77 | )
78 |
79 | return {
80 | error,
81 | status,
82 | data,
83 | run,
84 | }
85 | }
86 |
87 | function PokemonInfo({pokemonName}) {
88 | const {data: pokemon, status, error, run} = useAsync({
89 | status: pokemonName ? 'pending' : 'idle',
90 | })
91 |
92 | React.useEffect(() => {
93 | if (!pokemonName) {
94 | return
95 | }
96 | run(fetchPokemon(pokemonName))
97 | }, [pokemonName, run])
98 |
99 | if (status === 'idle') {
100 | return 'Submit a pokemon'
101 | } else if (status === 'pending') {
102 | return 132 | {mountApp ?
125 |
127 |
133 | )
134 | }
135 |
136 | function AppWithUnmountCheckbox() {
137 | const [mountApp, setMountApp] = React.useState(true)
138 | return (
139 | 127 |
128 |
129 |
131 |
132 |
140 |
148 |
149 | {mountApp ?
151 | )
152 | }
153 |
154 | export default AppWithUnmountCheckbox
155 |
--------------------------------------------------------------------------------
/src/backend.js:
--------------------------------------------------------------------------------
1 | import {graphql} from '@kentcdodds/react-workshop-app/server'
2 |
3 | const pokemonApi = graphql.link('https://graphql-pokemon2.vercel.app')
4 |
5 | export const handlers = [
6 | pokemonApi.query('PokemonInfo', (req, res, ctx) => {
7 | const pokemon = allPokemon[req.variables.name.toLowerCase()]
8 | if (pokemon) {
9 | return res(ctx.status(200), ctx.data({pokemon}))
10 | } else {
11 | const pokemonNames = Object.keys(allPokemon)
12 | const randomName =
13 | pokemonNames[Math.floor(pokemonNames.length * Math.random())]
14 | return res(
15 | ctx.status(404),
16 | ctx.data({
17 | errors: [
18 | {
19 | message: `Unsupported pokemon: "${req.variables.name}". Try "${randomName}"`,
20 | },
21 | ],
22 | }),
23 | )
24 | }
25 | }),
26 | ]
27 |
28 | const allPokemon = {
29 | pikachu: {
30 | id: 'UG9rZW1vbjowMjU=',
31 | number: '025',
32 | name: 'Pikachu',
33 | image: '/img/pokemon/pikachu.jpg',
34 | attacks: {
35 | special: [
36 | {
37 | name: 'Discharge',
38 | type: 'Electric',
39 | damage: 35,
40 | },
41 | {
42 | name: 'Thunder',
43 | type: 'Electric',
44 | damage: 100,
45 | },
46 | {
47 | name: 'Thunderbolt',
48 | type: 'Electric',
49 | damage: 55,
50 | },
51 | ],
52 | },
53 | },
54 | mew: {
55 | id: 'UG9rZW1vbjoxNTE=',
56 | number: '151',
57 | image: '/img/pokemon/mew.jpg',
58 | name: 'Mew',
59 | attacks: {
60 | special: [
61 | {
62 | name: 'Dragon Pulse',
63 | type: 'Dragon',
64 | damage: 65,
65 | },
66 | {
67 | name: 'Earthquake',
68 | type: 'Ground',
69 | damage: 100,
70 | },
71 | {
72 | name: 'Fire Blast',
73 | type: 'Fire',
74 | damage: 100,
75 | },
76 | {
77 | name: 'Hurricane',
78 | type: 'Flying',
79 | damage: 80,
80 | },
81 | {
82 | name: 'Hyper Beam',
83 | type: 'Normal',
84 | damage: 120,
85 | },
86 | {
87 | name: 'Moonblast',
88 | type: 'Fairy',
89 | damage: 85,
90 | },
91 | {
92 | name: 'Psychic',
93 | type: 'Psychic',
94 | damage: 55,
95 | },
96 | {
97 | name: 'Solar Beam',
98 | type: 'Grass',
99 | damage: 120,
100 | },
101 | {
102 | name: 'Thunder',
103 | type: 'Electric',
104 | damage: 100,
105 | },
106 | ],
107 | },
108 | },
109 | mewtwo: {
110 | id: 'UG9rZW1vbjoxNTA=',
111 | number: '150',
112 | image: '/img/pokemon/mewtwo.jpg',
113 | name: 'Mewtwo',
114 | attacks: {
115 | special: [
116 | {
117 | name: 'Hyper Beam',
118 | type: 'Normal',
119 | damage: 120,
120 | },
121 | {
122 | name: 'Psychic',
123 | type: 'Psychic',
124 | damage: 55,
125 | },
126 | {
127 | name: 'Shadow Ball',
128 | type: 'Ghost',
129 | damage: 45,
130 | },
131 | ],
132 | },
133 | },
134 | ditto: {
135 | id: 'UG9rZW1vbjoxMzI=',
136 | number: '132',
137 | image: '/img/pokemon/ditto.jpg',
138 | name: 'Ditto',
139 | attacks: {
140 | special: [
141 | {
142 | name: 'Struggle',
143 | type: 'Normal',
144 | damage: 15,
145 | },
146 | ],
147 | },
148 | },
149 | charizard: {
150 | id: 'UG9rZW1vbjowMDY=',
151 | number: '006',
152 | name: 'Charizard',
153 | image: '/img/pokemon/charizard.jpg',
154 | attacks: {
155 | special: [
156 | {
157 | name: 'Dragon Claw',
158 | type: 'Dragon',
159 | damage: 35,
160 | },
161 | {
162 | name: 'Fire Blast',
163 | type: 'Fire',
164 | damage: 100,
165 | },
166 | {
167 | name: 'Flamethrower',
168 | type: 'Fire',
169 | damage: 55,
170 | },
171 | ],
172 | },
173 | },
174 | bulbasaur: {
175 | id: 'UG9rZW1vbjowMDE=',
176 | number: '001',
177 | name: 'Bulbasaur',
178 | image: '/img/pokemon/bulbasaur.jpg',
179 | attacks: {
180 | special: [
181 | {
182 | name: 'Power Whip',
183 | type: 'Grass',
184 | damage: 70,
185 | },
186 | {
187 | name: 'Seed Bomb',
188 | type: 'Grass',
189 | damage: 40,
190 | },
191 | {
192 | name: 'Sludge Bomb',
193 | type: 'Poison',
194 | damage: 55,
195 | },
196 | ],
197 | },
198 | },
199 | }
200 |
--------------------------------------------------------------------------------
/src/exercise/03.md:
--------------------------------------------------------------------------------
1 | # useContext: simple Counter
2 |
3 | ## 📝 Your Notes
4 |
5 | Elaborate on your learnings here in `src/exercise/03.md`
6 |
7 | ## Background
8 |
9 | Sharing state between components is a common problem. The best solution for this
10 | is to 📜 [lift your state](https://reactjs.org/docs/lifting-state-up.html). This
11 | requires 📜 [prop drilling](https://kentcdodds.com/blog/prop-drilling) which is
12 | not a problem, but there are some times where prop drilling can cause a real
13 | pain.
14 |
15 | To avoid this pain, we can insert some state into a section of our react tree,
16 | and then extract that state anywhere within that react tree without having to
17 | explicitly pass it everywhere. This feature is called `context`. In some ways
18 | it's like global variables, but it doesn't suffer from the same problems (and
19 | maintainability nightmares) of global variables thanks to how the API works to
20 | make the relationships explicit.
21 |
22 | Here's how you use context:
23 |
24 | ```javascript
25 | import * as React from 'react'
26 |
27 | const FooContext = React.createContext()
28 |
29 | function FooDisplay() {
30 | const foo = React.useContext(FooContext)
31 | return 149 | {mountApp ?
Foo is: {foo}
32 | }
33 |
34 | ReactDOM.render(
35 | Foo is: I am foo
41 | ```
42 |
43 | `Foo is:
`. This is because the context value would be `undefined`.
102 | In real-world scenarios, having an unexpected `undefined` value can result in
103 | errors that can be difficult to debug.
104 |
105 | In this extra credit, you need to create a custom hook that I can use like this:
106 |
107 | ```javascript
108 | const [count, setCount] = useCount()
109 | ```
110 |
111 | And if you change the `App` to this:
112 |
113 | ```javascript
114 | function App() {
115 | return (
116 |
117 |
120 | )
121 | }
122 | ```
123 |
124 | It should throw an error indicating that `useCount` must be used within a
125 | CountProvider.
126 |
127 | ### 2. 💯 caching in a context provider
128 |
129 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/03.extra-2.js)
130 |
131 | Let's try the last exercise over again with a bit more of a complex/practical
132 | example. That's right! We're back to the Pokemon info app! This time it has
133 | caching in place which is cool. So if you enter the same pokemon information,
134 | it's cached so it loads instantaneously.
135 |
136 | However, we have a requirement that we want to list all the cached pokemon in
137 | another part of the app, so we're going to use context to store the cache. This
138 | way both parts of the app which need access to the pokemon cache will have
139 | access.
140 |
141 | Because this is hard to describe in words (and because it's a completely
142 | separate example), there's a starting point for you in
143 | `./src/exercise/03.extra-2.js`.
144 |
145 | ## 🦉 Other notes
146 |
147 | `Context` also has the unique ability to be scoped to a specific section of the
148 | React component tree. A common mistake of context (and generally any
149 | "application" state) is to make it globally available anywhere in your
150 | application when it's actually only needed to be available in a part of the app
151 | (like a single page). Keeping a context value scoped to the area that needs it
152 | most has improved performance and maintainability characteristics.
153 |
154 | ## 🦉 Feedback
155 |
156 | Fill out
157 | [the feedback form](https://ws.kcd.im/?ws=Advanced%20React%20Hooks%20%F0%9F%94%A5&e=03%3A%20useContext%3A%20simple%20Counter&em=nfurlan%40alley.confurlan%40alley.co).
158 |
--------------------------------------------------------------------------------
/src/pokemon.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {ErrorBoundary} from 'react-error-boundary'
3 |
4 | const formatDate = date =>
5 | `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')} ${String(
6 | date.getSeconds(),
7 | ).padStart(2, '0')}.${String(date.getMilliseconds()).padStart(3, '0')}`
8 |
9 | // the delay argument is for faking things out a bit
10 | function fetchPokemon(name, delay = 1500) {
11 | const pokemonQuery = `
12 | query PokemonInfo($name: String) {
13 | pokemon(name: $name) {
14 | id
15 | number
16 | name
17 | image
18 | attacks {
19 | special {
20 | name
21 | type
22 | damage
23 | }
24 | }
25 | }
26 | }
27 | `
28 |
29 | return window
30 | .fetch('https://graphql-pokemon2.vercel.app/', {
31 | // learn more about this API here: https://graphql-pokemon2.vercel.app/
32 | method: 'POST',
33 | headers: {
34 | 'content-type': 'application/json;charset=UTF-8',
35 | delay: delay,
36 | },
37 | body: JSON.stringify({
38 | query: pokemonQuery,
39 | variables: {name: name.toLowerCase()},
40 | }),
41 | })
42 | .then(async response => {
43 | const {data} = await response.json()
44 | if (response.ok) {
45 | const pokemon = data?.pokemon
46 | if (pokemon) {
47 | pokemon.fetchedAt = formatDate(new Date())
48 | return pokemon
49 | } else {
50 | return Promise.reject(new Error(`No pokemon with the name "${name}"`))
51 | }
52 | } else {
53 | // handle the graphql errors
54 | const error = {
55 | message: data?.errors?.map(e => e.message).join('\n'),
56 | }
57 | return Promise.reject(error)
58 | }
59 | })
60 | }
61 |
62 | function PokemonInfoFallback({name}) {
63 | const initialName = React.useRef(name).current
64 | const fallbackPokemonData = {
65 | name: initialName,
66 | number: 'XXX',
67 | image: '/img/pokemon/fallback-pokemon.jpg',
68 | attacks: {
69 | special: [
70 | {name: 'Loading Attack 1', type: 'Type', damage: 'XX'},
71 | {name: 'Loading Attack 2', type: 'Type', damage: 'XX'},
72 | ],
73 | },
74 | fetchedAt: 'loading...',
75 | }
76 | return
82 |
86 |
91 |
92 |
103 | {pokemon.fetchedAt}
104 |
105 | )
106 | }
107 |
108 | function PokemonForm({
109 | pokemonName: externalPokemonName,
110 | initialPokemonName = externalPokemonName || '',
111 | onSubmit,
112 | }) {
113 | const [pokemonName, setPokemonName] = React.useState(initialPokemonName)
114 |
115 | // this is generally not a great idea. We're synchronizing state when it is
116 | // normally better to derive it https://kentcdodds.com/blog/dont-sync-state-derive-it
117 | // however, we're doing things this way to make it easier for the exercises
118 | // to not have to worry about the logic for this PokemonForm component.
119 | React.useEffect(() => {
120 | // note that because it's a string value, if the externalPokemonName
121 | // is the same as the one we're managing, this will not trigger a re-render
122 | if (typeof externalPokemonName === 'string') {
123 | setPokemonName(externalPokemonName)
124 | }
125 | }, [externalPokemonName])
126 |
127 | function handleChange(e) {
128 | setPokemonName(e.target.value)
129 | }
130 |
131 | function handleSubmit(e) {
132 | e.preventDefault()
133 | onSubmit(pokemonName)
134 | }
135 |
136 | function handleSelect(newPokemonName) {
137 | setPokemonName(newPokemonName)
138 | onSubmit(newPokemonName)
139 | }
140 |
141 | return (
142 |
184 | )
185 | }
186 |
187 | function ErrorFallback({error, resetErrorBoundary}) {
188 | return (
189 |
83 | 
84 |
85 | 87 | {pokemon.name} 88 | {pokemon.number} 89 |
90 |-
93 | {pokemon.attacks.special.map(attack => (
94 |
- 95 | :{' '} 96 | 97 | {attack.damage} ({attack.type}) 98 | 99 | 100 | ))} 101 |
190 | There was an error:{' '}
191 |
194 | )
195 | }
196 |
197 | function PokemonErrorBoundary(props) {
198 | return {error.message}
192 |
193 | You typed: {name}
43 |
44 | )
45 | }
46 | ```
47 |
48 | One important thing to note here is that the reducer (called `nameReducer`
49 | above) is called with two arguments:
50 |
51 | 1. the current state
52 | 2. whatever it is that the dispatch function (called `setName` above) is called
53 | with. This is often called an "action."
54 |
55 | ## Exercise
56 |
57 | Production deploys:
58 |
59 | - [Exercise](https://advanced-react-hooks.netlify.com/isolated/exercise/01.js)
60 | - [Final](https://advanced-react-hooks.netlify.com/isolated/final/01.js)
61 |
62 | We're going to start off as simple as possible with a `check the console
144 | }
145 | ```
146 |
147 | The first argument to `useCallback` is the callback you want called, the second
148 | argument is an array of dependencies which is similar to `useEffect`. When one
149 | of the dependencies changes between renders, the callback you passed in the
150 | first argument will be the one returned from `useCallback`. If they do not
151 | change, then you'll get the callback which was returned the previous time (so
152 | the callback remains the same between renders).
153 |
154 | So we only want our `asyncCallback` to change when the `pokemonName` changes.
155 | See if you can make things work like this:
156 |
157 | ```javascript
158 | // 🐨 you'll need to define asyncCallback as a value returned from React.useCallback
159 | const state = useAsync(asyncCallback, {
160 | status: pokemonName ? 'pending' : 'idle',
161 | })
162 | ```
163 |
164 | ### 2. 💯 return a memoized `run` function from useAsync
165 |
166 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/02.extra-2.js)
167 |
168 | Requiring users to provide a memoized value is fine. You can document it as part
169 | of the API and expect people to just read the docs right? lol, that's hilarious
170 | 😂 It'd be WAY better if we could redesign the API a bit so we (as the hook
171 | developers) are the ones who have to memoize the function, and the users of our
172 | hook don't have to worry about it.
173 |
174 | So see if you can redesign this a little bit by providing a (memoized) `run`
175 | function that people can call in their own `useEffect` like this:
176 |
177 | ```javascript
178 | const {data: pokemon, status, error, run} = useAsync({
179 | status: pokemonName ? 'pending' : 'idle',
180 | })
181 |
182 | React.useEffect(() => {
183 | if (!pokemonName) {
184 | return
185 | }
186 | run(fetchPokemon(pokemonName))
187 | }, [pokemonName, run])
188 | ```
189 |
190 | ### 3. 💯 make safeDispatch with useCallback, useRef, and useEffect
191 |
192 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/02.extra-3.js)
193 |
194 | **NOTICE: Things have changed slightly.** The app you're running the exercises in
195 | was changed since the videos were recorded and you can no longer see this issue
196 | by changing the exercise. All the exercises are now rendered in an iframe on the
197 | exercise pages, so when you go to a different exercise, you're effectively
198 | "closing" the page, so all JS execution for that exercise stops.
199 |
200 | So I've added a little checkbox which you can use to mount and unmount the
201 | component with ease. This has the benefit of also working on the isolated page
202 | as well. On the exercise page, you'll want to make sure that your console output
203 | is showing the output from the iframe by
204 | [selecting the right context](https://developers.google.com/web/tools/chrome-devtools/console/reference#context).
205 |
206 | I've also added a test for this one to help make sure you've got it right.
207 |
208 | Phew, ok, back to your extra credit!
209 |
210 | This one's a bit tricky, and I'm going to be intentionally vague here to give
211 | you a bit of a challenge, but consider the scenario where we fetch a pokemon,
212 | and before the request finishes, we change our mind and navigate to a different
213 | page (or uncheck the mount checkbox). In that case, the component would get
214 | removed from the page ("unmounted") and when the request finally does complete,
215 | it will call `dispatch`, but because the component has been removed from the
216 | page, we'll get this warning from React:
217 |
218 | Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.219 | 220 | The best solution to this problem would be to 221 | [cancel the request](https://developers.google.com/web/updates/2017/09/abortable-fetch), 222 | but even then, we'd have to handle the error and prevent the `dispatch` from 223 | being called for the rejected promise. 224 | 225 | So see whether you can work out a solution for preventing `dispatch` from being 226 | called if the component is unmounted. Depending on how you implement this, you 227 | might need `useRef`, `useCallback`, and `useEffect`. 228 | 229 | ## 🦉 Feedback 230 | 231 | Fill out 232 | [the feedback form](https://ws.kcd.im/?ws=Advanced%20React%20Hooks%20%F0%9F%94%A5&e=02%3A%20useCallback%3A%20custom%20hooks&em=nfurlan%40alley.confurlan%40alley.co). 233 | -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "advanced-react-hooks", 3 | "projectOwner": "kentcdodds", 4 | "repoType": "github", 5 | "files": [ 6 | "README.md" 7 | ], 8 | "imageSize": 100, 9 | "commit": false, 10 | "contributors": [ 11 | { 12 | "login": "kentcdodds", 13 | "name": "Kent C. Dodds", 14 | "avatar_url": "https://avatars.githubusercontent.com/u/1500684?v=3", 15 | "profile": "https://kentcdodds.com", 16 | "contributions": [ 17 | "code", 18 | "doc", 19 | "infra", 20 | "test" 21 | ] 22 | }, 23 | { 24 | "login": "frankcalise", 25 | "name": "Frank Calise", 26 | "avatar_url": "https://avatars0.githubusercontent.com/u/374022?v=4", 27 | "profile": "http://frankcalise.com", 28 | "contributions": [ 29 | "code" 30 | ] 31 | }, 32 | { 33 | "login": "Zara603", 34 | "name": "Zara603", 35 | "avatar_url": "https://avatars1.githubusercontent.com/u/4918423?v=4", 36 | "profile": "https://github.com/Zara603", 37 | "contributions": [ 38 | "code" 39 | ] 40 | }, 41 | { 42 | "login": "michaelfriedman", 43 | "name": "Michael Friedman", 44 | "avatar_url": "https://avatars3.githubusercontent.com/u/17555926?v=4", 45 | "profile": "https://github.com/michaelfriedman", 46 | "contributions": [ 47 | "doc" 48 | ] 49 | }, 50 | { 51 | "login": "btnwtn", 52 | "name": "Brandon Newton", 53 | "avatar_url": "https://avatars1.githubusercontent.com/u/20847518?v=4", 54 | "profile": "https://bitwise.cool", 55 | "contributions": [ 56 | "doc", 57 | "code" 58 | ] 59 | }, 60 | { 61 | "login": "JonathanBruce", 62 | "name": "Jonathan Bruce", 63 | "avatar_url": "https://avatars3.githubusercontent.com/u/1743411?v=4", 64 | "profile": "https://github.com/JonathanBruce", 65 | "contributions": [ 66 | "code" 67 | ] 68 | }, 69 | { 70 | "login": "lgandecki", 71 | "name": "Łukasz Gandecki", 72 | "avatar_url": "https://avatars1.githubusercontent.com/u/4002543?v=4", 73 | "profile": "http://team.thebrain.pro", 74 | "contributions": [ 75 | "doc" 76 | ] 77 | }, 78 | { 79 | "login": "jdorfman", 80 | "name": "Justin Dorfman", 81 | "avatar_url": "https://avatars1.githubusercontent.com/u/398230?v=4", 82 | "profile": "https://stackshare.io/jdorfman/decisions", 83 | "contributions": [ 84 | "fundingFinding" 85 | ] 86 | }, 87 | { 88 | "login": "motdde", 89 | "name": "Oluwaseun Oyebade", 90 | "avatar_url": "https://avatars1.githubusercontent.com/u/12215060?v=4", 91 | "profile": "http://motdde.com", 92 | "contributions": [ 93 | "doc" 94 | ] 95 | }, 96 | { 97 | "login": "kevscript", 98 | "name": "Kevin Ostafinski", 99 | "avatar_url": "https://avatars0.githubusercontent.com/u/28754130?v=4", 100 | "profile": "http://kevinostafinski.com", 101 | "contributions": [ 102 | "doc" 103 | ] 104 | }, 105 | { 106 | "login": "Snaptags", 107 | "name": "Markus Lasermann", 108 | "avatar_url": "https://avatars1.githubusercontent.com/u/1249745?v=4", 109 | "profile": "https://github.com/Snaptags", 110 | "contributions": [ 111 | "code", 112 | "test" 113 | ] 114 | }, 115 | { 116 | "login": "zacjones93", 117 | "name": "Zac Jones", 118 | "avatar_url": "https://avatars2.githubusercontent.com/u/6188161?v=4", 119 | "profile": "https://zacjones.io", 120 | "contributions": [ 121 | "doc" 122 | ] 123 | }, 124 | { 125 | "login": "rbusquet", 126 | "name": "Ricardo Busquet", 127 | "avatar_url": "https://avatars1.githubusercontent.com/u/7198302?v=4", 128 | "profile": "https://ricardobusquet.com", 129 | "contributions": [ 130 | "code" 131 | ] 132 | }, 133 | { 134 | "login": "kylereblora", 135 | "name": "Kyle Matthew Reblora", 136 | "avatar_url": "https://avatars2.githubusercontent.com/u/33372538?v=4", 137 | "profile": "https://kylereblora.github.io/", 138 | "contributions": [ 139 | "doc" 140 | ] 141 | }, 142 | { 143 | "login": "marcosvega91", 144 | "name": "Marco Moretti", 145 | "avatar_url": "https://avatars2.githubusercontent.com/u/5365582?v=4", 146 | "profile": "https://github.com/marcosvega91", 147 | "contributions": [ 148 | "code" 149 | ] 150 | }, 151 | { 152 | "login": "nywleswoey", 153 | "name": "Selwyn Yeow", 154 | "avatar_url": "https://avatars3.githubusercontent.com/u/28249994?v=4", 155 | "profile": "https://github.com/nywleswoey", 156 | "contributions": [ 157 | "doc" 158 | ] 159 | }, 160 | { 161 | "login": "gugol2", 162 | "name": "Watchmaker", 163 | "avatar_url": "https://avatars0.githubusercontent.com/u/4933016?v=4", 164 | "profile": "https://github.com/gugol2", 165 | "contributions": [ 166 | "code", 167 | "doc" 168 | ] 169 | }, 170 | { 171 | "login": "fonstack", 172 | "name": "Carlos Fontes", 173 | "avatar_url": "https://avatars3.githubusercontent.com/u/35873992?v=4", 174 | "profile": "https://fonstack.dev/", 175 | "contributions": [ 176 | "bug" 177 | ] 178 | }, 179 | { 180 | "login": "PritamSangani", 181 | "name": "Pritam Sangani", 182 | "avatar_url": "https://avatars3.githubusercontent.com/u/22857896?v=4", 183 | "profile": "https://www.linkedin.com/in/pritamsangani/", 184 | "contributions": [ 185 | "code" 186 | ] 187 | }, 188 | { 189 | "login": "wbeuil", 190 | "name": "William BEUIL", 191 | "avatar_url": "https://avatars1.githubusercontent.com/u/8110579?v=4", 192 | "profile": "http://wbeuil.com", 193 | "contributions": [ 194 | "doc" 195 | ] 196 | }, 197 | { 198 | "login": "emzoumpo", 199 | "name": "Emmanouil Zoumpoulakis", 200 | "avatar_url": "https://avatars2.githubusercontent.com/u/2103443?v=4", 201 | "profile": "https://github.com/emzoumpo", 202 | "contributions": [ 203 | "doc" 204 | ] 205 | }, 206 | { 207 | "login": "Aprillion", 208 | "name": "Peter Hozák", 209 | "avatar_url": "https://avatars0.githubusercontent.com/u/1087670?v=4", 210 | "profile": "http://peter.hozak.info/", 211 | "contributions": [ 212 | "code" 213 | ] 214 | }, 215 | { 216 | "login": "joemaffei", 217 | "name": "Joe Maffei", 218 | "avatar_url": "https://avatars1.githubusercontent.com/u/9068746?v=4", 219 | "profile": "https://github.com/joemaffei", 220 | "contributions": [ 221 | "doc" 222 | ] 223 | }, 224 | { 225 | "login": "jmagrippis", 226 | "name": "Johnny Magrippis", 227 | "avatar_url": "https://avatars0.githubusercontent.com/u/3502800?v=4", 228 | "profile": "https://magrippis.com", 229 | "contributions": [ 230 | "code" 231 | ] 232 | }, 233 | { 234 | "login": "rphuber", 235 | "name": "Ryan Huber", 236 | "avatar_url": "https://avatars0.githubusercontent.com/u/8245890?v=4", 237 | "profile": "http://blog.rphuber.com", 238 | "contributions": [ 239 | "doc", 240 | "code" 241 | ] 242 | }, 243 | { 244 | "login": "dominicchapman", 245 | "name": "Dominic Chapman", 246 | "avatar_url": "https://avatars2.githubusercontent.com/u/7607007?v=4", 247 | "profile": "https://dominicchapman.com", 248 | "contributions": [ 249 | "doc" 250 | ] 251 | }, 252 | { 253 | "login": "imalbert", 254 | "name": "imalbert", 255 | "avatar_url": "https://avatars1.githubusercontent.com/u/12537973?v=4", 256 | "profile": "https://github.com/imalbert", 257 | "contributions": [ 258 | "doc" 259 | ] 260 | }, 261 | { 262 | "login": "Huuums", 263 | "name": "Dennis Collon", 264 | "avatar_url": "https://avatars1.githubusercontent.com/u/9745322?v=4", 265 | "profile": "https://github.com/Huuums", 266 | "contributions": [ 267 | "doc" 268 | ] 269 | }, 270 | { 271 | "login": "jrozbicki", 272 | "name": "Jakub Różbicki", 273 | "avatar_url": "https://avatars3.githubusercontent.com/u/35103924?v=4", 274 | "profile": "https://github.com/jrozbicki", 275 | "contributions": [ 276 | "doc" 277 | ] 278 | }, 279 | { 280 | "login": "vasilii-kovalev", 281 | "name": "Vasilii Kovalev", 282 | "avatar_url": "https://avatars0.githubusercontent.com/u/10310491?v=4", 283 | "profile": "https://vk.com/vasilii_kovalev", 284 | "contributions": [ 285 | "bug" 286 | ] 287 | }, 288 | { 289 | "login": "alexfertel", 290 | "name": "Alexander Gonzalez", 291 | "avatar_url": "https://avatars3.githubusercontent.com/u/22298999?v=4", 292 | "profile": "http://alexfertel.netlify.app", 293 | "contributions": [ 294 | "code" 295 | ] 296 | }, 297 | { 298 | "login": "DaleSeo", 299 | "name": "Dale Seo", 300 | "avatar_url": "https://avatars1.githubusercontent.com/u/5466341?v=4", 301 | "profile": "https://www.daleseo.com", 302 | "contributions": [ 303 | "doc", 304 | "test" 305 | ] 306 | }, 307 | { 308 | "login": "MichaelDeBoey", 309 | "name": "Michaël De Boey", 310 | "avatar_url": "https://avatars3.githubusercontent.com/u/6643991?v=4", 311 | "profile": "https://michaeldeboey.be", 312 | "contributions": [ 313 | "code" 314 | ] 315 | }, 316 | { 317 | "login": "thegoodsheppard", 318 | "name": "Greg Sheppard", 319 | "avatar_url": "https://avatars1.githubusercontent.com/u/13774377?v=4", 320 | "profile": "https://github.com/thegoodsheppard", 321 | "contributions": [ 322 | "doc" 323 | ] 324 | }, 325 | { 326 | "login": "bobbywarner", 327 | "name": "Bobby Warner", 328 | "avatar_url": "https://avatars0.githubusercontent.com/u/554961?v=4", 329 | "profile": "http://bobbywarner.com", 330 | "contributions": [ 331 | "code" 332 | ] 333 | }, 334 | { 335 | "login": "jwm0", 336 | "name": "Jakub Majorek", 337 | "avatar_url": "https://avatars0.githubusercontent.com/u/28310983?v=4", 338 | "profile": "https://github.com/jwm0", 339 | "contributions": [ 340 | "code" 341 | ] 342 | }, 343 | { 344 | "login": "suddenlyGiovanni", 345 | "name": "Giovanni Ravalico", 346 | "avatar_url": "https://avatars2.githubusercontent.com/u/15946771?v=4", 347 | "profile": "https://suddenlyGiovanni.dev", 348 | "contributions": [ 349 | "ideas" 350 | ] 351 | }, 352 | { 353 | "login": "jsberlanga", 354 | "name": "Julio Soto", 355 | "avatar_url": "https://avatars.githubusercontent.com/u/32543746?v=4", 356 | "profile": "https://juliosoto.dev", 357 | "contributions": [ 358 | "code" 359 | ] 360 | }, 361 | { 362 | "login": "jmtes", 363 | "name": "Juno Tesoro", 364 | "avatar_url": "https://avatars.githubusercontent.com/u/38450133?v=4", 365 | "profile": "http://jmtes.github.io", 366 | "contributions": [ 367 | "doc" 368 | ] 369 | }, 370 | { 371 | "login": "aosante", 372 | "name": "Andrés Osante", 373 | "avatar_url": "https://avatars.githubusercontent.com/u/37124700?v=4", 374 | "profile": "http://www.andresosante.com", 375 | "contributions": [ 376 | "code" 377 | ] 378 | }, 379 | { 380 | "login": "IanVS", 381 | "name": "Ian VanSchooten", 382 | "avatar_url": "https://avatars.githubusercontent.com/u/4616705?v=4", 383 | "profile": "https://github.com/IanVS", 384 | "contributions": [ 385 | "test" 386 | ] 387 | } 388 | ], 389 | "contributorsPerLine": 7, 390 | "repoHost": "https://github.com", 391 | "skipCi": true 392 | } 393 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 
19 |
20 |
21 |
22 | 🔥 Advanced React Hooks 🚀 EpicReact.Dev
3 | 4 | Learn the more advanced React hooks and different patterns to enable great 5 | developer APIs for custom hooks. 6 | 7 |8 | We’ll look at some of the more advanced hooks and ways they can be used to 9 | optimize your components and custom hooks. We’ll also look at several 10 | patterns you can follow to make custom hooks that provide great APIs for 11 | developers to be productive building applications. 12 |
13 | 14 | 15 |
19 |
20 | 23 | 24 | 25 | [![Build Status][build-badge]][build] 26 | [![All Contributors][all-contributors-badge]](#contributors) 27 | [![GPL 3.0 License][license-badge]][license] 28 | [![Code of Conduct][coc-badge]][coc] 29 | 30 | 31 | ## Prerequisites 32 | 33 | - You should be experienced with `useState`, `useEffect`, and `useRef`. 34 | 35 | ## Additional Resources 36 | 37 | - Videos 38 | [Getting Closure on React Hooks by Shawn Wang](https://www.youtube.com/watch?v=KJP1E-Y-xyo) 39 | (26 minutes) 40 | 41 | ## System Requirements 42 | 43 | - [git][git] v2.13 or greater 44 | - [NodeJS][node] `12 || 14 || 15 || 16` 45 | - [npm][npm] v6 or greater 46 | 47 | All of these must be available in your `PATH`. To verify things are set up 48 | properly, you can run this: 49 | 50 | ```shell 51 | git --version 52 | node --version 53 | npm --version 54 | ``` 55 | 56 | If you have trouble with any of these, learn more about the PATH environment 57 | variable and how to fix it here for [windows][win-path] or 58 | [mac/linux][mac-path]. 59 | 60 | ## Setup 61 | 62 | * Create a [fork](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) of 63 | the Alley for of the React Fundamentals repo into your personal GitHub account. 64 | * After you've made sure to have the correct things (and versions) installed, you 65 | should be able to just run a few commands to get set up: 66 | 67 | ``` 68 | git clone https://github.com/[username]/advanced-react-hooks.git 69 | cd advanced-react-hooks 70 | node setup 71 | ``` 72 | 73 | This may take a few minutes. **It will ask you for your email.** This is 74 | optional and just automatically adds your email to the links in the project to 75 | make filling out some forms easier. 76 | 77 | If you get any errors, please read through them and see if you can find out what 78 | the problem is. If you can't work it out on your own then please [file an 79 | issue][issue] and provide _all_ the output from the commands you ran (even if 80 | it's a lot). 81 | 82 | If you can't get the setup script to work, then just make sure you have the 83 | right versions of the requirements listed above, and run the following commands: 84 | 85 | ``` 86 | npm install 87 | npm run validate 88 | ``` 89 | 90 | If you are still unable to fix issues and you know how to use Docker 🐳 you can 91 | setup the project with the following command: 92 | 93 | ``` 94 | docker-compose up 95 | ``` 96 | 97 | It's recommended you run everything locally in the same environment you work in 98 | every day, but if you're having issues getting things set up, you can also set 99 | this up using [GitHub Codespaces](https://github.com/features/codespaces) 100 | ([video demo](https://www.youtube.com/watch?v=gCoVJm3hGk4)) or 101 | [Codesandbox](https://codesandbox.io/s/github/kentcdodds/advanced-react-hooks). 102 | 103 | ## Running the app 104 | 105 | To get the app up and running (and really see if it worked), run: 106 | 107 | ```shell 108 | npm start 109 | ``` 110 | 111 | This should start up your browser. If you're familiar, this is a standard 112 | [react-scripts](https://create-react-app.dev/) application. 113 | 114 | You can also open 115 | [the deployment of the app on Netlify](https://advanced-react-hooks.netlify.app/). 116 | 117 | ## Running the tests 118 | 119 | ```shell 120 | npm test 121 | ``` 122 | 123 | This will start [Jest](https://jestjs.io/) in watch mode. Read the output and 124 | play around with it. The tests are there to help you reach the final version, 125 | however _sometimes_ you can accomplish the task and the tests still fail if you 126 | implement things differently than I do in my solution, so don't look to them as 127 | a complete authority. 128 | 129 | ### Exercises 130 | * Exercises are located in `src/exercise` 131 | * Exercise answer keys (final code) are located in `src/final` 132 | * When you first start the app you’ll be taken to a menu of all the exercises. 133 | * Click on either the title of the exercise or the “exercise” button to proceed to a specific exercise’s content. 134 | * Each exercise has some text to read in addition to a source code file (generally either an HTML or JS file). Exercise readmes will be visible on the left hand side of the app. 135 | * Changes made to exercise files (html, js) will be hot-reloaded in the exercise app and rendered on the right side of your screen. 136 | * Once you’ve completed an exercise, you can run `npm test` at the root of the repo to determine if you’ve done the exercise correctly. see previous section in this doc about tests. 137 | * In addition, you can double check your code against the final version in `src/final` and/or by using the “final” button on the exercise menu screen. 138 | * There’s an area in each exercise’s markdown file for you to take personal notes. 139 | * Create a separate PR for each exercise you complete (or, if you want to break things down further, for each extra credit as well). 140 | * Be sure to note which repo you're merging into as your PR base, as it may be either this repo or Kent C. Dodds' repo by default (you want to merge into your _own_ fork). 141 | 142 | - `src/exercise/00.md`: Background, Exercise Instructions, Extra Credit 143 | - `src/exercise/00.js`: Exercise with Emoji helpers 144 | - `src/__tests__/00.js`: Tests 145 | - `src/final/00.js`: Final version 146 | - `src/final/00.extra-0.js`: Final version of extra credit 147 | 148 | The purpose of the exercise is **not** for you to work through all the material. 149 | It's intended to get your brain thinking about the right questions to ask me as 150 | _I_ walk through the material. 151 | 152 | ### Helpful Emoji 🐨 💰 💯 📝 🦉 📜 💣 💪 🏁 👨💼 🚨 153 | 154 | Each exercise has comments in it to help you get through the exercise. These fun 155 | emoji characters are here to help you. 156 | 157 | - **Kody the Koala** 🐨 will tell you when there's something specific you should 158 | do version 159 | - **Marty the Money Bag** 💰 will give you specific tips (and sometimes code) 160 | along the way 161 | - **Hannah the Hundred** 💯 will give you extra challenges you can do if you 162 | finish the exercises early. 163 | - **Nancy the Notepad** 📝 will encourage you to take notes on what you're 164 | learning 165 | - **Olivia the Owl** 🦉 will give you useful tidbits/best practice notes and a 166 | link for elaboration and feedback. 167 | - **Dominic the Document** 📜 will give you links to useful documentation 168 | - **Berry the Bomb** 💣 will be hanging around anywhere you need to blow stuff 169 | up (delete code) 170 | - **Matthew the Muscle** 💪 will indicate that you're working with an exercise 171 | - **Chuck the Checkered Flag** 🏁 will indicate that you're working with a final 172 | - **Peter the Product Manager** 👨💼 helps us know what our users want 173 | - **Alfred the Alert** 🚨 will occasionally show up in the test failures with 174 | potential explanations for why the tests are failing. 175 | 176 | ## Contributors 177 | 178 | Thanks goes to these wonderful people 179 | ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 180 | 181 | 182 | 183 | 184 |
 Kent C. Dodds 💻 📖 🚇 ⚠️ |
187 |  Frank Calise 💻 |
188 |  Zara603 💻 |
189 |  Michael Friedman 📖 |
190 |  Brandon Newton 📖 💻 |
191 |  Jonathan Bruce 💻 |
192 |  Łukasz Gandecki 📖 |
193 |
 Justin Dorfman 🔍 |
196 |  Oluwaseun Oyebade 📖 |
197 |  Kevin Ostafinski 📖 |
198 |  Markus Lasermann 💻 ⚠️ |
199 |  Zac Jones 📖 |
200 |  Ricardo Busquet 💻 |
201 |  Kyle Matthew Reblora 📖 |
202 |
 Marco Moretti 💻 |
205 |  Selwyn Yeow 📖 |
206 |  Watchmaker 💻 📖 |
207 |  Carlos Fontes 🐛 |
208 |  Pritam Sangani 💻 |
209 |  William BEUIL 📖 |
210 |  Emmanouil Zoumpoulakis 📖 |
211 |
 Peter Hozák 💻 |
214 |  Joe Maffei 📖 |
215 |  Johnny Magrippis 💻 |
216 |  Ryan Huber 📖 💻 |
217 |  Dominic Chapman 📖 |
218 |  imalbert 📖 |
219 |  Dennis Collon 📖 |
220 |
 Jakub Różbicki 📖 |
223 |  Vasilii Kovalev 🐛 |
224 |  Alexander Gonzalez 💻 |
225 |  Dale Seo 📖 ⚠️ |
226 |  Michaël De Boey 💻 |
227 |  Greg Sheppard 📖 |
228 |  Bobby Warner 💻 |
229 |
 Jakub Majorek 💻 |
232 |  Giovanni Ravalico 🤔 |
233 |  Julio Soto 💻 |
234 |  Juno Tesoro 📖 |
235 |  Andrés Osante 💻 |
236 |  Ian VanSchooten ⚠️ |
237 |