= {}
57 | return function memoized(arg: ArgType) {
58 | if (cache[arg] === undefined) {
59 | cache[arg] = cb(arg)
60 | }
61 | return cache[arg]
62 | }
63 | }
64 |
65 | const addOne = memoize((num: number) => num + 1)
66 | const getDog = memoize((name: string) => new Dog(name))
67 | ```
68 |
69 | Our abstraction only supports one argument, if you want to make it work for any
70 | type/number of arguments, knock yourself out.
71 |
72 | ### Memoization in React
73 |
74 | Luckily, in React we don't have to implement a memoization abstraction. They
75 | made two for us! `useMemo` and `useCallback`. For more on this read:
76 | [Memoization and React](https://epicreact.dev/memoization-and-react).
77 |
78 | You know the dependency list of `useEffect`? Here's a quick refresher:
79 |
80 | ```javascript
81 | React.useEffect(() => {
82 | window.localStorage.setItem('count', count)
83 | }, [count]) // <-- that's the dependency list
84 | ```
85 |
86 | Remember that the dependency list is how React knows whether to call your
87 | callback (and if you don't provide one then React will call your callback every
88 | render). It does this to ensure that the side effect you're performing in the
89 | callback doesn't get out of sync with the state of the application.
90 |
91 | But what happens if I use a function in my callback?
92 |
93 | ```javascript
94 | const updateLocalStorage = () => window.localStorage.setItem('count', count)
95 | React.useEffect(() => {
96 | updateLocalStorage()
97 | }, []) // <-- what goes in that dependency list?
98 | ```
99 |
100 | We could just put the `count` in the dependency list and that would
101 | actually/accidentally work, but what would happen if one day someone were to
102 | change `updateLocalStorage`?
103 |
104 | ```diff
105 | - const updateLocalStorage = () => window.localStorage.setItem('count', count)
106 | + const updateLocalStorage = () => window.localStorage.setItem(key, count)
107 | ```
108 |
109 | Would we remember to update the dependency list to include the `key`? Hopefully
110 | we would. But this can be a pain to keep track of dependencies. Especially if
111 | the function that we're using in our `useEffect` callback is coming to us from
112 | props (in the case of a custom component) or arguments (in the case of a custom
113 | hook).
114 |
115 | Instead, it would be much easier if we could just put the function itself in the
116 | dependency list:
117 |
118 | ```javascript
119 | const updateLocalStorage = () => window.localStorage.setItem('count', count)
120 | React.useEffect(() => {
121 | updateLocalStorage()
122 | }, [updateLocalStorage]) // <-- function as a dependency
123 | ```
124 |
125 | The problem with doing that is that it will trigger the `useEffect` to run every
126 | render. This is because `updateLocalStorage` is defined inside the component
127 | function body. So it's re-initialized every render. Which means it's brand new
128 | every render. Which means it changes every render. Which means... you guessed
129 | it, our `useEffect` callback will be called every render!
130 |
131 | **This is the problem `useCallback` solves**. And here's how you solve it
132 |
133 | ```javascript
134 | const updateLocalStorage = React.useCallback(
135 | () => window.localStorage.setItem('count', count),
136 | [count], // <-- yup! That's a dependency list!
137 | )
138 | React.useEffect(() => {
139 | updateLocalStorage()
140 | }, [updateLocalStorage])
141 | ```
142 |
143 | What that does is we pass React a function and React gives that same function
144 | back to us... Sounds kinda useless right? Imagine:
145 |
146 | ```javascript
147 | // this is not how React actually implements this function. We're just imagining!
148 | function useCallback(callback) {
149 | return callback
150 | }
151 | ```
152 |
153 | Uhhh... But there's a catch! On subsequent renders, if the elements in the
154 | dependency list are unchanged, instead of giving the same function back that we
155 | give to it, React will give us the same function it gave us last time. So
156 | imagine:
157 |
158 | ```javascript
159 | // this is not how React actually implements this function. We're just imagining!
160 | let lastCallback
161 | function useCallback(callback, deps) {
162 | if (depsChanged(deps)) {
163 | lastCallback = callback
164 | return callback
165 | } else {
166 | return lastCallback
167 | }
168 | }
169 | ```
170 |
171 | So while we still create a new function every render (to pass to `useCallback`),
172 | React only gives us the new one if the dependency list changes.
173 |
174 | In this exercise, we're going to be using `useCallback`, but `useCallback` is
175 | just a shortcut to using `useMemo` for functions:
176 |
177 | ```typescript
178 | // the useMemo version:
179 | const updateLocalStorage = React.useMemo(
180 | // useCallback saves us from this annoying double-arrow function thing:
181 | () => () => window.localStorage.setItem('count', count),
182 | [count],
183 | )
184 |
185 | // the useCallback version
186 | const updateLocalStorage = React.useCallback(
187 | () => window.localStorage.setItem('count', count),
188 | [count],
189 | )
190 | ```
191 |
192 | 🦉 A common question with this is: "Why don't we just wrap every function in
193 | `useCallback`?" You can read about this in my blog post
194 | [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback).
195 |
196 | 🦉 And if the concept of a "closure" is new or confusing to you, then
197 | [give this a read](https://mdn.io/closure). (Closures are one of the reasons
198 | it's important to keep dependency lists correct.)
199 |
200 | ## Exercise
201 |
202 | Production deploys:
203 |
204 | - [Exercise](https://advanced-react-hooks.netlify.com/isolated/exercise/02.js)
205 | - [Final](https://advanced-react-hooks.netlify.com/isolated/final/02.js)
206 |
207 | **People tend to find this exercise more difficult,** so I strongly advise
208 | spending some time understanding how the code works before making any changes!
209 |
210 | Also, one thing to keep in mind is that React hooks are a great foundation upon
211 | which to build libraries and many have been built. For that reason, you don't
212 | often need to go this deep into making custom hooks. So if you find this one
213 | isn't clicking for you, know that you _are_ learning and when you _do_ face a
214 | situation when you need to use this knowledge, you'll be able to come back and
215 | it will click right into place.
216 |
217 | 👨💼 Peter the Product Manager told us that we've got more features coming our way
218 | that will require managing async state. We've already got some code for our
219 | pokemon lookup feature (if you've gone through the "React Hooks" workshop
220 | already, then this should be familiar, if not, spend some time playing with the
221 | app to get up to speed with what we're dealing with here). We're going to
222 | refactor out the async logic so we can reuse this in other areas of the app.
223 |
224 | **So, your job is** to extract the logic from the `PokemonInfo` component into a
225 | custom and generic `useAsync` hook. In the process you'll find you need to do
226 | some fancy things with dependencies (dependency arrays are the biggest challenge
227 | to deal with when making custom hooks).
228 |
229 | NOTE: In this part of the exercise, we don't need `useCallback`. We'll add it in
230 | the extra credits. It's important that you work on this refactor first so you
231 | can appreciate the value `useCallback` provides in certain circumstances.
232 |
233 | ## Extra Credit
234 |
235 | ### 1. 💯 use useCallback to empower the user to customize memoization
236 |
237 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/02.extra-1.js)
238 |
239 | Unfortunately, the ESLint plugin is unable to determine whether the
240 | `dependencies` argument is a valid argument for `useEffect` which is a shame,
241 | and normally I'd say just ignore it and move on. But, there's another solution
242 | to this problem which I think is probably better.
243 |
244 | Instead of accepting `dependencies` to `useAsync`, why don't we just treat the
245 | `asyncCallback` as a dependency? Any time `asyncCallback` changes, we know that
246 | we should call it again. The problem is that because our `asyncCallback` depends
247 | on the `pokemonName` which comes from props, it has to be defined within the
248 | body of the component, which means that it will be defined on every render which
249 | means it will be new every render. This is where `React.useCallback` comes in!
250 |
251 | Here's another example of the `React.useCallback` API:
252 |
253 | ```javascript
254 | function ConsoleGreeting(props) {
255 | const greet = React.useCallback(
256 | greeting => console.log(`${greeting} ${props.name}`),
257 | [props.name],
258 | )
259 |
260 | React.useEffect(() => {
261 | const helloGreeting = 'Hello'
262 | greet(helloGreeting)
263 | }, [greet])
264 | return check the console
265 | }
266 | ```
267 |
268 | The first argument to `useCallback` is the callback you want called, the second
269 | argument is an array of dependencies which is similar to `useEffect`. When one
270 | of the dependencies changes between renders, the callback you passed in the
271 | first argument will be the one returned from `useCallback`. If they do not
272 | change, then you'll get the callback which was returned the previous time (so
273 | the callback remains the same between renders).
274 |
275 | So we only want our `asyncCallback` to change when the `pokemonName` changes.
276 | See if you can make things work like this:
277 |
278 | ```javascript
279 | // 🐨 you'll need to wrap asyncCallback in React.useCallback
280 | function asyncCallback() {
281 | if (!pokemonName) {
282 | return
283 | }
284 | return fetchPokemon(pokemonName)
285 | }
286 |
287 | // 🐨 you'll need to update useAsync to remove the dependencies and list the
288 | // async callback as a dependency.
289 | const state = useAsync(asyncCallback)
290 | ```
291 |
292 | ### 2. 💯 return a memoized `run` function from useAsync
293 |
294 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/02.extra-2.js)
295 |
296 | Requiring users to provide a memoized value is fine. You can document it as part
297 | of the API and expect people to just read the docs right? lol, that's hilarious
298 | 😂 It'd be WAY better if we could redesign the API a bit so we (as the hook
299 | developers) are the ones who have to memoize the function, and the users of our
300 | hook don't have to worry about it.
301 |
302 | So see if you can redesign this a little bit by providing a (memoized) `run`
303 | function that people can call in their own `useEffect` like this:
304 |
305 | ```javascript
306 | // 💰 destructuring this here now because it just felt weird to call this
307 | // "state" still when it's also returning a function called "run" 🙃
308 | const {
309 | data: pokemon,
310 | status,
311 | error,
312 | run,
313 | } = useAsync({status: pokemonName ? 'pending' : 'idle'})
314 |
315 | React.useEffect(() => {
316 | if (!pokemonName) {
317 | return
318 | }
319 | // 💰 note the absence of `await` here. We're literally passing the promise
320 | // to `run` so `useAsync` can attach its own `.then` handler on it to keep
321 | // track of the state of the promise.
322 | const pokemonPromise = fetchPokemon(pokemonName)
323 | run(pokemonPromise)
324 | }, [pokemonName, run])
325 | ```
326 |
327 | ### 3. 💯 make safeDispatch with useCallback, useRef, and useEffect
328 |
329 | [Production deploy](https://advanced-react-hooks.netlify.com/isolated/final/02.extra-3.js)
330 |
331 | **NOTICE: Things have changed.** React 18 has since [deprecated
332 | the warning](https://github.com/facebook/react/pull/22114) highlighted in this
333 | exercise. This extra credit has been left here in-case you are **curious only**. You
334 | **should not** expect to be able to reproduce the scenario as described in the exercise.
335 |
336 | Phew, ok, back to your extra credit!
337 |
338 | This one's a bit tricky, and I'm going to be intentionally vague here to give
339 | you a bit of a challenge, but consider the scenario where we fetch a pokemon,
340 | and before the request finishes, we change our mind and navigate to a different
341 | page (or uncheck the mount checkbox). In that case, the component would get
342 | removed from the page ("unmounted") and when the request finally does complete,
343 | it will call `dispatch`, but because the component has been removed from the
344 | page, we'll get this warning from React:
345 |
346 | ```text
347 | 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.
348 | ```
349 |
350 | The best solution to this problem would be to
351 | [cancel the request](https://developers.google.com/web/updates/2017/09/abortable-fetch),
352 | but even then, we'd have to handle the error and prevent the `dispatch` from
353 | being called for the rejected promise.
354 |
355 | So see whether you can work out a solution for preventing `dispatch` from being
356 | called if the component is unmounted. Depending on how you implement this, you
357 | might need `useRef`, `useCallback`, and `useEffect`.
358 |
359 | ## 🦉 Other notes
360 |
361 | ### `useEffect` and `useCallback`
362 |
363 | The use case for `useCallback` in the exercise is a perfect example of the types
364 | of problems `useCallback` is intended to solve. However the examples in these
365 | instructions are intentionally contrived. You can simplify things a great deal
366 | by _not_ extracting code from `useEffect` into functions that you then have to
367 | memoize with `useCallback`. Read more about this here:
368 | [Myths about useEffect](https://epicreact.dev/myths-about-useeffect).
369 |
370 | ### `useCallback` use cases
371 |
372 | The entire purpose of `useCallback` is to memoize a callback for use in
373 | dependency lists and props on memoized components (via `React.memo`, which you
374 | can learn more about from the performance workshop). The _only_ time it's useful
375 | to use `useCallback` is when the function you're memoizing is used in one of
376 | those two situations.
377 |
378 | ## 🦉 Feedback
379 |
380 | Fill out
381 | [the feedback form](https://ws.kcd.im/?ws=Advanced%20React%20Hooks%20%F0%9F%94%A5&e=02%3A%20useCallback%3A%20custom%20hooks&em=).
382 |
--------------------------------------------------------------------------------
/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
76 | Previous Pokemon
77 |
78 | {Object.keys(cache).map(pokemonName => (
79 |
80 | onSelect(pokemonName)}
83 | >
84 | {pokemonName}
85 |
86 |
87 | ))}
88 |
89 |
98 |
99 |
100 |
onSelect('')}
102 | resetKeys={[pokemonName]}
103 | >
104 |
106 |
107 |
{`The current count is ${count}`}
18 | }
19 |
20 | function Counter() {
21 | // 🐨 get the setCount from useContext with the CountContext
22 | const setCount = () => {}
23 | const increment = () => setCount(c => c + 1)
24 | return Increment count
25 | }
26 |
27 | function App() {
28 | return (
29 |
30 | {/*
31 | 🐨 wrap these two components in the CountProvider so they can access
32 | the CountContext value
33 | */}
34 |
37 | )
38 | }
39 |
40 | export default App
41 |
--------------------------------------------------------------------------------
/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://react.dev/learn/sharing-state-between-components). 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 Foo is: {foo}
32 | }
33 |
34 | ReactDOM.render(
35 |
36 | ,
38 | document.getElementById('root'),
39 | )
40 | // renders 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` may only be used from within a (child of 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=).
158 |
--------------------------------------------------------------------------------
/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 |
15 | {messages.map((message, index, array) => (
16 |
17 | {message.author} : {message.content}
18 | {array.length - 1 === index ? null :
20 | ))}
21 |
54 |
55 | add message
56 | remove message
57 |
58 |
59 |
60 |
61 |
26 | {messages.map((message, index, array) => (
27 |
28 | {message.author} : {message.content}
29 | {array.length - 1 === index ? null :
31 | ))}
32 |
53 |
54 | add message
55 | remove message
56 |
57 |
58 |
59 | scroll to top
60 |
61 |
62 |
63 | scroll to bottom
64 |
65 |
26 | Focus on the input
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 | `
40 | }
41 |
42 | function App() {
43 | return {count}
13 | }
14 |
15 | function Usage() {
16 | return {count}
16 | }
17 |
18 | function App() {
19 | return {count}
20 | }
21 |
22 | function App() {
23 | return {count}
29 | }
30 |
31 | function App() {
32 | return {count}
12 | }
13 |
14 | function App() {
15 | return Submit a pokemon
72 | case 'pending':
73 | return
111 |
112 |
119 |
120 | {mountApp ?
: null}
121 |
Submit a pokemon
82 | case 'pending':
83 | return
121 |
122 |
129 |
130 | {mountApp ?
: null}
131 |
Submit a pokemon
107 | case 'pending':
108 | return
146 |
147 |
154 |
155 | {mountApp ?
: null}
156 |
Submit a pokemon
76 | case 'pending':
77 | return
115 |
116 |
123 |
124 | {mountApp ?
: null}
125 |
{`The current count is ${count}`}
26 | }
27 |
28 | function Counter() {
29 | const [, setCount] = useCount()
30 | const increment = () => setCount(c => c + 1)
31 | return Increment count
32 | }
33 |
34 | function App() {
35 | return (
36 |
37 |
38 |
41 |
42 | )
43 | }
44 |
45 | export default App
46 |
--------------------------------------------------------------------------------
/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
86 | Previous Pokemon
87 |
88 | {Object.keys(cache).map(pokemonName => (
89 |
90 | onSelect(pokemonName)}
93 | >
94 | {pokemonName}
95 |
96 |
97 | ))}
98 |
99 |
106 |
107 |
108 |
109 |
onSelect('')}
111 | resetKeys={[pokemonName]}
112 | >
113 |
115 |
116 |
118 | )
119 | }
120 |
121 | function App() {
122 | const [pokemonName, setPokemonName] = React.useState(null)
123 |
124 | function handleSubmit(newPokemonName) {
125 | setPokemonName(newPokemonName)
126 | }
127 |
128 | function handleSelect(newPokemonName) {
129 | setPokemonName(newPokemonName)
130 | }
131 |
132 | return (
133 |
138 | )
139 | }
140 |
141 | export default App
142 |
--------------------------------------------------------------------------------
/src/final/03.js:
--------------------------------------------------------------------------------
1 | // useContext: simple Counter
2 | // http://localhost:3000/isolated/final/03.js
3 |
4 | import * as React from 'react'
5 |
6 | const CountContext = React.createContext()
7 |
8 | function CountProvider(props) {
9 | const [count, setCount] = React.useState(0)
10 | const value = [count, setCount]
11 | // could also do it like this:
12 | // const value = React.useState(0)
13 | return {`The current count is ${count}`}
19 | }
20 |
21 | function Counter() {
22 | const [, setCount] = React.useContext(CountContext)
23 | const increment = () => setCount(c => c + 1)
24 | return Increment count
25 | }
26 |
27 | function App() {
28 | return (
29 |
30 |
31 |
34 |
35 | )
36 | }
37 |
38 | export default App
39 |
--------------------------------------------------------------------------------
/src/final/04.js:
--------------------------------------------------------------------------------
1 | // useLayoutEffect: auto-scrolling textarea
2 | // http://localhost:3000/isolated/final/04.js
3 |
4 | import * as React from 'react'
5 |
6 | function MessagesDisplay({messages}) {
7 | const containerRef = React.useRef()
8 | React.useLayoutEffect(() => {
9 | containerRef.current.scrollTop = containerRef.current.scrollHeight
10 | })
11 |
12 | return (
13 |
14 | {messages.map((message, index, array) => (
15 |
16 | {message.author} : {message.content}
17 | {array.length - 1 === index ? null :
19 | ))}
20 |
53 |
54 | add message
55 | remove message
56 |
57 |
58 |
59 |
60 |
27 | {messages.map((message, index, array) => (
28 |
29 | {message.author} : {message.content}
30 | {array.length - 1 === index ? null :
32 | ))}
33 |
54 |
55 | add message
56 | remove message
57 |
58 |
59 |
60 | scroll to top
61 |
62 |
63 |
64 | scroll to bottom
65 |
66 |
42 | }
43 |
44 | function App() {
45 | return
39 | }
40 |
41 | function App() {
42 | return
82 |
83 |
84 |
85 |
86 |
87 | {pokemon.name}
88 | {pokemon.number}
89 |
90 |
91 |
92 |
93 | {pokemon.attacks.special.map(attack => (
94 |
95 | {attack.name} :{' '}
96 |
97 | {attack.damage} ({attack.type})
98 |
99 |
100 | ))}
101 |
102 |
103 |
{pokemon.fetchedAt}
104 |
190 | There was an error:{' '}
191 |
{error.message}
192 |
Try again
193 |
19 |
20 | 
