diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
index 96ad202361..b390ce9419 100644
--- a/src/content/blog/2022/03/29/react-v18.md
+++ b/src/content/blog/2022/03/29/react-v18.md
@@ -123,7 +123,7 @@ Typically, for the best user experience, a single user input should result in bo
 
 
 ```js
-import {startTransition} from 'react';
+import { startTransition } from 'react';
 
 // Urgent: Show what was typed
 setInputValue(input);
diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 396a538961..34fc7b4090 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -94,9 +94,14 @@ import { sculptureList } from './data.js';
 export default function Gallery() {
   const [index, setIndex] = useState(0);
   const [showMore, setShowMore] = useState(false);
+  const hasNext = index < sculptureList.length - 1;
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 7a6a7229a4..28fc59a960 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -28,7 +28,7 @@ translators:
 <Sandpack>
 
 ```js App.js
-import {useState} from 'react';
+import { useState } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -84,7 +84,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -108,7 +108,7 @@ export default function AddTask({onAddTask}) {
 ```
 
 ```js TaskList.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
@@ -466,7 +466,7 @@ export default function tasksReducer(tasks, action) {
 最后，你需要将 `tasksReducer` 导入到组件中。记得先从 React 中导入 `useReducer` Hook：
 
 ```js
-import {useReducer} from 'react';
+import { useReducer } from 'react';
 ```
 
 接下来，你就可以替换掉之前的 `useState`:
@@ -498,7 +498,7 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 <Sandpack>
 
 ```js App.js
-import {useReducer} from 'react';
+import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -579,7 +579,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -603,7 +603,7 @@ export default function AddTask({onAddTask}) {
 ```
 
 ```js TaskList.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
@@ -683,7 +683,7 @@ li {
 <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';
@@ -767,7 +767,7 @@ export default function tasksReducer(tasks, action) {
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -791,7 +791,7 @@ export default function AddTask({onAddTask}) {
 ```
 
 ```js TaskList.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
@@ -894,7 +894,7 @@ Reducers 并非没有缺点！以下是比较它们的几种方法：
 <Sandpack>
 
 ```js App.js
-import {useImmerReducer} from 'use-immer';
+import { useImmerReducer } from 'use-immer';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -969,7 +969,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -993,7 +993,7 @@ export default function AddTask({onAddTask}) {
 ```
 
 ```js TaskList.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
@@ -1131,10 +1131,10 @@ case 'changed_selection': {
 <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);
@@ -1214,7 +1214,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -1281,10 +1281,10 @@ dispatch({
 <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);
@@ -1367,7 +1367,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -1425,10 +1425,10 @@ textarea {
 <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);
@@ -1511,7 +1511,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js active
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -1564,10 +1564,10 @@ textarea {
 <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);
@@ -1650,7 +1650,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js active
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -1712,10 +1712,10 @@ textarea {
 <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);
@@ -1804,7 +1804,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js active
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -1909,10 +1909,10 @@ export const initialState = {
 <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);
@@ -2001,7 +2001,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -2086,10 +2086,10 @@ 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);
@@ -2187,7 +2187,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -2274,10 +2274,10 @@ export function useReducer(reducer, initialState) {
 <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);
@@ -2351,7 +2351,7 @@ export function messengerReducer(state, action) {
 ```
 
 ```js MyReact.js active
-import {useState} from 'react';
+import { useState } from 'react';
 
 export function useReducer(reducer, initialState) {
   const [state, setState] = useState(initialState);
@@ -2387,7 +2387,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
@@ -2448,10 +2448,10 @@ dispatch 一个 action 去调用一个具有当前 state 和 action 的 reducer
 <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);
@@ -2525,7 +2525,7 @@ export function messengerReducer(state, action) {
 ```
 
 ```js MyReact.js active
-import {useState} from 'react';
+import { useState } from 'react';
 
 export function useReducer(reducer, initialState) {
   const [state, setState] = useState(initialState);
@@ -2564,7 +2564,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 ```
 
 ```js Chat.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
   return (
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index f5447e4b67..092fdf95b8 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -318,6 +318,7 @@ import { useState } from 'react';
 ```js
 function MyButton() {
   const [count, setCount] = useState(0);
+  // ...
 ```
 
 你将从 `useState` 中获得两样东西：当前的 state（`count`），以及用于更新它的函数（`setCount`）。你可以给它们起任何名字，但按照惯例，需要像这样 `[something, setSomething]` 为它们命名。
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index c9e054c6c8..c4f19a4bcf 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -645,7 +645,7 @@ Refs 是一个应急方案。你应该只在你必须“跳出 React”时使用
 <Sandpack>
 
 ```js
-import {useState, useRef} from 'react';
+import { useState, useRef } from 'react';
 
 export default function Counter() {
   const [show, setShow] = useState(true);
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index dcc6eb3c40..28d997b04e 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -330,8 +330,8 @@ Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. Th
 Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
 
 ```jsx
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import './styles.css';
 
 import App from './App';
diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 4cca6ea73b..9b11dc58ca 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -553,7 +553,7 @@ artwork.seen = nextSeen; // 问题：直接修改了已有的元素
 setMyList(myNextList);
 ```
 
-虽然 `myNextList` 这个数组是新的，但是其*内部的元素本身*与原数组 `myList` 是相同的。因此，修改 `artwork.seen`，其实是在修改*原始的* artwork 对象。而这个 artwork 对象也被 `yourArtworks` 使用，这样就带来了 bug。这样的 bug 可能难以想到，但好在如果你避免直接修改 state，它们就会消失。
+虽然 `myNextList` 这个数组是新的，但是其*内部的元素本身*与原数组 `myList` 是相同的。因此，修改 `artwork.seen`，其实是在修改*原始的* artwork 对象。而这个 artwork 对象也被 `yourList` 使用，这样就带来了 bug。这样的 bug 可能难以想到，但好在如果你避免直接修改 state，它们就会消失。
 
 **你可以使用 `map` 在没有 mutation 的前提下将一个旧的元素替换成更新的版本。**
 
@@ -685,7 +685,7 @@ export default function BucketList() {
   const [myList, updateMyList] = useImmer(
     initialList
   );
-  const [yourArtworks, updateYourList] = useImmer(
+  const [yourList, updateYourList] = useImmer(
     initialList
   );
 
@@ -716,7 +716,7 @@ export default function BucketList() {
         onToggle={handleToggleMyList} />
       <h2>你想看的艺术清单：</h2>
       <ItemList
-        artworks={yourArtworks}
+        artworks={yourList}
         onToggle={handleToggleYourList} />
     </>
   );
diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
index cbcac291e9..ab036caa1b 100644
--- a/src/content/reference/react-dom/hydrate.md
+++ b/src/content/reference/react-dom/hydrate.md
@@ -65,7 +65,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
 Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
 
 ```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
-import {hydrate} from 'react-dom';
+import { hydrate } from 'react-dom';
 
 hydrate(<App />, document.getElementById('root'));
 ````
@@ -90,7 +90,7 @@ In apps fully built with React, **you will usually only hydrate one "root", once
 
 ```js index.js active
 import './styles.css';
-import {hydrate} from 'react-dom';
+import { hydrate } from 'react-dom';
 import App from './App.js';
 
 hydrate(<App />, document.getElementById('root'));
@@ -128,7 +128,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
 
 ```js index.js
 import './styles.css';
-import {hydrate} from 'react-dom';
+import { hydrate } from 'react-dom';
 import App from './App.js';
 
 hydrate(<App />, document.getElementById('root'));
@@ -166,7 +166,7 @@ If you intentionally need to render something different on the server and the cl
 
 ```js index.js
 import './styles.css';
-import {hydrate} from 'react-dom';
+import { hydrate } from 'react-dom';
 import App from './App.js';
 
 hydrate(<App />, document.getElementById('root'));
diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md
index 9fde4ac4eb..da7d9d3de8 100644
--- a/src/content/reference/react-dom/render.md
+++ b/src/content/reference/react-dom/render.md
@@ -76,7 +76,7 @@ React 将在 `domNode` 中展示 `<App />` 组件，并对该 DOM 中的内容
 通过调用 `render` 函数在 <CodeStep step={2}>浏览器 DOM 节点</CodeStep>中展示 <CodeStep step={1}>React 组件</CodeStep>。
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import App from './App.js';
 
 render(<App />, document.getElementById('root'));
@@ -90,7 +90,7 @@ render(<App />, document.getElementById('root'));
 
 ```js index.js active
 import './styles.css';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import App from './App.js';
 
 render(<App />, document.getElementById('root'));
@@ -189,7 +189,7 @@ nav ul li { display: inline-block; margin-right: 20px; }
 <Sandpack>
 
 ```js index.js active
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import './styles.css';
 import App from './App.js';
 
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 127cdf2290..dee690372d 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -127,7 +127,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
 On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
 
 ```js [[1, 4, "<App />"]]
-import {hydrateRoot} from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
 
 hydrateRoot(document, <App />);
@@ -203,7 +203,7 @@ app.use('/', (request, response) => {
 In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
 
 ```js {4}
-import {hydrateRoot} from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
 
 hydrateRoot(document, <App assetMap={window.assetMap} />);
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index a6d7ad996f..3f610d65a6 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -128,7 +128,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
 On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
 
 ```js [[1, 4, "<App />"]]
-import {hydrateRoot} from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
 
 hydrateRoot(document, <App />);
@@ -201,7 +201,7 @@ async function handler(request) {
 In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
 
 ```js {4}
-import {hydrateRoot} from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
 
 hydrateRoot(document, <App assetMap={window.assetMap} />);