diff --git a/beta/src/content/learn/extracting-state-logic-into-a-reducer.md b/beta/src/content/learn/extracting-state-logic-into-a-reducer.md
index b389d6f39..b2d2293bc 100644
--- a/beta/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/beta/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -4,7 +4,7 @@ title: Extracting State Logic into a Reducer
 
 <Intro>
 
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a *reducer.*
+Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a _reducer._
 
 </Intro>
 
@@ -17,14 +17,14 @@ Components with many state updates spread across many event handlers can get ove
 
 </YouWillLearn>
 
-## Consolidate state logic with a reducer {/*consolidate-state-logic-with-a-reducer*/}
+## Consolidate state logic with a reducer {/* consolidate-state-logic-with-a-reducer */}
 
 As your components grow in complexity, it can get harder to see at a glance all the different ways in which a component's state gets updated. For example, the `TaskApp` component below holds an array of `tasks` in state and uses three different event handlers to add, remove, and edit tasks:
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
+import {useState} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -32,35 +32,36 @@ export default function TaskApp() {
   const [tasks, setTasks] = useState(initialTasks);
 
   function handleAddTask(text) {
-    setTasks([...tasks, {
-      id: nextId++,
-      text: text,
-      done: false
-    }]);
+    setTasks([
+      ...tasks,
+      {
+        id: nextId++,
+        text: text,
+        done: false,
+      },
+    ]);
   }
 
   function handleChangeTask(task) {
-    setTasks(tasks.map(t => {
-      if (t.id === task.id) {
-        return task;
-      } else {
-        return t;
-      }
-    }));
+    setTasks(
+      tasks.map((t) => {
+        if (t.id === task.id) {
+          return task;
+        } else {
+          return t;
+        }
+      })
+    );
   }
 
   function handleDeleteTask(taskId) {
-    setTasks(
-      tasks.filter(t => t.id !== taskId)
-    );
+    setTasks(tasks.filter((t) => t.id !== taskId));
   }
 
   return (
     <>
       <h1>Prague itinerary</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -72,57 +73,52 @@ export default function TaskApp() {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false },
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
 ];
 ```
 
 ```js AddTask.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -130,24 +126,21 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -156,26 +149,32 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 </Sandpack>
@@ -188,41 +187,44 @@ Reducers are a different way to handle state. You can migrate from `useState` to
 2. **Write** a reducer function.
 3. **Use** the reducer from your component.
 
-### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/}
+### Step 1: Move from setting state to dispatching actions {/* step-1-move-from-setting-state-to-dispatching-actions */}
 
-Your event handlers currently specify *what to do* by setting state:
+Your event handlers currently specify _what to do_ by setting state:
 
 ```js
 function handleAddTask(text) {
-  setTasks([...tasks, {
-    id: nextId++,
-    text: text,
-    done: false
-  }]);
+  setTasks([
+    ...tasks,
+    {
+      id: nextId++,
+      text: text,
+      done: false,
+    },
+  ]);
 }
 
 function handleChangeTask(task) {
-  setTasks(tasks.map(t => {
-    if (t.id === task.id) {
-      return task;
-    } else {
-      return t;
-    }
-  }));
+  setTasks(
+    tasks.map((t) => {
+      if (t.id === task.id) {
+        return task;
+      } else {
+        return t;
+      }
+    })
+  );
 }
 
 function handleDeleteTask(taskId) {
-  setTasks(
-    tasks.filter(t => t.id !== taskId)
-  );
+  setTasks(tasks.filter((t) => t.id !== taskId));
 }
 ```
 
 Remove all the state setting logic. What you are left with are three event handlers:
 
-* `handleAddTask(text)` is called when the user presses "Add".
-* `handleChangeTask(task)` is called when the user toggles a task or presses "Save".
-* `handleDeleteTask(taskId)` is called when the user presses "Delete".
+- `handleAddTask(text)` is called when the user presses "Add".
+- `handleChangeTask(task)` is called when the user toggles a task or presses "Save".
+- `handleDeleteTask(taskId)` is called when the user presses "Delete".
 
 Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
 
@@ -238,14 +240,14 @@ function handleAddTask(text) {
 function handleChangeTask(task) {
   dispatch({
     type: 'changed',
-    task: task
+    task: task,
   });
 }
 
 function handleDeleteTask(taskId) {
   dispatch({
     type: 'deleted',
-    id: taskId
+    id: taskId,
   });
 }
 ```
@@ -258,13 +260,13 @@ function handleDeleteTask(taskId) {
     // "action" object:
     {
       type: 'deleted',
-      id: taskId
+      id: taskId,
     }
   );
 }
 ```
 
-It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about *what happened*. (You will add the `dispatch` function itself in a later step.)
+It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about _what happened_. (You will add the `dispatch` function itself in a later step.)
 
 <Convention conventionFor="action objects">
 
@@ -280,7 +282,7 @@ dispatch({
 
 </Convention>
 
-### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/}
+### Step 2: Write a reducer function {/* step-2-write-a-reducer-function */}
 
 A reducer function is where you will put your state logic. It takes two arguments, the current state and the action object, and it returns the next state:
 
@@ -296,20 +298,23 @@ To move your state setting logic from your event handlers to a reducer function
 
 1. Declare the current state (`tasks`) as the first argument.
 2. Declare the `action` object as the second argument.
-3. Return the *next* state from the reducer (which React will set the state to).
+3. Return the _next_ state from the reducer (which React will set the state to).
 
 Here is all the state setting logic migrated to a reducer function:
 
 ```js
 function tasksReducer(tasks, action) {
   if (action.type === 'added') {
-    return [...tasks, {
-      id: action.id,
-      text: action.text,
-      done: false
-    }];
+    return [
+      ...tasks,
+      {
+        id: action.id,
+        text: action.text,
+        done: false,
+      },
+    ];
   } else if (action.type === 'changed') {
-    return tasks.map(t => {
+    return tasks.map((t) => {
       if (t.id === action.task.id) {
         return action.task;
       } else {
@@ -317,7 +322,7 @@ function tasksReducer(tasks, action) {
       }
     });
   } else if (action.type === 'deleted') {
-    return tasks.filter(t => t.id !== action.id);
+    return tasks.filter((t) => t.id !== action.id);
   } else {
     throw Error('Unknown action: ' + action.type);
   }
@@ -334,14 +339,17 @@ The code above uses if/else statements, but it's a convention to use [switch sta
 function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -350,7 +358,7 @@ function tasksReducer(tasks, action) {
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -365,7 +373,6 @@ If you're not yet comfortable with switch statements, using if/else is completel
 
 </Convention>
 
-
 <DeepDive title="Why are reducers called this way?">
 
 Although reducers can "reduce" the amount of code inside your component, they are actually named after the [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) operation that you can perform on arrays.
@@ -390,40 +397,33 @@ import tasksReducer from './tasksReducer.js';
 
 let initialState = [];
 let actions = [
-  { type: 'added', id: 1, text: 'Visit Kafka Museum' },
-  { type: 'added', id: 2, text: 'Watch a puppet show' },
-  { type: 'deleted', id: 1 },
-  { type: 'added', id: 3, text: 'Lennon Wall pic' },
+  {type: 'added', id: 1, text: 'Visit Kafka Museum'},
+  {type: 'added', id: 2, text: 'Watch a puppet show'},
+  {type: 'deleted', id: 1},
+  {type: 'added', id: 3, text: 'Lennon Wall pic'},
 ];
 
-let finalState = actions.reduce(
-  tasksReducer,
-  initialState
-);
+let finalState = actions.reduce(tasksReducer, initialState);
 
 const output = document.getElementById('output');
-output.textContent = JSON.stringify(
-  finalState,
-  null,
-  2
-);
+output.textContent = JSON.stringify(finalState, null, 2);
 ```
 
 ```js tasksReducer.js
-export default function tasksReducer(
-  tasks,
-  action
-) {
+export default function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -432,7 +432,7 @@ export default function tasksReducer(
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -451,12 +451,12 @@ You probably won't need to do this yourself, but this is similar to what React d
 
 </DeepDive>
 
-### Step 3: Use the reducer from your component {/*step-3-use-the-reducer-from-your-component*/}
+### Step 3: Use the reducer from your component {/* step-3-use-the-reducer-from-your-component */}
 
 Finally, you need to hook up the `tasksReducer` to your component. Make sure to import the `useReducer` Hook from React:
 
 ```js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 ```
 
 Then you can replace `useState`:
@@ -473,7 +473,7 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
 The `useReducer` Hook is similar to `useState`—you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different.
 
-The `useReducer` Hook takes two arguments: 
+The `useReducer` Hook takes two arguments:
 
 1. A reducer function
 2. An initial state
@@ -488,15 +488,12 @@ Now it's fully wired up! Here, the reducer is declared at the bottom of the comp
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
@@ -509,23 +506,21 @@ export default function TaskApp() {
   function handleChangeTask(task) {
     dispatch({
       type: 'changed',
-      task: task
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
       type: 'deleted',
-      id: taskId
+      id: taskId,
     });
   }
 
   return (
     <>
       <h1>Prague itinerary</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -538,14 +533,17 @@ export default function TaskApp() {
 function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -554,7 +552,7 @@ function tasksReducer(tasks, action) {
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -564,57 +562,52 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false }
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
 ];
 ```
 
 ```js AddTask.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -622,24 +615,21 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -648,26 +638,32 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 </Sandpack>
@@ -677,16 +673,13 @@ If you want, you can even move the reducer to a different file:
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 import tasksReducer from './tasksReducer.js';
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
@@ -699,23 +692,21 @@ export default function TaskApp() {
   function handleChangeTask(task) {
     dispatch({
       type: 'changed',
-      task: task
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
       type: 'deleted',
-      id: taskId
+      id: taskId,
     });
   }
 
   return (
-    <>  
+    <>
       <h1>Prague itinerary</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -727,27 +718,27 @@ export default function TaskApp() {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false },
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
 ];
 ```
 
 ```js tasksReducer.js
-export default function tasksReducer(
-  tasks,
-  action
-) {
+export default function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -756,7 +747,7 @@ export default function tasksReducer(
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -766,50 +757,45 @@ export default function tasksReducer(
 ```
 
 ```js AddTask.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -817,24 +803,21 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -843,59 +826,65 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 </Sandpack>
 
-Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify *what happened* by dispatching actions, and the reducer function determines *how the state updates* in response to them.
+Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching actions, and the reducer function determines _how the state updates_ in response to them.
 
-## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/}
+## Comparing `useState` and `useReducer` {/* comparing-usestate-and-usereducer */}
 
 Reducers are not without downsides! Here's a few ways you can compare them:
 
-* **Code size:** Generally, with `useState` you have to write less code upfront. With `useReducer`, you have to write both a reducer function _and_ dispatch actions. However, `useReducer` can help cut down on the code if many event handlers modify state in a similar way.
-* **Readability:** `useState` is very easy to read when the state updates are simple. When they get more complex, they can bloat your component's code and make it difficult to scan. In this case, `useReducer` lets you cleanly separate the *how* of update logic from the *what happened* of event handlers.
-* **Debugging:** When you have a bug with `useState`, it can be difficult to tell _where_ the state was set incorrectly, and _why_. With `useReducer`, you can add a console log into your reducer to see every state update, and _why_ it happened (due to which `action`). If each `action` is correct, you'll know that the mistake is in the reducer logic itself. However, you have to step through more code than with `useState`.
-* **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
-* **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent!
+- **Code size:** Generally, with `useState` you have to write less code upfront. With `useReducer`, you have to write both a reducer function _and_ dispatch actions. However, `useReducer` can help cut down on the code if many event handlers modify state in a similar way.
+- **Readability:** `useState` is very easy to read when the state updates are simple. When they get more complex, they can bloat your component's code and make it difficult to scan. In this case, `useReducer` lets you cleanly separate the _how_ of update logic from the _what happened_ of event handlers.
+- **Debugging:** When you have a bug with `useState`, it can be difficult to tell _where_ the state was set incorrectly, and _why_. With `useReducer`, you can add a console log into your reducer to see every state update, and _why_ it happened (due to which `action`). If each `action` is correct, you'll know that the mistake is in the reducer logic itself. However, you have to step through more code than with `useState`.
+- **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
+- **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent!
 
 We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component.
 
-## Writing reducers well {/*writing-reducers-well*/}
+## Writing reducers well {/* writing-reducers-well */}
 
 Keep these two tips in mind when writing reducers:
 
-* **Reducers must be pure.** Similar to [state updater functions](/learn/queueing-a-series-of-state-updates), reducers run during rendering! (Actions are queued until the next render.) This means that reducers [must be pure](/learn/keeping-components-pure)—same inputs always result in the same output. They should not send requests, schedule timeouts, or perform any side effects (operations that impact things outside the component). They should update [objects](/learn/updating-objects-in-state) and [arrays](/learn/updating-arrays-in-state) without mutations.
-* **Each action describes a single user interaction, even if that leads to multiple changes in the data.** For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one `reset_form` action rather than five separate `set_field` actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order. This helps with debugging!
+- **Reducers must be pure.** Similar to [state updater functions](/learn/queueing-a-series-of-state-updates), reducers run during rendering! (Actions are queued until the next render.) This means that reducers [must be pure](/learn/keeping-components-pure)—same inputs always result in the same output. They should not send requests, schedule timeouts, or perform any side effects (operations that impact things outside the component). They should update [objects](/learn/updating-objects-in-state) and [arrays](/learn/updating-arrays-in-state) without mutations.
+- **Each action describes a single user interaction, even if that leads to multiple changes in the data.** For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one `reset_form` action rather than five separate `set_field` actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order. This helps with debugging!
 
-## Writing concise reducers with Immer {/*writing-concise-reducers-with-immer*/}
+## Writing concise reducers with Immer {/* writing-concise-reducers-with-immer */}
 
 Just like with [updating objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) and [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) in regular state, you can use the Immer library to make reducers more concise. Here, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) lets you mutate the state with `push` or `arr[i] =` assignment:
 
 <Sandpack>
 
 ```js App.js
-import { useImmerReducer } from 'use-immer';
+import {useImmerReducer} from 'use-immer';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -905,19 +894,17 @@ function tasksReducer(draft, action) {
       draft.push({
         id: action.id,
         text: action.text,
-        done: false
+        done: false,
       });
       break;
     }
     case 'changed': {
-      const index = draft.findIndex(t =>
-        t.id === action.task.id
-      );
+      const index = draft.findIndex((t) => t.id === action.task.id);
       draft[index] = action.task;
       break;
     }
     case 'deleted': {
-      return draft.filter(t => t.id !== action.id);
+      return draft.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -926,10 +913,7 @@ function tasksReducer(draft, action) {
 }
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useImmerReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
@@ -942,23 +926,21 @@ export default function TaskApp() {
   function handleChangeTask(task) {
     dispatch({
       type: 'changed',
-      task: task
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
       type: 'deleted',
-      id: taskId
+      id: taskId,
     });
   }
 
   return (
     <>
       <h1>Prague itinerary</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -970,57 +952,52 @@ export default function TaskApp() {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false },
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
 ];
 ```
 
 ```js AddTask.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -1028,24 +1005,21 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -1054,26 +1028,32 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 ```json package.json
@@ -1100,22 +1080,20 @@ Reducers must be pure, so they shouldn't mutate state. But Immer provides you wi
 
 <Recap>
 
-* To convert from `useState` to `useReducer`:
+- To convert from `useState` to `useReducer`:
   1. Dispatch actions from event handlers.
   2. Write a reducer function that returns the next state for a given state and action.
   3. Replace `useState` with `useReducer`.
-* Reducers require you to write a bit more code, but they help with debugging and testing.
-* Reducers must be pure.
-* Each action describes a single user interaction.
-* Use Immer if you want to write reducers in a mutating style.
+- Reducers require you to write a bit more code, but they help with debugging and testing.
+- Reducers must be pure.
+- Each action describes a single user interaction.
+- Use Immer if you want to write reducers in a mutating style.
 
 </Recap>
 
-
-
 <Challenges>
 
-#### Dispatch actions from event handlers {/*dispatch-actions-from-event-handlers*/}
+#### Dispatch actions from event handlers {/* dispatch-actions-from-event-handlers */}
 
 Currently, the event handlers in `ContactList.js` and `Chat.js` have `// TODO` comments. This is why typing into the input doesn't work, and clicking on the buttons doesn't change the selected recipient.
 
@@ -1143,23 +1121,15 @@ This means that your action object should have a `type: 'changed_selection'`. Yo
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -1178,34 +1148,31 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     default: {
@@ -1216,27 +1183,20 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              // TODO: dispatch changed_selection
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                // TODO: dispatch changed_selection
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -1244,19 +1204,15 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           // TODO: dispatch edited_message
           // (Read the input value from e.target.value)
         }}
@@ -1269,11 +1225,13 @@ export default function Chat({
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1298,13 +1256,13 @@ From the reducer code, you can infer that actions need to look like this:
 // When the user presses "Alice"
 dispatch({
   type: 'changed_selection',
-  contactId: 1
+  contactId: 1,
 });
 
 // When user types "Hello!"
 dispatch({
   type: 'edited_message',
-  message: 'Hello!'
+  message: 'Hello!',
 });
 ```
 
@@ -1313,23 +1271,15 @@ Here is the example updated to dispatch the corresponding messages:
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -1348,34 +1298,31 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     default: {
@@ -1386,30 +1333,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -1417,22 +1357,18 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
@@ -1444,11 +1380,13 @@ export default function Chat({
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1467,7 +1405,7 @@ textarea {
 
 </Solution>
 
-#### Clear the input on sending a message {/*clear-the-input-on-sending-a-message*/}
+#### Clear the input on sending a message {/* clear-the-input-on-sending-a-message */}
 
 Currently, pressing "Send" doesn't do anything. Add an event handler to the "Send" button that will:
 
@@ -1477,23 +1415,15 @@ Currently, pressing "Send" doesn't do anything. Add an event handler to the "Sen
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -1512,34 +1442,31 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     default: {
@@ -1550,30 +1477,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -1581,22 +1501,18 @@ export default function ContactList({
 ```
 
 ```js Chat.js active
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
@@ -1608,11 +1524,13 @@ export default function Chat({
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1636,23 +1554,15 @@ There are a couple of ways you could do it in the "Send" button event handler. O
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -1671,34 +1581,31 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     default: {
@@ -1709,30 +1616,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -1740,44 +1640,45 @@ export default function ContactList({
 ```
 
 ```js Chat.js active
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'edited_message',
-          message: '',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'edited_message',
+            message: '',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1796,28 +1697,20 @@ textarea {
 
 This works and clears the input when you hit "Send".
 
-However, *from the user's perspective*, sending a message is a different action than editing the field. To reflect that, you could instead create a *new* action called `sent_message`, and handle it separately in the reducer:
+However, _from the user's perspective_, sending a message is a different action than editing the field. To reflect that, you could instead create a _new_ action called `sent_message`, and handle it separately in the reducer:
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -1836,40 +1729,37 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js active
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     case 'sent_message': {
       return {
         ...state,
-        message: ''
+        message: '',
       };
     }
     default: {
@@ -1880,30 +1770,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -1911,43 +1794,44 @@ export default function ContactList({
 ```
 
 ```js Chat.js active
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'sent_message',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1970,7 +1854,7 @@ With either solution, it's important that you **don't** place the `alert` inside
 
 </Solution>
 
-#### Restore input values when switching between tabs {/*restore-input-values-when-switching-between-tabs*/}
+#### Restore input values when switching between tabs {/* restore-input-values-when-switching-between-tabs */}
 
 In this example, switching between different recipients always clears the text input:
 
@@ -1985,7 +1869,7 @@ case 'changed_selection': {
 
 This is because you don't want to share a single message draft between several recipients. But it would be better if your app "remembered" a draft for each contact separately, restoring them when you switch contacts.
 
-Your task is to change the way the state is structured so that you remember a separate message draft *per contact*. You would need to make a few changes to the reducer, the initial state, and the components.
+Your task is to change the way the state is structured so that you remember a separate message draft _per contact_. You would need to make a few changes to the reducer, the initial state, and the components.
 
 <Hint>
 
@@ -1996,8 +1880,8 @@ export const initialState = {
   selectedId: 0,
   messages: {
     0: 'Hello, Taylor', // Draft for contactId = 0
-    1: 'Hello, Alice' // Draft for contactId = 1
-  }
+    1: 'Hello, Alice', // Draft for contactId = 1
+  },
 };
 ```
 
@@ -2015,23 +1899,15 @@ The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.message;
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -2050,40 +1926,37 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js messengerReducer.js
 export const initialState = {
   selectedId: 0,
-  message: 'Hello'
+  message: 'Hello',
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
         ...state,
         selectedId: action.contactId,
-        message: ''
+        message: '',
       };
     }
     case 'edited_message': {
       return {
         ...state,
-        message: action.message
+        message: action.message,
       };
     }
     case 'sent_message': {
       return {
         ...state,
-        message: ''
+        message: '',
       };
     }
     default: {
@@ -2094,30 +1967,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -2125,43 +1991,44 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'sent_message',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2209,23 +2076,15 @@ Here is the complete solution:
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.messages[state.selectedId];
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -2244,9 +2103,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
@@ -2256,14 +2115,11 @@ export const initialState = {
   messages: {
     0: 'Hello, Taylor',
     1: 'Hello, Alice',
-    2: 'Hello, Bob'
-  }
+    2: 'Hello, Bob',
+  },
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
@@ -2276,8 +2132,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: action.message
-        }
+          [state.selectedId]: action.message,
+        },
       };
     }
     case 'sent_message': {
@@ -2285,8 +2141,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: ''
-        }
+          [state.selectedId]: '',
+        },
       };
     }
     default: {
@@ -2297,30 +2153,23 @@ export function messengerReducer(
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -2328,43 +2177,44 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'sent_message',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2385,9 +2235,9 @@ Notably, you didn't need to change any of the event handlers to implement this d
 
 </Solution>
 
-#### Implement `useReducer` from scratch {/*implement-usereducer-from-scratch*/}
+#### Implement `useReducer` from scratch {/* implement-usereducer-from-scratch */}
 
-In the earlier examples, you imported the `useReducer` Hook from React. This time, you will implement *the `useReducer` Hook itself!* Here is a stub to get your started. It shouldn't take more than 10 lines of code.
+In the earlier examples, you imported the `useReducer` Hook from React. This time, you will implement _the `useReducer` Hook itself!_ Here is a stub to get you started. It shouldn't take more than 10 lines of code.
 
 To test your changes, try typing into the input or select a contact.
 
@@ -2414,23 +2264,15 @@ Recall that a reducer function takes two arguments--the current state and the ac
 <Sandpack>
 
 ```js App.js
-import { useReducer } from './MyReact.js';
+import {useReducer} from './MyReact.js';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.messages[state.selectedId];
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -2449,9 +2291,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
@@ -2461,14 +2303,11 @@ export const initialState = {
   messages: {
     0: 'Hello, Taylor',
     1: 'Hello, Alice',
-    2: 'Hello, Bob'
-  }
+    2: 'Hello, Bob',
+  },
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
@@ -2481,8 +2320,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: action.message
-        }
+          [state.selectedId]: action.message,
+        },
       };
     }
     case 'sent_message': {
@@ -2490,8 +2329,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: ''
-        }
+          [state.selectedId]: '',
+        },
       };
     }
     default: {
@@ -2502,7 +2341,7 @@ export function messengerReducer(
 ```
 
 ```js MyReact.js active
-import { useState } from 'react';
+import {useState} from 'react';
 
 export function useReducer(reducer, initialState) {
   const [state, setState] = useState(initialState);
@@ -2514,30 +2353,23 @@ export function useReducer(reducer, initialState) {
 ```
 
 ```js ContactList.js hidden
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -2545,43 +2377,44 @@ export default function ContactList({
 ```
 
 ```js Chat.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'sent_message',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2605,23 +2438,15 @@ Dispatching an action calls a reducer with the current state and the action, and
 <Sandpack>
 
 ```js App.js
-import { useReducer } from './MyReact.js';
+import {useReducer} from './MyReact.js';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
-import {
-  initialState,
-  messengerReducer
-} from './messengerReducer';
+import {initialState, messengerReducer} from './messengerReducer';
 
 export default function Messenger() {
-  const [state, dispatch] = useReducer(
-    messengerReducer,
-    initialState
-  );
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
   const message = state.messages[state.selectedId];
-  const contact = contacts.find(c =>
-    c.id === state.selectedId
-  );
+  const contact = contacts.find((c) => c.id === state.selectedId);
   return (
     <div>
       <ContactList
@@ -2640,9 +2465,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
@@ -2652,14 +2477,11 @@ export const initialState = {
   messages: {
     0: 'Hello, Taylor',
     1: 'Hello, Alice',
-    2: 'Hello, Bob'
-  }
+    2: 'Hello, Bob',
+  },
 };
 
-export function messengerReducer(
-  state,
-  action
-) {
+export function messengerReducer(state, action) {
   switch (action.type) {
     case 'changed_selection': {
       return {
@@ -2672,8 +2494,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: action.message
-        }
+          [state.selectedId]: action.message,
+        },
       };
     }
     case 'sent_message': {
@@ -2681,8 +2503,8 @@ export function messengerReducer(
         ...state,
         messages: {
           ...state.messages,
-          [state.selectedId]: ''
-        }
+          [state.selectedId]: '',
+        },
       };
     }
     default: {
@@ -2693,7 +2515,7 @@ export function messengerReducer(
 ```
 
 ```js MyReact.js active
-import { useState } from 'react';
+import {useState} from 'react';
 
 export function useReducer(reducer, initialState) {
   const [state, setState] = useState(initialState);
@@ -2708,30 +2530,23 @@ export function useReducer(reducer, initialState) {
 ```
 
 ```js ContactList.js hidden
-export default function ContactList({
-  contacts,
-  selectedId,
-  dispatch,
-}) {
+export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.id}>
-            <button onClick={() => {
-              dispatch({
-                type: 'changed_selection',
-                contactId: contact.id
-              });
-            }}>
-              {selectedId === contact.id ? (
-                <b>{contact.name}</b>
-              ) : (
-                contact.name
-              )}
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -2739,43 +2554,44 @@ export default function ContactList({
 ```
 
 ```js Chat.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({
-  contact,
-  message,
-  dispatch
-}) {
+export default function Chat({contact, message, dispatch}) {
   return (
     <section className="chat">
       <textarea
         value={message}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'edited_message',
-            message: e.target.value
+            message: e.target.value,
           });
         }}
       />
       <br />
-      <button onClick={() => {
-        alert(`Sending "${message}" to ${contact.email}`);
-        dispatch({
-          type: 'sent_message',
-        });
-      }}>Send to {contact.email}</button>
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
     </section>
   );
 }
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2796,7 +2612,7 @@ Though it doesn't matter in most cases, a slightly more accurate implementation
 
 ```js
 function dispatch(action) {
-  setState(s => reducer(s, action));
+  setState((s) => reducer(s, action));
 }
 ```