diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index d3d54560efc..6da6d49bb36 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho 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. ### Don't mutate Props {/*props*/} -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. +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. ```js {2} function Post({ item }) { @@ -307,7 +307,7 @@ function useIconStyle(icon) { } ``` -If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. +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. ```js {4} 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 ## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/} -Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created. +Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created. 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.