Skip to content

Commit a2d17d1

Browse files
Update components-and-hooks-must-be-pure.md (#7830)
Some grammar fixes, and language clarifications
1 parent bbcb9af commit a2d17d1

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

src/content/reference/rules/components-and-hooks-must-be-pure.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho
207207
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.
208208

209209
### 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.
211211

212212
```js {2}
213213
function Post({ item }) {
@@ -307,7 +307,7 @@ function useIconStyle(icon) {
307307
}
308308
```
309309

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.
311311

312312
```js {4}
313313
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
327327

328328
## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/}
329329

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.
331331

332332
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.
333333

0 commit comments

Comments
 (0)