Add no mutation after jsx

Author: poteto

src/content/reference/rules/index.md

@@ -32,5 +32,5 @@ The Rules of React are proven rules used at companies like Meta that help you ma
 * [Never pass around Hooks as regular values](/reference/rules/never-pass-around-hooks-as-regular-values): Hooks should only be called inside of components. Never pass it around as a regular value.
 * [Only call Hooks at the top level](/reference/rules/only-call-hooks-at-the-top-level): Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.
 * [Only call Hooks from React functions](/reference/rules/only-call-hooks-from-react-functions): Don’t call Hooks from regular JavaScript functions.
-* [Values are immutable after being passed to JSX](/reference/rules/values-are-immutable-after-being-passed-to-jsx): TODO
+* [Values are immutable after being passed to JSX](/reference/rules/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.
 * [Return values and arguments to Hooks are immutable](/reference/rules/return-values-and-arguments-to-hooks-are-immutable): TODO

src/content/reference/rules/only-call-hooks-from-react-functions.md

@@ -11,7 +11,7 @@ Don’t call Hooks from regular JavaScript functions.
 Don’t call Hooks from regular JavaScript functions. Instead, you can:
 
 ✅ Call Hooks from React function components.
-✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).
+✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
 
 By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
 

src/content/reference/rules/values-are-immutable-after-being-passed-to-jsx.md

@@ -3,5 +3,41 @@ title: Values are immutable after being passed to JSX
 ---
 
 <Intro>
-TODO
-</Intro>
+Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created.
+</Intro>
+
+---
+
+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.
+
+```js {4}
+function Page({ colour }) {
+  const styles = { colour, size: "large" };
+  const header = <Header styles={styles} />;
+  styles.size = "small"; // ❌ styles was already used in the JSX above!
+  const footer = <Footer styles={styles} />;
+  return (
+    <>
+      {header}
+      <Content />
+      {footer}
+    </>
+  );
+}
+```
+
+```js {4}
+function Page({ colour }) {
+  const headerStyles = { colour, size: "large" };
+  const header = <Header styles={headerStyles} />;
+  const footerStyles = { colour, size: "small" }; // ✅ we created a new value
+  const footer = <Footer styles={footerStyles} />;
+  return (
+    <>
+      {header}
+      <Content />
+      {footer}
+    </>
+  );
+}
+```