[Beta] Split "Components" and "APIs" (#5363)

beta/src/components/MDX/MDXComponents.tsx

@@ -325,6 +325,9 @@ function calculateNestedToc(toc: Toc): NestedTocRoot {
 function InlineToc() {
   const toc = useContext(TocContext);
   const root = useMemo(() => calculateNestedToc(toc), [toc]);
+  if (root.children.length < 2) {
+    return null;
+  }
   return <InlineTocItem items={root.children} />;
 }
 

beta/src/content/apis/react/other.md → beta/src/content/apis/react/apis.md

@@ -1,10 +1,10 @@
 ---
-title: "react: Other APIs"
+title: "react: APIs"
 ---
 
 <Intro>
 
-In addition to [Hooks,](/apis/react) the `react` package exports a few components and other APIs that are useful for defining components. This page lists all the modern React APIs that are not Hooks.
+In addition to [Hooks](/apis/react) and [Components](/apis/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
 
 </Intro>
 
@@ -12,17 +12,7 @@ In addition to [Hooks,](/apis/react) the `react` package exports a few component
 
 ---
 
-## Built-in React components {/*built-in-react-components*/}
+## React APIs {/*react-apis*/}
-
-React exposes a few built-in components that you can use in your JSX.
-
-* [`<Fragment>`](/apis/react/Fragment), alternatively written as `<>...</>`, lets you group multiple JSX nodes together.
-* [`<Suspense>`](/apis/react/Suspense) lets you display a fallback while the child components are loading.
-* [`<StrictMode>`](/apis/react/StrictMode) enables extra development-only checks that help you find bugs early.
-
----
-
-## Other React APIs {/*other-react-apis*/}
 
 * [`createContext`](/apis/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/apis/react/useContext)
 * [`forwardRef`](/apis/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/apis/react/useRef)

beta/src/content/apis/react/components.md

@@ -0,0 +1,20 @@
+---
+title: "react: Components"
+---
+
+<Intro>
+
+React exposes a few built-in components that you can use in your JSX.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Built-in React components {/*built-in-react-components*/}
+
+* [`<Fragment>`](/apis/react/Fragment), alternatively written as `<>...</>`, lets you group multiple JSX nodes together.
+* [`<Profiler>`](/apis/react/Profiler) lets you measure rendering performance of a React tree programmatically.
+* [`<Suspense>`](/apis/react/Suspense) lets you display a fallback while the child components are loading.
+* [`<StrictMode>`](/apis/react/StrictMode) enables extra development-only checks that help you find bugs early.

beta/src/sidebarAPIs.json

@@ -76,8 +76,8 @@
           ]
         },
         {
-          "title": "react: Other APIs",
+          "title": "react: Components",
-          "path": "/apis/react/other",
+          "path": "/apis/react/components",
           "routes": [
             {
               "title": "<Fragment> (<>)",
@@ -94,7 +94,13 @@
             {
               "title": "<Suspense>",
               "path": "/apis/react/Suspense"
-            },
+            }
+          ]
+        },
+        {
+          "title": "react: APIs",
+          "path": "/apis/react/apis",
+          "routes": [
             {
               "title": "createContext",
               "path": "/apis/react/createContext"