You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/rules/components-and-hooks-must-be-pure.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho
207
207
You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered.
208
208
209
209
### Don't mutate Props {/*props*/}
210
-
Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug since it may or may not work depending on the circumstance.
210
+
Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances.
211
211
212
212
```js {2}
213
213
functionPost({ item }) {
@@ -307,7 +307,7 @@ function useIconStyle(icon) {
307
307
}
308
308
```
309
309
310
-
If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that.
310
+
If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that.
311
311
312
312
```js {4}
313
313
style =useIconStyle(icon); // `style` is memoized based on `icon`
@@ -327,7 +327,7 @@ Similarly, it's important to not modify the return values of Hooks, as they may
327
327
328
328
## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/}
329
329
330
-
Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created.
330
+
Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created.
331
331
332
332
When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output.
0 commit comments