From 9954b2f4065cb3433b35e36b71fe50d5d527b70e Mon Sep 17 00:00:00 2001
From: "mintlify-development[bot]"
 <109878554+mintlify-development[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 02:29:28 +0000
Subject: [PATCH] docs: condense custom React components guide

---
 customize/react-components.mdx | 79 +++++++++-------------------------
 1 file changed, 20 insertions(+), 59 deletions(-)

diff --git a/customize/react-components.mdx b/customize/react-components.mdx
index 159b84100..a55670998 100644
--- a/customize/react-components.mdx
+++ b/customize/react-components.mdx
@@ -6,17 +6,12 @@ keywords: ["React components", "interactive components", "JSX", "custom componen
 
 import { ColorGenerator } from "/snippets/color-generator.jsx";
 
-[React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
+Build interactive elements in your docs using [React components](https://react.dev) and [hooks](https://react.dev/reference/react/hooks) directly in MDX files.
 
-## Using React components
+## Inline components
 
-You can build React components directly in your MDX files using [React hooks](https://react.dev/reference/react/hooks).
+Declare components directly in your MDX file:
 
-### Example
-
-This example declares a `Counter` component and then uses it with `<Counter />`.
-
-```mdx
 export const Counter = () => {
   const [count, setCount] = useState(0)
 
@@ -51,58 +46,34 @@ export const Counter = () => {
 }
 
 <Counter />
-```
 
+```mdx
 export const Counter = () => {
   const [count, setCount] = useState(0)
-
   const increment = () => setCount(count + 1)
   const decrement = () => setCount(count - 1)
 
   return (
-  <div className="flex items-center justify-center">
-      <div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
-        <button
-          onClick={decrement}
-          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
-          aria-label="Decrease"
-        >
-          -
-        </button>
-
-        <div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
-          {count}
-        </div>
-
-        <button
-          onClick={increment}
-          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
-          aria-label="Increase"
-        >
-          +
-        </button>
-      </div>
+    <div>
+      <button onClick={decrement}>-</button>
+      <span>{count}</span>
+      <button onClick={increment}>+</button>
     </div>
   )
 }
 
-The counter renders as an interactive React component.
-
 <Counter />
+```
 
 ## Importing components
 
-To import React components in your MDX files, the component files must be located in the `/snippets/` folder. Learn more about [reusable snippets](/create/reusable-snippets).
+Component files must be in the `/snippets/` folder. Learn more about [reusable snippets](/create/reusable-snippets).
 
 <Note>
-Nested imports are not supported. If a React component references other components, you must import all components directly into the parent MDX file rather than importing components within component files.
+Nested imports are not supported. Import all referenced components directly into the parent MDX file.
 </Note>
 
-### Example
-
-This example declares a `ColorGenerator` component that uses multiple React hooks and then uses it in an MDX file.
-
-Create `color-generator.jsx` file in the `snippets` folder:
+Create a component file in `snippets/`:
 
 ```mdx /snippets/color-generator.jsx [expandable]
 export const ColorGenerator = () => {
@@ -217,7 +188,7 @@ export const ColorGenerator = () => {
 }
 ```
 
-Import the `ColorGenerator` component and use it in an MDX file:
+Then import and use it:
 
 ```mdx
 import { ColorGenerator } from "/snippets/color-generator.jsx"
@@ -225,24 +196,14 @@ import { ColorGenerator } from "/snippets/color-generator.jsx"
 <ColorGenerator />
 ```
 
-The color generator renders as an interactive React component.
-
 <ColorGenerator />
 
 ## Considerations
 
-<AccordionGroup>
-  <Accordion title="Client-side rendering impact">
-    React hook components render on the client-side, which has several implications:
-
-    - **SEO**: Search engines might not fully index dynamic content.
-    - **Initial load**: Visitors may experience a flash of loading content before components render.
-    - **Accessibility**: Ensure dynamic content changes are announced to screen readers.
-  </Accordion>
-  <Accordion title="Performance best practices">
-    - **Optimize dependency arrays**: Include only necessary dependencies in your `useEffect` dependency arrays.
-    - **Memoize complex calculations**: Use `useMemo` or `useCallback` for expensive operations.
-    - **Reduce re-renders**: Break large components into smaller ones to prevent cascading re-renders.
-    - **Lazy loading**: Consider lazy loading complex components to improve initial page load time.
-  </Accordion>
-</AccordionGroup>
+- **SEO**: Search engines may not fully index client-rendered dynamic content.
+- **Initial load**: Visitors may see a flash before components render.
+- **Accessibility**: Ensure dynamic content changes are announced to screen readers.
+- **Optimize dependency arrays**: Only include necessary dependencies in `useEffect`.
+- **Memoize expensive operations**: Use `useMemo` or `useCallback` where appropriate.
+- **Reduce re-renders**: Break large components into smaller ones.
+- **Lazy loading**: Lazy load complex components to improve initial page load.