add videos

kentcdodds · kentcdodds · commit 2105af5292fa · 2024-08-26T11:23:33.000-06:00
diff --git a/exercises/01.use-reducer/01.problem.new-state/README.mdx b/exercises/01.use-reducer/01.problem.new-state/README.mdx
@@ -1,4 +1,6 @@
-# new state
+# New state
+
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/new-state" />
 
 👨‍💼 Our users want a counter component and it's working fine, but Kellie 🧝‍♂️ has
 said we can improve the implementation using `useReducer` (actually,
diff --git a/exercises/01.use-reducer/01.solution.new-state/README.mdx b/exercises/01.use-reducer/01.solution.new-state/README.mdx
@@ -1,3 +1,5 @@
-# new state
+# New state
+
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/new-state/solution" />
 
 👨‍💼 Great first step. Let's keep iterating.
diff --git a/exercises/01.use-reducer/02.problem.previous-state/README.mdx b/exercises/01.use-reducer/02.problem.previous-state/README.mdx
@@ -1,5 +1,7 @@
 # Previous State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/previous-state" />
+
 👨‍💼 We want to change things a bit to have this API:
 
 ```tsx
diff --git a/exercises/01.use-reducer/02.solution.previous-state/README.mdx b/exercises/01.use-reducer/02.solution.previous-state/README.mdx
@@ -1,4 +1,6 @@
 # Previous State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/previous-state/solution" />
+
 👨‍💼 Great, now you should have a good handle on how calling the `dispatch`
 function with an argument sends that argument to your reducer. You have control!
diff --git a/exercises/01.use-reducer/03.problem.object/README.mdx b/exercises/01.use-reducer/03.problem.object/README.mdx
@@ -1,5 +1,7 @@
 # State Object
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/state-object" />
+
 👨‍💼 Back in the day, we had `this.setState` from class components? We're going to
 make the state updater (`dispatch` function) behave in a similar way by changing
 our `state` to an object (`{count: 0}`) and then calling the state updater with
diff --git a/exercises/01.use-reducer/03.solution.object/README.mdx b/exercises/01.use-reducer/03.solution.object/README.mdx
@@ -1,3 +1,5 @@
 # State Object
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/state-object/solution" />
+
 👨‍💼 Great! Hopefully you're starting to get the hang of this API!
diff --git a/exercises/01.use-reducer/04.problem.function/README.mdx b/exercises/01.use-reducer/04.problem.function/README.mdx
@@ -1,5 +1,7 @@
 # Action Function
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/action-function" />
+
 👨‍💼 `this.setState` from class components can also accept a function. So let's
 add support for that with our simulated `setState` function. See if you can
 figure out how to make your reducer support both the object as in the last step
diff --git a/exercises/01.use-reducer/04.solution.function/README.mdx b/exercises/01.use-reducer/04.solution.function/README.mdx
@@ -1,3 +1,5 @@
 # Action Function
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/action-function/solution" />
+
 👨‍💼 Great work! You're doing awesome making this as dynamic as possible.
diff --git a/exercises/01.use-reducer/05.problem.traditional/README.mdx b/exercises/01.use-reducer/05.problem.traditional/README.mdx
@@ -1,5 +1,7 @@
 # Traditional Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/traditional-reducer" />
+
 👨‍💼 Now it's time to get to the actual convention for reducers in React apps.
 
 Update your reducer so I can do this:
diff --git a/exercises/01.use-reducer/05.solution.traditional/README.mdx b/exercises/01.use-reducer/05.solution.traditional/README.mdx
@@ -1,4 +1,6 @@
 # Traditional Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/traditional-reducer/solution" />
+
 👨‍💼 Great work! This is how we typically use the `useReducer` API conventionally
 and it's kinda nice for complex state management.
diff --git a/exercises/01.use-reducer/06.problem.tic-tac-toe/README.mdx b/exercises/01.use-reducer/06.problem.tic-tac-toe/README.mdx
@@ -1,5 +1,7 @@
 # Real World
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/real-world" />
+
 👨‍💼 Let's try our hand at using `useReducer` for something a little more real.
 We'll be refactoring the `useState` out of our tic-tac-toe game to use
 `useReducer` instead.
diff --git a/exercises/01.use-reducer/06.solution.tic-tac-toe/README.mdx b/exercises/01.use-reducer/06.solution.tic-tac-toe/README.mdx
@@ -1,4 +1,6 @@
 # Real World
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/real-world/solution" />
+
 👨‍💼 Great! The game functions the same, but the state changes are encapsulated in
 the reducer which makes it easier to manage and test.
diff --git a/exercises/01.use-reducer/FINISHED.mdx b/exercises/01.use-reducer/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Advanced State Management
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-advanced-state-management" />
+
 👨‍💼 Great work! You've now explored the `useReducer` API pretty well and you
 should feel comfortable using it going forward.
diff --git a/exercises/01.use-reducer/README.mdx b/exercises/01.use-reducer/README.mdx
@@ -1,5 +1,7 @@
 # Advanced State Management
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-advanced-state-management-v2" />
+
 React's `useState` hook can get you a really long way with React state
 management. That said, sometimes you want to separate the state logic from the
 components that make the state changes. In addition, if you have multiple
diff --git a/exercises/02.state-optimization/01.problem.optimize/README.mdx b/exercises/02.state-optimization/01.problem.optimize/README.mdx
@@ -1,5 +1,7 @@
 # Optimize state updates
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/optimize-state-updates" />
+
 {/* prettier-ignore */}
 <callout-info>
 We're going to be working with the URL, so you'll want to pull this one up in
diff --git a/exercises/02.state-optimization/01.solution.optimize/README.mdx b/exercises/02.state-optimization/01.solution.optimize/README.mdx
@@ -1,4 +1,6 @@
 # Optimize state updates
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/optimize-state-updates/solution" />
+
 👨‍💼 Great! It's nice to know that with a simple check we can avoid triggering an
 unnecessary state update and improve performance a bit.
diff --git a/exercises/02.state-optimization/FINISHED.mdx b/exercises/02.state-optimization/FINISHED.mdx
@@ -1,5 +1,7 @@
 # State Optimization
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-state-optimization" />
+
 👨‍💼 Great! Now you know how to prevent unnecessary state changes that trigger
 rerenders. Good work.
 
diff --git a/exercises/02.state-optimization/README.mdx b/exercises/02.state-optimization/README.mdx
@@ -1,5 +1,7 @@
 # State Optimization
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-state-optimization" />
+
 If you set state to the exact value it already is set to, React will not bother
 triggering a re-render of your components because it knows nothing has changed.
 
diff --git a/exercises/03.custom-hooks/01.problem.function/README.mdx b/exercises/03.custom-hooks/01.problem.function/README.mdx
@@ -1,5 +1,7 @@
 # Hook Function
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/hook-function" />
+
 👨‍💼 We now want to create a reusable `useSearchParams` function which will handle
 the search params for us generally so we can use that logic in other components.
 
diff --git a/exercises/03.custom-hooks/01.solution.function/README.mdx b/exercises/03.custom-hooks/01.solution.function/README.mdx
@@ -1,3 +1,5 @@
 # Hook Function
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/hook-function/solution" />
+
 👨‍💼 Great job! You've made a custom hook!
diff --git a/exercises/03.custom-hooks/02.problem.callback/README.mdx b/exercises/03.custom-hooks/02.problem.callback/README.mdx
@@ -1,5 +1,7 @@
 # useCallback
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/usecallback" />
+
 👨‍💼 We only call the `setSearchParams` function inside event handlers, so we
 don't have any problems, but we're making a reusable hook and we want to make
 certain people don't have problems if they need to use it in a `useEffect` or
diff --git a/exercises/03.custom-hooks/02.solution.callback/README.mdx b/exercises/03.custom-hooks/02.solution.callback/README.mdx
@@ -1,4 +1,6 @@
 # useCallback
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/usecallback/solution" />
+
 👨‍💼 Great job! Now we have a pretty good reusable hook for anyone who wants to
 control the search params!
diff --git a/exercises/03.custom-hooks/FINISHED.mdx b/exercises/03.custom-hooks/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Custom Hooks
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-custom-hooks" />
+
 👨‍💼 Great job!
 
 🦉 Remember,
diff --git a/exercises/03.custom-hooks/README.mdx b/exercises/03.custom-hooks/README.mdx
@@ -1,5 +1,7 @@
 # Custom Hooks
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-custom-hooks" />
+
 > [Custom hooks are functions that use other hooks.](https://twitter.com/kentcdodds/status/1763633880349987151)
 
 That's it. That's the entire idea behind custom hooks. So...
diff --git a/exercises/04.context/01.problem.provider/README.mdx b/exercises/04.context/01.problem.provider/README.mdx
@@ -1,5 +1,7 @@
 # Context Provider
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/context-provider" />
+
 🧝‍♂️ I was <PrevDiffLink>refactoring things</PrevDiffLink> a bit and decided we
 shouldn't need to pass the `query` and `setSearchParams` as props. Instead I
 just wanted to call `useSearchParams` in each of the components that need them
diff --git a/exercises/04.context/01.solution.provider/README.mdx b/exercises/04.context/01.solution.provider/README.mdx
@@ -1,5 +1,7 @@
 # Context Provider
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/context-provider/solution" />
+
 👨‍💼 Great! Now we've got a context provider so all the components can reference
 the same state for our search params. Next let's improve this more by making
 a hook for it and dealing with an issue with the default value.
diff --git a/exercises/04.context/02.problem.hook/README.mdx b/exercises/04.context/02.problem.hook/README.mdx
@@ -1,5 +1,7 @@
 # Context Hook
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/context-hook" />
+
 🧝‍♂️ I was playing around with the app and I realized that we have a default value
 for our context provider. So I thought maybe we
 could <PrevDiffLink>remove the context</PrevDiffLink> provider. Unfortunately
diff --git a/exercises/04.context/02.solution.hook/README.mdx b/exercises/04.context/02.solution.hook/README.mdx
@@ -1,5 +1,7 @@
 # Context Hook
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/context-hook/solution" />
+
 👨‍💼 Great job!
 
 🦉 There are definitely cases where a default value for context makes sense, but
diff --git a/exercises/04.context/FINISHED.mdx b/exercises/04.context/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Shared Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-shared-context" />
+
 👨‍💼 Great job! You now know how to properly use context to share state across
 parts of the application. This should serve you well.
diff --git a/exercises/04.context/README.mdx b/exercises/04.context/README.mdx
@@ -1,5 +1,7 @@
 # Shared Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-shared-context" />
+
 Let's say you have the following custom hook:
 
 ```tsx
diff --git a/exercises/05.portals/01.problem.create/README.mdx b/exercises/05.portals/01.problem.create/README.mdx
@@ -1,5 +1,7 @@
 # createPortal
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/createportal" />
+
 👨‍💼 Some of our users find the heart icon to be unclear and would like to have a
 tooltip that explains what it's for.
 
diff --git a/exercises/05.portals/01.solution.create/README.mdx b/exercises/05.portals/01.solution.create/README.mdx
@@ -1,3 +1,5 @@
 # createPortal
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/createportal/solution" />
+
 👨‍💼 Great job! That tooltip works much better now. Our users will be thrilled!
diff --git a/exercises/05.portals/FINISHED.mdx b/exercises/05.portals/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Portals
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-portals" />
+
 👨‍💼 Nice and quick on, but useful tool in your React toolbelt!
diff --git a/exercises/05.portals/README.mdx b/exercises/05.portals/README.mdx
@@ -1,5 +1,7 @@
 # Portals
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-portals" />
+
 There are a variety of UI patterns that require a component render some part of
 its UI that appears outside of the component's normal DOM hierarchy. For
 example, a modal dialog might need to render its contents at the root of the
diff --git a/exercises/06.layout-computation/01.problem.layout-effect/README.mdx b/exercises/06.layout-computation/01.problem.layout-effect/README.mdx
@@ -1,5 +1,7 @@
 # useLayoutEffect
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/uselayouteffect" />
+
 👨‍💼 Our tooltip is great, but we do need to make measurements when we display it.
 We do this in a `useEffect` hook now with code like this:
 
diff --git a/exercises/06.layout-computation/01.solution.layout-effect/README.mdx b/exercises/06.layout-computation/01.solution.layout-effect/README.mdx
@@ -1,5 +1,7 @@
 # useLayoutEffect
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/uselayouteffect/solution" />
+
 👨‍💼 Have you ever heard of the mechanic who charged $200 when all he did was
 tighten a screw? The customer was outraged and asked for an itemized bill. The
 mechanic sent him an invoice that read:
diff --git a/exercises/06.layout-computation/FINISHED.mdx b/exercises/06.layout-computation/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Layout Computation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-layout-computation" />
+
 👨‍💼 Hey... You're awesome. 😎
diff --git a/exercises/06.layout-computation/README.mdx b/exercises/06.layout-computation/README.mdx
@@ -1,5 +1,7 @@
 # Layout Computation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-layout-computation" />
+
 Sometimes you need to compute the layout of some UI before it is actually
 displayed. This is often necessary if the size, position, or location of your UI
 depends on the size, position, or location of the other elements on the page or
diff --git a/exercises/07.imperative-handle/01.problem.ref/README.mdx b/exercises/07.imperative-handle/01.problem.ref/README.mdx
@@ -1,5 +1,7 @@
 # useImperativeHandle
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/useimperativehandle" />
+
 👨‍💼 We've got a new thing for you to work on.
 
 🧝‍♂️ I've put together a `Scrollable` component which is a wrapper around a `div`
diff --git a/exercises/07.imperative-handle/01.solution.ref/README.mdx b/exercises/07.imperative-handle/01.solution.ref/README.mdx
@@ -1,4 +1,6 @@
 # useImperativeHandle
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/useimperativehandle/solution" />
+
 👨‍💼 This is one hook that you don't use often, but you definitely will run into
 it at some point so it's a good one to keep in your back pocket.
diff --git a/exercises/07.imperative-handle/FINISHED.mdx b/exercises/07.imperative-handle/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Imperative Handles
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-imperative-handles" />
+
 👨‍💼 Hooray! You did it!
diff --git a/exercises/07.imperative-handle/README.mdx b/exercises/07.imperative-handle/README.mdx
@@ -1,5 +1,7 @@
 # Imperative Handles
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-imperative-handles" />
+
 Sometimes you need to expose a method to the parent component that allows the
 parent to imperatively interact with the child component. This is done using
 a `ref` which you get from the `useRef` hook. You'll recall that the `useRef`
diff --git a/exercises/08.focus/01.problem.flush-sync/README.mdx b/exercises/08.focus/01.problem.flush-sync/README.mdx
@@ -1,5 +1,7 @@
 # flushSync
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/flushsync" />
+
 🧝‍♂️ I've put together a new component we need. It's called `<EditableText />` and
 it allows users to edit a piece of text inline. We display it in a button and
 when the user clicks it, the button turns into a text input. When the user
diff --git a/exercises/08.focus/01.solution.flush-sync/README.mdx b/exercises/08.focus/01.solution.flush-sync/README.mdx
@@ -1,3 +1,5 @@
 # flushSync
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/flushsync/solution" />
+
 👨‍💼 Awesome job. That's a mighty fine UX!
diff --git a/exercises/08.focus/FINISHED.mdx b/exercises/08.focus/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Focus Management
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-focus-management" />
+
 👨‍💼 It's important to consider users of keyboards, both those with disabilities
 who rely on them as well as power users who prefer to use the keyboard over the
 mouse. Good work!
diff --git a/exercises/08.focus/README.mdx b/exercises/08.focus/README.mdx
@@ -1,5 +1,7 @@
 # Focus Management
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-focus-management" />
+
 Helping the user's focus stay on the right place is a key part of the user
 experience. This is especially important for users who rely on screen readers or
 keyboard navigation. But even able users can benefit from a well-thought focus
diff --git a/exercises/09.sync-external/01.problem.sub/README.mdx b/exercises/09.sync-external/01.problem.sub/README.mdx
@@ -1,5 +1,7 @@
 # useSyncExternalStore
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore" />
+
 🦉 When you have a design that needs to be responsive, you use
 [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 to change the layout of the page based on the size of the screen. Media queries
diff --git a/exercises/09.sync-external/01.solution.sub/README.mdx b/exercises/09.sync-external/01.solution.sub/README.mdx
@@ -1,3 +1,5 @@
 # useSyncExternalStore
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore/solution" />
+
 👨‍💼 Great work! Our users will now know whether they're on a narrow screen 🤡
diff --git a/exercises/09.sync-external/02.problem.util/README.mdx b/exercises/09.sync-external/02.problem.util/README.mdx
@@ -1,5 +1,7 @@
 # Make Store Utility
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility" />
+
 👨‍💼 We want to make this utility generally useful so we can use it for any media
 query. So please stick most of our logic in a `makeMediaQueryStore` function
 and have that return a custom hook people can use to keep track of the current
diff --git a/exercises/09.sync-external/02.solution.util/README.mdx b/exercises/09.sync-external/02.solution.util/README.mdx
@@ -1,4 +1,6 @@
 # Make Store Utility
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility/solution" />
+
 👨‍💼 Great! With that we now have a reusable utility and can use this to subscribe
 to any media query!
diff --git a/exercises/09.sync-external/03.problem.ssr/README.mdx b/exercises/09.sync-external/03.problem.ssr/README.mdx
@@ -1,5 +1,7 @@
 # Handling Server Rendering
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering" />
+
 👨‍💼 We don't currently do any server rendering, but in the future we may want to
 and this requires some special handling with `useSyncExternalStore`.
 
diff --git a/exercises/09.sync-external/03.solution.ssr/README.mdx b/exercises/09.sync-external/03.solution.ssr/README.mdx
@@ -1,5 +1,7 @@
 # Handling Server Rendering
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering/solution" />
+
 👨‍💼 Great work! You now know how to properly handle server rendering of something
 we don't know until the client-render when it comes to an external store like
 this.
diff --git a/exercises/09.sync-external/FINISHED.mdx b/exercises/09.sync-external/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Sync External State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-sync-external-state" />
+
 👨‍💼 Great work! You now know how to integrate React with external bits of
 changing state. Well done!
diff --git a/exercises/09.sync-external/README.mdx b/exercises/09.sync-external/README.mdx
diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
diff --git a/exercises/README.mdx b/exercises/README.mdx
