docs: add beginner-friendly example for useInsertionEffect (#8118)

src/components/MDX/Sandpack/Preview.tsx

@@ -99,10 +99,13 @@ export function Preview({
 
   useEffect(function createBundler() {
     const iframeElement = iframeRef.current!;
-    registerBundler(iframeElement, clientId);
-
+    if (!iframeElement.dataset.registered) {
+      registerBundler(iframeElement, clientId);
+      iframeElement.dataset.registered = 'true';
+    }
     return () => {
       unregisterBundler(clientId);
+      iframeElement.dataset.registered = '';
     };
   }, []);
 

src/content/learn/conditional-rendering.md

@@ -675,26 +675,30 @@ There are multiple ways you could go about this, but here is one starting point:
 
 ```js
 function Drink({ name }) {
-  let part, caffeine, age;
-  if (name === 'tea') {
-    part = 'leaf';
-    caffeine = '15–70 mg/cup';
-    age = '4,000+ years';
-  } else if (name === 'coffee') {
-    part = 'bean';
-    caffeine = '80–185 mg/cup';
-    age = '1,000+ years';
-  }
+  const drinks = {
+    tea: {
+      part: 'leaf',
+      caffeine: '15–70 mg/cup',
+      age: '4,000+ years'
+    },
+    coffee: {
+      part: 'bean',
+      caffeine: '80–185 mg/cup',
+      age: '1,000+ years'
+    }
+  };
+
+  const info = drinks[name];
   return (
     <section>
       <h1>{name}</h1>
       <dl>
         <dt>Part of plant</dt>
-        <dd>{part}</dd>
+        <dd>{info.part}</dd>
         <dt>Caffeine content</dt>
-        <dd>{caffeine}</dd>
+        <dd>{info.caffeine}</dd>
         <dt>Age</dt>
-        <dd>{age}</dd>
+        <dd>{info.age}</dd>
       </dl>
     </section>
   );

src/content/learn/you-might-not-need-an-effect.md

@@ -1272,7 +1272,9 @@ input { margin-top: 10px; }
 
 </Sandpack>
 
-This approach satisfies the requirements too. When you type into the input, only the `text` state variable updates. Since the `text` state variable is in the child `NewTodo` component, the parent `TodoList` component won't get re-rendered. This is why `getVisibleTodos()` doesn't get called when you type. (It would still be called if the `TodoList` re-renders for another reason.)
+This approach works because `getVisibleTodos()` is only called when its dependencies (`todos` or `showActive`) change. In the original implementation, typing in the input doesn’t trigger additional calls because the `text` state is local to the `NewTodo` component and not part of the dependencies. 
+
+The key idea is that both the initial and extracted versions avoid unnecessary recomputations—the update to `text` does not cause `getVisibleTodos()` to run. Extracting `NewTodo` mainly improves clarity by keeping the input state isolated, not by changing performance behavior.
 
 </Solution>
 

src/content/reference/react/useInsertionEffect.md

@@ -62,6 +62,36 @@ function useCSS(rule) {
 ---
 
 ## Usage {/*usage*/}
+### A simple example: inserting a style before the page paints {/*simple-example*/}
+
+If you’re new to `useInsertionEffect`, here’s a minimal example that shows when it runs.  
+It injects a `<style>` tag before the browser paints the UI, ensuring styles are applied immediately.
+
+```js
+import { useInsertionEffect } from 'react';
+
+export default function HighlightExample() {
+  useInsertionEffect(() => {
+    const style = document.createElement('style');
+    style.textContent = `
+      body {
+        background-color: #f0f8ff;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  return (
+    <p>
+      The background color is applied before the component paints!
+    </p>
+  );
+}
+This small example helps visualize that useInsertionEffect runs before any layout or regular effects,
+making it useful for cases where styles or DOM insertions must happen very early in the render lifecycle.
 
 ### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/}