{/* ... so ShippingForm's props will never be the same, and it will re-render every time */}
@@ -216,7 +216,7 @@ function useCallback(fn, dependencies) {
#### Should you add useCallback everywhere? {/*should-you-add-usecallback-everywhere*/}
-If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
Caching a function with `useCallback` is only valuable in a few cases:
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index ed231c39483..0f68a0e9787 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -60,7 +60,7 @@ import { useContext } from 'react';
function Button() {
const theme = useContext(ThemeContext);
- // ...
+ // ...
```
`useContext` returns the
context value for the
context you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context.
@@ -845,7 +845,7 @@ export default function AddTask() {
type: 'added',
id: nextId++,
text: text,
- });
+ });
}}>Add
);
@@ -1292,7 +1292,7 @@ export const LevelContext = createContext(0);
You can pass any values via context, including objects and functions.
-```js [[2, 10, "{ currentUser, login }"]]
+```js [[2, 10, "{ currentUser, login }"]]
function MyApp() {
const [currentUser, setCurrentUser] = useState(null);
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 74fdab8aea0..081d2894118 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -40,7 +40,7 @@ function SearchPage() {
#### Returns {/*returns*/}
-During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value).
+During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value).
#### Caveats {/*caveats*/}
@@ -179,7 +179,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -285,7 +285,7 @@ input { margin: 10px; }
-A common alternative UI pattern is to *defer* updating the list of results and to keep showing the previous results until the new results are ready. Call `useDeferredValue` to pass a deferred version of the query down:
+A common alternative UI pattern is to *defer* updating the list of results and to keep showing the previous results until the new results are ready. Call `useDeferredValue` to pass a deferred version of the query down:
```js {3,11}
export default function App() {
@@ -394,7 +394,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -623,7 +623,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 46f651a8ea1..ca8347737b6 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -45,7 +45,7 @@ function ChatRoom({ roomId }) {
#### Parameters {/*parameters*/}
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. After your component is removed from the DOM, React will run your cleanup function.
-
+
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every re-render of the component. [See the difference between passing an array of dependencies, an empty array, and no dependencies at all.](#examples-dependencies)
#### Returns {/*returns*/}
@@ -110,7 +110,7 @@ You need to pass two arguments to `useEffect`:
- Then, your
setup code runs with the new props and state.
3. Your
cleanup code runs one final time after your component is removed from the page *(unmounts).*
-**Let's illustrate this sequence for the example above.**
+**Let's illustrate this sequence for the example above.**
When the `ChatRoom` component above gets added to the page, it will connect to the chat room with the initial `serverUrl` and `roomId`. If either `serverUrl` or `roomId` change as a result of a re-render (say, if the user picks a different chat room in a dropdown), your Effect will *disconnect from the previous room, and connect to the next one.* When the `ChatRoom` component is removed from the page, your Effect will disconnect one last time.
@@ -1079,7 +1079,7 @@ If either `serverUrl` or `roomId` change, your Effect will reconnect to the chat
```js {8}
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
-
+
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
@@ -1433,7 +1433,7 @@ function Counter() {
}
```
-Since `count` is a reactive value, it must be specified in the list of dependencies. However, that causes the Effect to cleanup and setup again every time the `count` changes. This is not ideal.
+Since `count` is a reactive value, it must be specified in the list of dependencies. However, that causes the Effect to cleanup and setup again every time the `count` changes. This is not ideal.
To fix this, [pass the `c => c + 1` state updater](/reference/react/useState#updating-state-based-on-the-previous-state) to `setCount`:
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 4ea029f27a6..1b06d9b46e4 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -189,7 +189,7 @@ Inside React, `useId` is generated from the "parent path" of the calling compone
### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
-If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
+If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 0238facf7b4..7db4305eceb 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -45,7 +45,7 @@ function useCSS(rule) {
#### Parameters {/*parameters*/}
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, but before any layout effects fire, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. When your component is removed from the DOM, React will run your cleanup function.
-
+
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
#### Returns {/*returns*/}
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 5af3ec5a6c7..55a53b60278 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -48,7 +48,7 @@ function Tooltip() {
#### Parameters {/*parameters*/}
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
-
+
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every re-render of the component.
#### Returns {/*returns*/}
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index c96c1a9426a..bb9692d6fac 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -143,7 +143,7 @@ Also note that measuring performance in development will not give you the most a
#### Should you add useMemo everywhere? {/*should-you-add-usememo-everywhere*/}
-If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
Optimizing with `useMemo` is only valuable in a few cases:
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index 3477660d2c7..1dddc0d4f99 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -38,7 +38,7 @@ function MyComponent() {
#### Parameters {/*parameters*/}
-* `reducer`: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types.
+* `reducer`: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types.
* `initialArg`: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next `init` argument.
* **optional** `init`: The initializer function that should return the initial state. If it's not specified, the initial state is set to `initialArg`. Otherwise, the initial state is set to the result of calling `init(initialArg)`.
@@ -198,7 +198,7 @@ Actions can have any shape. By convention, it's common to pass objects with a `t
```js {5,9-12}
function Form() {
const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
-
+
function handleButtonClick() {
dispatch({ type: 'incremented_age' });
}
@@ -290,7 +290,7 @@ export default function Form() {
dispatch({
type: 'changed_name',
nextName: e.target.value
- });
+ });
}
return (
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index d23fa489b3a..7e4b8c024e3 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -605,8 +605,8 @@ export default function Form() {
(located in {person.artwork.city})
- 
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 955b751f8d1..65a76d425b8 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -107,7 +107,7 @@ It returns the snapshot of the data in the store.
React will use these functions to keep your component subscribed to the store and re-render it on changes.
-For example, in the sandbox below, `todosStore` is implemented as an external store that stores data outside of React. The `TodosApp` component connects to that external store with the `useSyncExternalStore` Hook.
+For example, in the sandbox below, `todosStore` is implemented as an external store that stores data outside of React. The `TodosApp` component connects to that external store with the `useSyncExternalStore` Hook.
@@ -408,7 +408,7 @@ This `subscribe` function is defined *inside* a component so it is different on
```js {4-7}
function ChatIndicator() {
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-
+
// 🚩 Always a different function, so React will resubscribe on every re-render
function subscribe() {
// ...
@@ -417,7 +417,7 @@ function ChatIndicator() {
// ...
}
```
-
+
React will resubscribe to your store if you pass a different `subscribe` function between re-renders. If this causes performance issues and you'd like to avoid resubscribing, move the `subscribe` function outside:
```js {6-9}
@@ -437,7 +437,7 @@ Alternatively, wrap `subscribe` into [`useCallback`](/reference/react/useCallbac
```js {4-8}
function ChatIndicator({ userId }) {
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-
+
// ✅ Same function as long as userId doesn't change
const subscribe = useCallback(() => {
// ...
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde7107f..3a20f8cdffc 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -151,7 +151,7 @@ export default function TabContainer() {
function selectTab(nextTab) {
startTransition(() => {
- setTab(nextTab);
+ setTab(nextTab);
});
}
@@ -823,7 +823,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1017,7 +1017,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1288,7 +1288,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1332,7 +1332,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1379,9 +1379,9 @@ async function getBio() {
setTimeout(resolve, 500);
});
- return `The Beatles were an English rock band,
- formed in Liverpool in 1960, that comprised
- John Lennon, Paul McCartney, George Harrison
+ return `The Beatles were an English rock band,
+ formed in Liverpool in 1960, that comprised
+ John Lennon, Paul McCartney, George Harrison
and Ringo Starr.`;
}