diff --git a/beta/src/pages/learn/extracting-state-logic-into-a-reducer.md b/beta/src/pages/learn/extracting-state-logic-into-a-reducer.md
index 3d0ee12fa..991613ad5 100644
--- a/beta/src/pages/learn/extracting-state-logic-into-a-reducer.md
+++ b/beta/src/pages/learn/extracting-state-logic-into-a-reducer.md
@@ -19,7 +19,7 @@ Components with many state updates spread across many event handlers can get ove
## Consolidate state logic with a reducer {/*consolidate-state-logic-with-a-reducer*/}
-As your components grow in complexity, it can get harder to see all the different ways that a component's state gets updated at a glance. For example, the `TaskBoard` component below holds an array of `tasks` in state and uses three different event handlers to add, remove, and edit tasks:
+As your components grow in complexity, it can get harder to see all the different ways that a component's state gets updated at a glance. 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:
@@ -28,7 +28,7 @@ import { useState } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, setTasks] = useState(initialTasks);
function handleAddTask(text) {
@@ -492,7 +492,7 @@ import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -682,7 +682,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import tasksReducer from './tasksReducer.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -925,7 +925,7 @@ function tasksReducer(draft, action) {
}
}
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useImmerReducer(
tasksReducer,
initialTasks
@@ -2804,4 +2804,4 @@ This is because the dispatched actions are queued until the next render, [simila
-
\ No newline at end of file
+
diff --git a/beta/src/pages/learn/managing-state.md b/beta/src/pages/learn/managing-state.md
index 3fa3ad05f..4231ac265 100644
--- a/beta/src/pages/learn/managing-state.md
+++ b/beta/src/pages/learn/managing-state.md
@@ -511,7 +511,7 @@ import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -812,7 +812,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
return (
Day off in Kyoto
diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 2bc0877c3..b68d177f7 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -27,7 +27,7 @@ import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; }
-A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskBoard` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
+A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskApp` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
-For example, `TaskBoard` passes a list of tasks and the event handlers to `TaskList`:
+For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
```js
-This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context](/learn/passing-data-deeply-with-context). **This way, any component below `TaskBoard` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
+This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context](/learn/passing-data-deeply-with-context). **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
@@ -265,7 +265,7 @@ import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -452,16 +452,16 @@ ul, li { margin: 0; padding: 0; }
-Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskBoard` component.
+Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component.
### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
-Now you can import both contexts in your `TaskBoard` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
+Now you can import both contexts in your `TaskApp` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
```js {4,7-8}
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
// ...
return (
@@ -484,7 +484,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -717,7 +717,7 @@ export default function AddTask({ onAddTask }) {
// ...
```
-**The `TaskBoard` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
+**The `TaskApp` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
@@ -727,7 +727,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
@@ -901,7 +901,7 @@ ul, li { margin: 0; padding: 0; }
-**The state still "lives" in the top-level `TaskBoard` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
+**The state still "lives" in the top-level `TaskApp` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
@@ -934,7 +934,7 @@ export function TasksProvider({ children }) {
}
```
-**This removes all the complexity and wiring from your `TaskBoard` component:**
+**This removes all the complexity and wiring from your `TaskApp` component:**
@@ -943,7 +943,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
return (
Day off in Kyoto
@@ -1153,7 +1153,7 @@ import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
-export default function TaskBoard() {
+export default function TaskApp() {
return (
Day off in Kyoto
diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 172d63600..faa13c5fe 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -1098,7 +1098,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, setTodos] = useState(
initialTodos
);
@@ -1261,7 +1261,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, setTodos] = useState(
initialTodos
);
@@ -1432,7 +1432,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, setTodos] = useState(
initialTodos
);
@@ -1614,7 +1614,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, updateTodos] = useImmer(
initialTodos
);
@@ -1802,7 +1802,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, updateTodos] = useImmer(
initialTodos
);
diff --git a/beta/src/pages/reference/usestate.md b/beta/src/pages/reference/usestate.md
index d57e1d81a..1f4954a84 100644
--- a/beta/src/pages/reference/usestate.md
+++ b/beta/src/pages/reference/usestate.md
@@ -266,7 +266,7 @@ const initialTodos = [
{ id: 2, title: 'Brew tea', done: false },
];
-export default function TaskBoard() {
+export default function TaskApp() {
const [todos, setTodos] = useState(initialTodos);
function handleAddTodo(title) {