sync external

exercises/08.focus/01.solution/index.tsx

@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react'
-import { flushSync } from 'react-dom'
 import * as ReactDOM from 'react-dom/client'
 
 function EditableText({
@@ -18,19 +17,18 @@ function EditableText({
 	const [edit, setEdit] = useState(false)
 	const [value, setValue] = useState(initialValue)
 	const inputRef = useRef<HTMLInputElement>(null)
-	const buttonRef = useRef<HTMLButtonElement>(null)
+	// 🐨 add a button ref here
 
 	return edit ? (
 		<form
 			method="post"
 			onSubmit={event => {
 				event.preventDefault()
 				// here's where you'd send the updated value to the server
-				flushSync(() => {
-					setValue(inputRef.current?.value ?? '')
-					setEdit(false)
-				})
-				buttonRef.current?.focus()
+				// 🐨 wrap these calls in a flushSync
+				setValue(inputRef.current?.value ?? '')
+				setEdit(false)
+				// 🐨 after flushSync, focus the button with the button ref
 			}}
 		>
 			<input
@@ -43,28 +41,28 @@ function EditableText({
 				defaultValue={value}
 				onKeyDown={event => {
 					if (event.key === 'Escape') {
-						flushSync(() => {
-							setEdit(false)
-						})
-						buttonRef.current?.focus()
+						// 🐨 wrap this in a flushSync
+						setEdit(false)
+						// 🐨 after the flushSync, focus the button
 					}
 				}}
 				onBlur={event => {
+					// 🐨 wrap these in a flushSync
 					setValue(event.currentTarget.value)
 					setEdit(false)
+					// 🐨 after the flushSync, focus the button
 				}}
 			/>
 		</form>
 	) : (
 		<button
 			aria-label={buttonLabel}
+			// 🐨 add a ref prop for the button
 			type="button"
-			ref={buttonRef}
 			onClick={() => {
-				flushSync(() => {
-					setEdit(true)
-				})
-				inputRef.current?.select()
+				// 🐨 wrap this in a flushSync
+				setEdit(true)
+				// 🐨 after the flushSync, select all the text of the input
 			}}
 		>
 			{value || 'Edit'}

exercises/09.sync-external/01.problem/README.mdx

@@ -0,0 +1 @@
+# useSyncExternalStore

exercises/09.sync-external/01.problem/index.css

@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}

exercises/09.sync-external/01.problem/index.tsx

@@ -0,0 +1,14 @@
+import * as ReactDOM from 'react-dom/client'
+
+function NarrowScreenNotifier() {
+	const isNarrow = false
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/09.sync-external/01.solution/README.mdx

@@ -0,0 +1 @@
+# useSyncExternalStore

exercises/09.sync-external/01.solution/index.css

@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}

exercises/09.sync-external/01.solution/index.tsx

@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+const mediaQuery = '(max-width: 600px)'
+function getSnapshot() {
+	return window.matchMedia(mediaQuery).matches
+}
+
+function subscribe(callback: () => void) {
+	const mediaQueryList = window.matchMedia(mediaQuery)
+	mediaQueryList.addEventListener('change', callback)
+	return () => {
+		mediaQueryList.removeEventListener('change', callback)
+	}
+}
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(subscribe, getSnapshot)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/09.sync-external/02.problem/README.mdx

@@ -0,0 +1 @@
+# Make Store Utility

exercises/09.sync-external/02.problem/index.css

@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}

exercises/09.sync-external/02.problem/index.tsx

@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+const mediaQuery = '(max-width: 600px)'
+function getSnapshot() {
+	return window.matchMedia(mediaQuery).matches
+}
+
+function subscribe(callback: () => void) {
+	const mediaQueryList = window.matchMedia(mediaQuery)
+	mediaQueryList.addEventListener('change', callback)
+	return () => {
+		mediaQueryList.removeEventListener('change', callback)
+	}
+}
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(subscribe, getSnapshot)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/09.sync-external/02.solution/README.mdx

@@ -0,0 +1 @@
+# Make Store Utility

exercises/09.sync-external/02.solution/index.css

@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}

exercises/09.sync-external/02.solution/index.tsx

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { makeMediaQueryStore } from './narrow-media-query'
+
+const narrowScreenStore = makeMediaQueryStore('(max-width: 600px)')
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(
+		narrowScreenStore.subscribe,
+		narrowScreenStore.getSnapshot,
+	)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/09.sync-external/02.solution/narrow-media-query.ts

@@ -0,0 +1,15 @@
+export function makeMediaQueryStore(mediaQuery: string) {
+	function getSnapshot() {
+		return window.matchMedia(mediaQuery).matches
+	}
+
+	function subscribe(callback: () => void) {
+		const mediaQueryList = window.matchMedia(mediaQuery)
+		mediaQueryList.addEventListener('change', callback)
+		return () => {
+			mediaQueryList.removeEventListener('change', callback)
+		}
+	}
+
+	return { subscribe, getSnapshot }
+}

exercises/09.sync-external/README.mdx

@@ -0,0 +1 @@
+# Sync External State