From f681f766983ad2d3604887e50a8f8285449e5b77 Mon Sep 17 00:00:00 2001
From: Pradeep Thakur <43206415+pradeepthakur-lab@users.noreply.github.com>
Date: Thu, 6 Apr 2023 18:52:24 +0530
Subject: [PATCH 1/6] Clarify a code snippet is incomplete  (#5888)

* matched the curly braces #issues5887

Added matched the curly braces on the official website tutorial. #issues5887

* Update index.md

---------

Co-authored-by: dan <dan.abramov@gmail.com>
---
 src/content/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index fa8deddfe9..b57655bc42 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -313,6 +313,7 @@ Now you can declare a *state variable* inside your component:
 ```js
 function MyButton() {
   const [count, setCount] = useState(0);
+  // ...
 ```
 
 You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`.

From afffd7f05fdb366f718d70de930671d9d7d4d8ca Mon Sep 17 00:00:00 2001
From: Aleksandar15 <58865226+Aleksandar15@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:23:38 +0200
Subject: [PATCH 2/6] Fixed a wrong state name in explanation; renamed state
 name to follow naming convention (#5886)

---
 src/content/learn/updating-arrays-in-state.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 99df244c89..45c6b70dc8 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -549,7 +549,7 @@ artwork.seen = nextSeen; // Problem: mutates an existing item
 setMyList(myNextList);
 ```
 
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourArtworks`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourList`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
 
 **You can use `map` to substitute an old item with its updated version without mutation.**
 
@@ -681,7 +681,7 @@ export default function BucketList() {
   const [myList, updateMyList] = useImmer(
     initialList
   );
-  const [yourArtworks, updateYourList] = useImmer(
+  const [yourList, updateYourList] = useImmer(
     initialList
   );
 
@@ -712,7 +712,7 @@ export default function BucketList() {
         onToggle={handleToggleMyList} />
       <h2>Your list of art to see:</h2>
       <ItemList
-        artworks={yourArtworks}
+        artworks={yourList}
         onToggle={handleToggleYourList} />
     </>
   );

From d58ca812f74749155eba4d30a55ff532d89df901 Mon Sep 17 00:00:00 2001
From: Joshua <121734574+jhylacey@users.noreply.github.com>
Date: Thu, 6 Apr 2023 08:26:32 -0500
Subject: [PATCH 3/6] Fix improper idiom usage (#5883)

* Fix casing for consistency

There's 5 instances in this document in which the casing of a file name
begins with lower case, which makes it inconsisnent both with the page
and the entire tutorial.

* Fix improper idiom usage

The phrase "most of the times" is incorrect and would only make sense
in the context of a larger sentence. The phrase is actually "most of the
time" and is used in place of "usually".
---
 src/content/learn/writing-markup-with-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index 335f192af7..62670150ac 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -126,7 +126,7 @@ This is because JSX is stricter and has a few more rules than HTML! If you read
 
 <Note>
 
-Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
+Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
 
 </Note>
 

From a76a5984ec561d37a6044859aa04484898d958ad Mon Sep 17 00:00:00 2001
From: Lukas Volk <67693193+LukasV3@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:42:18 +0200
Subject: [PATCH 4/6] Fix runtime error in image gallery useState example
 (#5877)

---
 src/content/learn/adding-interactivity.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 179dd02991..501c9f6201 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() {

From c9d0cbfccd28de357f2b35ba2c2b2aa19b3c0ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=98=84?= <ldh19971027@gmail.com>
Date: Thu, 6 Apr 2023 22:43:21 +0900
Subject: [PATCH 5/6] Add space in `import` (#5889)

---
 src/content/blog/2022/03/29/react-v18.md      |  2 +-
 .../extracting-state-logic-into-a-reducer.md  | 84 +++++++++----------
 .../learn/manipulating-the-dom-with-refs.md   |  2 +-
 src/content/learn/tutorial-tic-tac-toe.md     |  4 +-
 src/content/reference/react-dom/hydrate.md    |  8 +-
 src/content/reference/react-dom/render.md     |  6 +-
 .../server/renderToPipeableStream.md          |  4 +-
 .../server/renderToReadableStream.md          |  4 +-
 8 files changed, 57 insertions(+), 57 deletions(-)

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/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index dfc2aa2aad..012a5c3f9d 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -24,7 +24,7 @@ As your components grow in complexity, it can get harder to see at a glance all
 <Sandpack>
 
 ```js App.js
-import {useState} from 'react';
+import { useState } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -80,7 +80,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -104,7 +104,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 (
@@ -462,7 +462,7 @@ You probably won't need to do this yourself, but this is similar to what React d
 Finally, you need to hook up the `tasksReducer` to your component. Import the `useReducer` Hook from React:
 
 ```js
-import {useReducer} from 'react';
+import { useReducer } from 'react';
 ```
 
 Then you can replace `useState`:
@@ -494,7 +494,7 @@ 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';
 
@@ -575,7 +575,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -599,7 +599,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 (
@@ -679,7 +679,7 @@ 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';
@@ -763,7 +763,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('');
@@ -787,7 +787,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 (
@@ -890,7 +890,7 @@ Just like with [updating objects](/learn/updating-objects-in-state#write-concise
 <Sandpack>
 
 ```js App.js
-import {useImmerReducer} from 'use-immer';
+import { useImmerReducer } from 'use-immer';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -965,7 +965,7 @@ const initialTasks = [
 ```
 
 ```js AddTask.js hidden
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
@@ -989,7 +989,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 (
@@ -1127,10 +1127,10 @@ 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);
@@ -1210,7 +1210,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 (
@@ -1277,10 +1277,10 @@ 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);
@@ -1363,7 +1363,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 (
@@ -1421,10 +1421,10 @@ 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);
@@ -1507,7 +1507,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 (
@@ -1560,10 +1560,10 @@ 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);
@@ -1646,7 +1646,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 (
@@ -1708,10 +1708,10 @@ However, _from the user's perspective_, sending a message is a different action
 <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);
@@ -1800,7 +1800,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 (
@@ -1905,10 +1905,10 @@ 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);
@@ -1997,7 +1997,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 (
@@ -2082,10 +2082,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);
@@ -2183,7 +2183,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 (
@@ -2270,10 +2270,10 @@ 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);
@@ -2347,7 +2347,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);
@@ -2383,7 +2383,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 (
@@ -2444,10 +2444,10 @@ 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);
@@ -2521,7 +2521,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);
@@ -2560,7 +2560,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/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index a6c0e69574..b5c1937631 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -643,7 +643,7 @@ Try pressing "Toggle with setState" a few times. The message should disappear an
 <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/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 c02eb8f837..1a3baead75 100644
--- a/src/content/reference/react-dom/render.md
+++ b/src/content/reference/react-dom/render.md
@@ -73,7 +73,7 @@ An app fully built with React will usually only have one `render` call with its
 Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</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'));
@@ -87,7 +87,7 @@ In apps fully built with React, **you will usually only do this once at startup*
 
 ```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'));
@@ -188,7 +188,7 @@ You can call `render` more than once on the same DOM node. As long as the compon
 <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} />);

From 44efd47d9ac5821a0b49cca4cf20b89ed492b51d Mon Sep 17 00:00:00 2001
From: Xavi Lee <awxiaoxian2020@163.com>
Date: Fri, 7 Apr 2023 06:30:07 +0800
Subject: [PATCH 6/6] docs(cn): fix conflicts

---
 src/content/learn/updating-arrays-in-state.md | 6 +-----
 src/content/learn/writing-markup-with-jsx.md  | 4 ----
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 988c1ef4e4..9b11dc58ca 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -553,11 +553,7 @@ artwork.seen = nextSeen; // 问题：直接修改了已有的元素
 setMyList(myNextList);
 ```
 
-<<<<<<< HEAD
-虽然 `myNextList` 这个数组是新的，但是其*内部的元素本身*与原数组 `myList` 是相同的。因此，修改 `artwork.seen`，其实是在修改*原始的* artwork 对象。而这个 artwork 对象也被 `yourArtworks` 使用，这样就带来了 bug。这样的 bug 可能难以想到，但好在如果你避免直接修改 state，它们就会消失。
-=======
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourList`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
->>>>>>> c9d0cbfccd28de357f2b35ba2c2b2aa19b3c0ab4
+虽然 `myNextList` 这个数组是新的，但是其*内部的元素本身*与原数组 `myList` 是相同的。因此，修改 `artwork.seen`，其实是在修改*原始的* artwork 对象。而这个 artwork 对象也被 `yourList` 使用，这样就带来了 bug。这样的 bug 可能难以想到，但好在如果你避免直接修改 state，它们就会消失。
 
 **你可以使用 `map` 在没有 mutation 的前提下将一个旧的元素替换成更新的版本。**
 
diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index 57c81c64a2..60e0b3bec5 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -131,11 +131,7 @@ img { height: 90px }
 
 <Note>
 
-<<<<<<< HEAD
 大部分情况下，React 在屏幕上显示的错误提示就能帮你找到问题所在，如果在编写过程中遇到问题就参考一下提示吧。
-=======
-Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
->>>>>>> c9d0cbfccd28de357f2b35ba2c2b2aa19b3c0ab4
 
 </Note>