Learn the more advanced React hooks and different patterns to enable great
developer APIs for custom hooks.
@@ -10,11 +10,18 @@
patterns you can follow to make custom hooks that provide great APIs for
developers to be productive building applications.
+
@@ -23,7 +30,6 @@
[![Build Status][build-badge]][build]
-[![All Contributors][all-contributors-badge]](#contributors)
[![GPL 3.0 License][license-badge]][license]
[![Code of Conduct][coc-badge]][coc]
@@ -32,17 +38,18 @@
- You should be experienced with `useState`, `useEffect`, and `useRef`.
-## Additional Resources
+## Pre-workshop Resources
-- Videos
- [Getting Closure on React Hooks by Shawn Wang](https://www.youtube.com/watch?v=KJP1E-Y-xyo)
- (26 minutes)
+Here are some resources you can read before taking the workshop to get you up to
+speed on some of the tools and concepts we'll be covering:
+
+- TODO: add resources
## System Requirements
-- [git][git] v2.13 or greater
-- [NodeJS][node] `12 || 14 || 15 || 16 || 17`
-- [npm][npm] v6 or greater
+- [git][git] v2.18 or greater
+- [NodeJS][node] v18 or greater
+- [npm][npm] v8 or greater
All of these must be available in your `PATH`. To verify things are set up
properly, you can run this:
@@ -59,215 +66,39 @@ variable and how to fix it here for [windows][win-path] or
## Setup
-> If you want to commit and push your work as you go, you'll want to
-> [fork](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo)
-> first and then clone your fork rather than this repo directly.
+This is a pretty large project (it's actually many apps in one) so it can take
+several minutes to get everything set up the first time. Please have a strong
+network connection before running the setup and grab a snack.
-After you've made sure to have the correct things (and versions) installed, you
-should be able to just run a few commands to get set up:
+Follow these steps to get this set up:
-```
-git clone https://github.com/kentcdodds/advanced-react-hooks.git
+```sh nonumber
+git clone --depth 1 https://github.com/epicweb-dev/advanced-react-hooks.git
cd advanced-react-hooks
-node setup
-```
-
-This may take a few minutes. **It will ask you for your email.** This is
-optional and just automatically adds your email to the links in the project to
-make filling out some forms easier.
-
-If you get any errors, please read through them and see if you can find out what
-the problem is. If you can't work it out on your own then please [file an
-issue][issue] and provide _all_ the output from the commands you ran (even if
-it's a lot).
-
-If you can't get the setup script to work, then just make sure you have the
-right versions of the requirements listed above, and run the following commands:
-
-```
-npm install
-npm run validate
-```
-
-If you are still unable to fix issues and you know how to use Docker 🐳 you can
-setup the project with the following command:
-
-```
-docker-compose up
-```
-
-It's recommended you run everything locally in the same environment you work in
-every day, but if you're having issues getting things set up, you can also set
-this up using [GitHub Codespaces](https://github.com/features/codespaces)
-([video demo](https://www.youtube.com/watch?v=gCoVJm3hGk4)) or
-[Codesandbox](https://codesandbox.io/s/github/kentcdodds/advanced-react-hooks).
-
-## Running the app
-
-To get the app up and running (and really see if it worked), run:
-
-```shell
-npm start
+npm run setup
```
-This should start up your browser. If you're familiar, this is a standard
-[react-scripts](https://create-react-app.dev/) application.
-
-You can also open
-[the deployment of the app on Netlify](https://advanced-react-hooks.netlify.app/).
-
-## Running the tests
-
-```shell
-npm test
-```
-
-This will start [Jest](https://jestjs.io/) in watch mode. Read the output and
-play around with it. The tests are there to help you reach the final version,
-however _sometimes_ you can accomplish the task and the tests still fail if you
-implement things differently than I do in my solution, so don't look to them as
-a complete authority.
-
-### Exercises
-
-- `src/exercise/00.md`: Background, Exercise Instructions, Extra Credit
-- `src/exercise/00.js`: Exercise with Emoji helpers
-- `src/__tests__/00.js`: Tests
-- `src/final/00.js`: Final version
-- `src/final/00.extra-0.js`: Final version of extra credit
-
-The purpose of the exercise is **not** for you to work through all the material.
-It's intended to get your brain thinking about the right questions to ask me as
-_I_ walk through the material.
-
-### Helpful Emoji 🐨 💰 💯 📝 🦉 📜 💣 💪 🏁 👨💼 🚨
-
-Each exercise has comments in it to help you get through the exercise. These fun
-emoji characters are here to help you.
-
-- **Kody the Koala** 🐨 will tell you when there's something specific you should
- do
-- **Marty the Money Bag** 💰 will give you specific tips (and sometimes code)
- along the way
-- **Hannah the Hundred** 💯 will give you extra challenges you can do if you
- finish the exercises early.
-- **Nancy the Notepad** 📝 will encourage you to take notes on what you're
- learning
-- **Olivia the Owl** 🦉 will give you useful tidbits/best practice notes and a
- link for elaboration and feedback.
-- **Dominic the Document** 📜 will give you links to useful documentation
-- **Berry the Bomb** 💣 will be hanging around anywhere you need to blow stuff
- up (delete code)
-- **Matthew the Muscle** 💪 will indicate that you're working with an exercise
-- **Chuck the Checkered Flag** 🏁 will indicate that you're working with a final
-- **Peter the Product Manager** 👨💼 helps us know what our users want
-- **Alfred the Alert** 🚨 will occasionally show up in the test failures with
- potential explanations for why the tests are failing.
-
-## Contributors
-
-Thanks goes to these wonderful people
-([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
-
-
-
-
-
+ )
+}
diff --git a/exercises/06.layout-effect/01.solution/tooltip.tsx b/exercises/06.layout-effect/01.solution/tooltip.tsx
new file mode 100644
index 00000000..817b1226
--- /dev/null
+++ b/exercises/06.layout-effect/01.solution/tooltip.tsx
@@ -0,0 +1,116 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+type Position = {
+ left: number
+ top: number
+ right: number
+ bottom: number
+}
+
+export default function Tooltip({
+ children,
+ targetRect,
+}: {
+ children: React.ReactNode
+ targetRect: Position | null
+}) {
+ const ref = useRef(null)
+ const [tooltipHeight, setTooltipHeight] = useState(0)
+
+ useLayoutEffect(() => {
+ const rect = ref.current?.getBoundingClientRect()
+ if (!rect) return
+ const { height } = rect
+ setTooltipHeight(height)
+ }, [])
+
+ let tooltipX = 0
+ let tooltipY = 0
+ if (targetRect !== null) {
+ tooltipX = targetRect.left
+ tooltipY = targetRect.top - tooltipHeight
+ if (tooltipY < 0) {
+ tooltipY = targetRect.bottom
+ }
+
+ tooltipX += window.scrollX
+ tooltipY += window.scrollY
+ }
+
+ // This artificially slows down rendering
+ let now = performance.now()
+ while (performance.now() - now < 100) {
+ // Do nothing for a bit...
+ }
+
+ return createPortal(
+
+ {children}
+ ,
+ document.body,
+ )
+}
+
+function TooltipContainer({
+ children,
+ x,
+ y,
+ contentRef,
+}: {
+ children: React.ReactNode
+ x: number
+ y: number
+ contentRef: React.RefObject
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export function ButtonWithTooltip({
+ tooltipContent,
+ ...rest
+}: React.DetailedHTMLProps<
+ React.ButtonHTMLAttributes,
+ HTMLButtonElement
+> & { tooltipContent: React.ReactNode }) {
+ const [targetRect, setTargetRect] = useState(null)
+ const buttonRef = useRef(null)
+
+ function displayTooltip() {
+ const rect = buttonRef.current?.getBoundingClientRect()
+ if (!rect) return
+ setTargetRect({
+ left: rect.left,
+ top: rect.top,
+ right: rect.right,
+ bottom: rect.bottom,
+ })
+ }
+
+ const hideTooltip = () => setTargetRect(null)
+
+ return (
+ <>
+
+ {targetRect ? (
+ {tooltipContent}
+ ) : null}
+
+ )
+}
diff --git a/exercises/06.layout-effect/README.mdx b/exercises/06.layout-effect/README.mdx
new file mode 100644
index 00000000..9ea9af1d
--- /dev/null
+++ b/exercises/06.layout-effect/README.mdx
@@ -0,0 +1,3 @@
+# Layout Computation
+
+📜 Parts of this exercise was lifted from [the React docs](https://react.dev/reference/react/useLayoutEffect#measuring-layout-before-the-browser-repaints-the-screen)
diff --git a/exercises/07.imperative-handle/01.problem.ref/README.mdx b/exercises/07.imperative-handle/01.problem.ref/README.mdx
new file mode 100644
index 00000000..b9182353
--- /dev/null
+++ b/exercises/07.imperative-handle/01.problem.ref/README.mdx
@@ -0,0 +1 @@
+# useImperativeHandle
diff --git a/exercises/07.imperative-handle/01.problem.ref/index.css b/exercises/07.imperative-handle/01.problem.ref/index.css
new file mode 100644
index 00000000..27b86d00
--- /dev/null
+++ b/exercises/07.imperative-handle/01.problem.ref/index.css
@@ -0,0 +1,18 @@
+.messaging-app {
+ max-width: 350px;
+ margin: auto;
+}
+
+.messaging-app [role='log'] {
+ margin: auto;
+ height: 300px;
+ overflow-y: scroll;
+ width: 300px;
+ outline: 1px solid black;
+ padding: 30px 10px;
+}
+
+.messaging-app [role='log'] hr {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
diff --git a/exercises/07.imperative-handle/01.problem.ref/index.tsx b/exercises/07.imperative-handle/01.problem.ref/index.tsx
new file mode 100644
index 00000000..c6207216
--- /dev/null
+++ b/exercises/07.imperative-handle/01.problem.ref/index.tsx
@@ -0,0 +1,88 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { allMessages } from './messages'
+
+// 💰 this'll be handy
+// type ScrollableImperativeAPI = {
+// scrollToTop: () => void
+// scrollToBottom: () => void
+// }
+
+// 🐨 wrap this in a forwardRef and accept `ref` as the second argument
+function Scrollable({ children }: { children: React.ReactNode }) {
+ const containerRef = useRef(null)
+
+ useLayoutEffect(() => {
+ scrollToBottom()
+ })
+
+ // 💰 you're gonna want this as part of your imperative methods
+ // function scrollToTop() {
+ // if (!containerRef.current) return
+ // containerRef.current.scrollTop = 0
+ // }
+
+ function scrollToBottom() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = containerRef.current.scrollHeight
+ }
+
+ // 🐨 call useImperativeHandle here with your ref and a callback function
+ // that returns an object with scrollToTop and scrollToBottom
+
+ return (
+
+ {children}
+
+ )
+}
+
+function App() {
+ // 🐨 create a scrollableRef with useRef that is a MessagesImperativeAPI type
+ const [messages, setMessages] = useState(allMessages.slice(0, 8))
+ function addMessage() {
+ if (messages.length < allMessages.length) {
+ setMessages(allMessages.slice(0, messages.length + 1))
+ }
+ }
+ function removeMessage() {
+ if (messages.length > 0) {
+ setMessages(allMessages.slice(0, messages.length - 1))
+ }
+ }
+
+ // 🐨 make this function call the scrollToTop function on the ref
+ const scrollToTop = () => {}
+
+ // 🐨 make this function call the scrollToBottom function on the ref
+ const scrollToBottom = () => {}
+
+ return (
+
+ )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render()
diff --git a/exercises/07.imperative-handle/01.problem.ref/messages.tsx b/exercises/07.imperative-handle/01.problem.ref/messages.tsx
new file mode 100644
index 00000000..e0c4a55b
--- /dev/null
+++ b/exercises/07.imperative-handle/01.problem.ref/messages.tsx
@@ -0,0 +1,39 @@
+export type Message = { id: string; author: string; content: string }
+
+export const allMessages: Array = [
+ `Leia: Aren't you a little short to be a stormtrooper?`,
+ `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
+ `Leia: You're who?`,
+ `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
+ `Leia: Ben Kenobi is here! Where is he?`,
+ `Luke: Come on!`,
+ `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
+ `Leia: Put that thing away! You're going to get us all killed.`,
+ `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.`,
+ `Leia: It could be worse...`,
+ `Han: It's worse.`,
+ `Luke: There's something alive in here!`,
+ `Han: That's your imagination.`,
+ `Luke: Something just moves past my leg! Look! Did you see that?`,
+ `Han: What?`,
+ `Luke: Help!`,
+ `Han: Luke! Luke! Luke!`,
+ `Leia: Luke!`,
+ `Leia: Luke, Luke, grab a hold of this.`,
+ `Luke: Blast it, will you! My gun's jammed.`,
+ `Han: Where?`,
+ `Luke: Anywhere! Oh!!`,
+ `Han: Luke! Luke!`,
+ `Leia: Grab him!`,
+ `Leia: What happened?`,
+ `Luke: I don't know, it just let go of me and disappeared...`,
+ `Han: I've got a very bad feeling about this.`,
+ `Luke: The walls are moving!`,
+ `Leia: Don't just stand there. Try to brace it with something.`,
+ `Luke: Wait a minute!`,
+ `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
+].map((m, i) => ({
+ id: String(i),
+ author: m.split(': ')[0],
+ content: m.split(': ')[1],
+}))
diff --git a/exercises/07.imperative-handle/01.solution.ref/README.mdx b/exercises/07.imperative-handle/01.solution.ref/README.mdx
new file mode 100644
index 00000000..b9182353
--- /dev/null
+++ b/exercises/07.imperative-handle/01.solution.ref/README.mdx
@@ -0,0 +1 @@
+# useImperativeHandle
diff --git a/exercises/07.imperative-handle/01.solution.ref/index.css b/exercises/07.imperative-handle/01.solution.ref/index.css
new file mode 100644
index 00000000..27b86d00
--- /dev/null
+++ b/exercises/07.imperative-handle/01.solution.ref/index.css
@@ -0,0 +1,18 @@
+.messaging-app {
+ max-width: 350px;
+ margin: auto;
+}
+
+.messaging-app [role='log'] {
+ margin: auto;
+ height: 300px;
+ overflow-y: scroll;
+ width: 300px;
+ outline: 1px solid black;
+ padding: 30px 10px;
+}
+
+.messaging-app [role='log'] hr {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
diff --git a/exercises/07.imperative-handle/01.solution.ref/index.tsx b/exercises/07.imperative-handle/01.solution.ref/index.tsx
new file mode 100644
index 00000000..f88fb46e
--- /dev/null
+++ b/exercises/07.imperative-handle/01.solution.ref/index.tsx
@@ -0,0 +1,92 @@
+import {
+ forwardRef,
+ useImperativeHandle,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { allMessages } from './messages'
+
+type ScrollableImperativeAPI = {
+ scrollToTop: () => void
+ scrollToBottom: () => void
+}
+
+const Scrollable = forwardRef<
+ ScrollableImperativeAPI,
+ { children: React.ReactNode }
+>(function Scrollable({ children }, ref) {
+ const containerRef = useRef(null)
+
+ useLayoutEffect(() => {
+ scrollToBottom()
+ })
+
+ function scrollToTop() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = 0
+ }
+
+ function scrollToBottom() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = containerRef.current.scrollHeight
+ }
+
+ useImperativeHandle(ref, () => ({
+ scrollToTop,
+ scrollToBottom,
+ }))
+
+ return (
+
+ )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render()
diff --git a/exercises/07.imperative-handle/01.solution.ref/messages.tsx b/exercises/07.imperative-handle/01.solution.ref/messages.tsx
new file mode 100644
index 00000000..e0c4a55b
--- /dev/null
+++ b/exercises/07.imperative-handle/01.solution.ref/messages.tsx
@@ -0,0 +1,39 @@
+export type Message = { id: string; author: string; content: string }
+
+export const allMessages: Array = [
+ `Leia: Aren't you a little short to be a stormtrooper?`,
+ `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
+ `Leia: You're who?`,
+ `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
+ `Leia: Ben Kenobi is here! Where is he?`,
+ `Luke: Come on!`,
+ `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
+ `Leia: Put that thing away! You're going to get us all killed.`,
+ `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.`,
+ `Leia: It could be worse...`,
+ `Han: It's worse.`,
+ `Luke: There's something alive in here!`,
+ `Han: That's your imagination.`,
+ `Luke: Something just moves past my leg! Look! Did you see that?`,
+ `Han: What?`,
+ `Luke: Help!`,
+ `Han: Luke! Luke! Luke!`,
+ `Leia: Luke!`,
+ `Leia: Luke, Luke, grab a hold of this.`,
+ `Luke: Blast it, will you! My gun's jammed.`,
+ `Han: Where?`,
+ `Luke: Anywhere! Oh!!`,
+ `Han: Luke! Luke!`,
+ `Leia: Grab him!`,
+ `Leia: What happened?`,
+ `Luke: I don't know, it just let go of me and disappeared...`,
+ `Han: I've got a very bad feeling about this.`,
+ `Luke: The walls are moving!`,
+ `Leia: Don't just stand there. Try to brace it with something.`,
+ `Luke: Wait a minute!`,
+ `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
+].map((m, i) => ({
+ id: String(i),
+ author: m.split(': ')[0],
+ content: m.split(': ')[1],
+}))
diff --git a/exercises/07.imperative-handle/02.problem.name/README.mdx b/exercises/07.imperative-handle/02.problem.name/README.mdx
new file mode 100644
index 00000000..12040922
--- /dev/null
+++ b/exercises/07.imperative-handle/02.problem.name/README.mdx
@@ -0,0 +1 @@
+# ref name
diff --git a/exercises/07.imperative-handle/02.problem.name/index.css b/exercises/07.imperative-handle/02.problem.name/index.css
new file mode 100644
index 00000000..27b86d00
--- /dev/null
+++ b/exercises/07.imperative-handle/02.problem.name/index.css
@@ -0,0 +1,18 @@
+.messaging-app {
+ max-width: 350px;
+ margin: auto;
+}
+
+.messaging-app [role='log'] {
+ margin: auto;
+ height: 300px;
+ overflow-y: scroll;
+ width: 300px;
+ outline: 1px solid black;
+ padding: 30px 10px;
+}
+
+.messaging-app [role='log'] hr {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
diff --git a/exercises/07.imperative-handle/02.problem.name/index.tsx b/exercises/07.imperative-handle/02.problem.name/index.tsx
new file mode 100644
index 00000000..f88fb46e
--- /dev/null
+++ b/exercises/07.imperative-handle/02.problem.name/index.tsx
@@ -0,0 +1,92 @@
+import {
+ forwardRef,
+ useImperativeHandle,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { allMessages } from './messages'
+
+type ScrollableImperativeAPI = {
+ scrollToTop: () => void
+ scrollToBottom: () => void
+}
+
+const Scrollable = forwardRef<
+ ScrollableImperativeAPI,
+ { children: React.ReactNode }
+>(function Scrollable({ children }, ref) {
+ const containerRef = useRef(null)
+
+ useLayoutEffect(() => {
+ scrollToBottom()
+ })
+
+ function scrollToTop() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = 0
+ }
+
+ function scrollToBottom() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = containerRef.current.scrollHeight
+ }
+
+ useImperativeHandle(ref, () => ({
+ scrollToTop,
+ scrollToBottom,
+ }))
+
+ return (
+
+ )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render()
diff --git a/exercises/07.imperative-handle/02.problem.name/messages.tsx b/exercises/07.imperative-handle/02.problem.name/messages.tsx
new file mode 100644
index 00000000..e0c4a55b
--- /dev/null
+++ b/exercises/07.imperative-handle/02.problem.name/messages.tsx
@@ -0,0 +1,39 @@
+export type Message = { id: string; author: string; content: string }
+
+export const allMessages: Array = [
+ `Leia: Aren't you a little short to be a stormtrooper?`,
+ `Luke: What? Oh... the uniform. I'm Luke Skywalker. I'm here to rescue you.`,
+ `Leia: You're who?`,
+ `Luke: I'm here to rescue you. I've got your R2 unit. I'm here with Ben Kenobi.`,
+ `Leia: Ben Kenobi is here! Where is he?`,
+ `Luke: Come on!`,
+ `Luke: Will you forget it? I already tried it. It's magnetically sealed!`,
+ `Leia: Put that thing away! You're going to get us all killed.`,
+ `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.`,
+ `Leia: It could be worse...`,
+ `Han: It's worse.`,
+ `Luke: There's something alive in here!`,
+ `Han: That's your imagination.`,
+ `Luke: Something just moves past my leg! Look! Did you see that?`,
+ `Han: What?`,
+ `Luke: Help!`,
+ `Han: Luke! Luke! Luke!`,
+ `Leia: Luke!`,
+ `Leia: Luke, Luke, grab a hold of this.`,
+ `Luke: Blast it, will you! My gun's jammed.`,
+ `Han: Where?`,
+ `Luke: Anywhere! Oh!!`,
+ `Han: Luke! Luke!`,
+ `Leia: Grab him!`,
+ `Leia: What happened?`,
+ `Luke: I don't know, it just let go of me and disappeared...`,
+ `Han: I've got a very bad feeling about this.`,
+ `Luke: The walls are moving!`,
+ `Leia: Don't just stand there. Try to brace it with something.`,
+ `Luke: Wait a minute!`,
+ `Luke: Threepio! Come in Threepio! Threepio! Where could he be?`,
+].map((m, i) => ({
+ id: String(i),
+ author: m.split(': ')[0],
+ content: m.split(': ')[1],
+}))
diff --git a/exercises/07.imperative-handle/02.solution.name/README.mdx b/exercises/07.imperative-handle/02.solution.name/README.mdx
new file mode 100644
index 00000000..12040922
--- /dev/null
+++ b/exercises/07.imperative-handle/02.solution.name/README.mdx
@@ -0,0 +1 @@
+# ref name
diff --git a/exercises/07.imperative-handle/02.solution.name/index.css b/exercises/07.imperative-handle/02.solution.name/index.css
new file mode 100644
index 00000000..27b86d00
--- /dev/null
+++ b/exercises/07.imperative-handle/02.solution.name/index.css
@@ -0,0 +1,18 @@
+.messaging-app {
+ max-width: 350px;
+ margin: auto;
+}
+
+.messaging-app [role='log'] {
+ margin: auto;
+ height: 300px;
+ overflow-y: scroll;
+ width: 300px;
+ outline: 1px solid black;
+ padding: 30px 10px;
+}
+
+.messaging-app [role='log'] hr {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
diff --git a/exercises/07.imperative-handle/02.solution.name/index.tsx b/exercises/07.imperative-handle/02.solution.name/index.tsx
new file mode 100644
index 00000000..df1a6487
--- /dev/null
+++ b/exercises/07.imperative-handle/02.solution.name/index.tsx
@@ -0,0 +1,89 @@
+import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { allMessages } from './messages'
+
+type ScrollableImperativeAPI = {
+ scrollToTop: () => void
+ scrollToBottom: () => void
+}
+
+function Scrollable({
+ children,
+ scrollableRef,
+}: {
+ children: React.ReactNode
+ scrollableRef: React.RefObject
+}) {
+ const containerRef = useRef(null)
+
+ useLayoutEffect(() => {
+ scrollToBottom()
+ })
+
+ function scrollToTop() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = 0
+ }
+
+ function scrollToBottom() {
+ if (!containerRef.current) return
+ containerRef.current.scrollTop = containerRef.current.scrollHeight
+ }
+
+ useImperativeHandle(scrollableRef, () => ({
+ scrollToTop,
+ scrollToBottom,
+ }))
+
+ return (
+
