update

Author: LadyBluenotes

src/routes/reference/components/create-dynamic.mdx

@@ -62,21 +62,25 @@ Returns the rendered component or element.
 ## Example
 
 ```tsx
+import { createSignal } from "solid-js";
+
 const views = {
-	red: () => <p style={{ color: "red" }}>Red</p>,
-	blue: () => <p style={{ color: "blue" }}>Blue</p>,
+	red: (props: { label: string }) => <p style={{ color: "red" }}>{props.label}</p>,
+	blue: (props: { label: string }) => <p style={{ color: "blue" }}>{props.label}</p>,
 };
 
-const [selected, setSelected] = createSignal<keyof typeof views>("red");
+function App() {
+	const [selected, setSelected] = createSignal<keyof typeof views>("red");
 
 	return (
 		<>
 			<button onClick={() => setSelected("red")}>Red</button>
 			<button onClick={() => setSelected("blue")}>Blue</button>
 
-			{createDynamic(() => views[selected()], {})}
+			{createDynamic(() => views[selected()], { label: "Selected view" })}
 		</>
 	);
+}
 ```
 
 ## Related

src/routes/reference/components/dynamic.mdx

@@ -66,21 +66,25 @@ Returns the rendered component or element.
 ## Example
 
 ```tsx
+import { createSignal } from "solid-js";
+
 const views = {
-	red: () => <p style={{ color: "red" }}>Red</p>,
-	blue: () => <p style={{ color: "blue" }}>Blue</p>,
+	red: (props: { label: string }) => <p style={{ color: "red" }}>{props.label}</p>,
+	blue: (props: { label: string }) => <p style={{ color: "blue" }}>{props.label}</p>,
 };
 
-const [selected, setSelected] = createSignal<keyof typeof views>("red");
+function App() {
+	const [selected, setSelected] = createSignal<keyof typeof views>("red");
 
 	return (
 		<>
 			<button onClick={() => setSelected("red")}>Red</button>
 			<button onClick={() => setSelected("blue")}>Blue</button>
 
-			<Dynamic component={views[selected()]} />
+			<Dynamic component={views[selected()]} label="Selected view" />
 		</>
 	);
+}
 ```
 
 ## Related

src/routes/reference/components/error-boundary.mdx

@@ -64,10 +64,14 @@ Returns the rendered children or fallback content.
 ### Basic usage
 
 ```tsx
+function ErrorProne() {
+	throw new Error("Broken");
+}
+
 <ErrorBoundary
 	fallback={(error, reset) => (
 		<div>
-			<p>{error.message}</p>
+			<p>{String(error)}</p>
 			<button onClick={reset}>Try Again</button>
 		</div>
 	)}

src/routes/reference/components/for.mdx

@@ -88,7 +88,7 @@ const items = ["A", "B", "C"];
 <For each={items}>
 	{(item, index) => (
 		<div>
-			#{index} {item}
+			#{index()} {item}
 		</div>
 	)}
 </For>;

src/routes/reference/components/no-hydration.mdx

@@ -56,9 +56,9 @@ Returns the server-rendered children.
 function Example() {
 	return (
 		<div>
-			<InteractiveComponent />
+			<button>Interactive button</button>
 			<NoHydration>
-				<StaticContent />
+				<div innerHTML={"<strong>Server-rendered only</strong>"} />
 			</NoHydration>
 		</div>
 	);

src/routes/reference/components/portal.mdx

@@ -89,12 +89,11 @@ Returns a marker node used to preserve the portal position in the component tree
 
 ```tsx
 import { createSignal, Show } from "solid-js";
-import { Portal } from "solid-js/web";
 
 function App() {
-  const [open, setOpen] = createSignal(false);
+	const [open, setOpen] = createSignal(false);
 
-return (
+	return (
 		<>
 			<button onClick={() => setOpen(true)}>Open</button>
 

src/routes/reference/components/show.mdx

@@ -67,45 +67,46 @@ Content rendered when `when` is falsy.
 
 ### `children`
 
-- **Type:** `JSX.Element | ((item) => JSX.Element)`
+- **Type:** `JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element) | ((item: NonNullable<T>) => JSX.Element)`
 
-Content rendered when `when` is truthy. Function children receive an accessor or value based on `keyed`.
+Content rendered when `when` is truthy.
 
 ## Return value
 
 - **Type:** `JSX.Element`
 
+Returns the rendered children or `fallback` content.
+
 ## Behavior
 
-- With `keyed` omitted or `false`, `<Show>` re-renders only when the truthiness of `when` changes.
-- With `keyed={true}`, changes to the `when` value itself trigger a new render even when the value remains truthy.
+- With `keyed` omitted or `false`, `<Show>` updates only when the truthiness of `when` changes. Replacing one truthy value with another truthy value does not recreate the child block, and function children receive an accessor that can only be read while the condition remains truthy.
+- With `keyed={true}`, changes to the `when` value trigger a new render even when the value remains truthy, and function children receive the value directly.
 - Function children are wrapped in [`untrack`](/reference/reactive-utilities/untrack).
-- With `keyed={false}`, function children receive an accessor for the current non-nullish value; with `keyed={true}`, they receive the value directly.
 
 ## Examples
 
 ### Basic usage
 
 ```tsx
-import { Show } from "solid-js";
+const loading = () => false;
 
-<Show when={value()} fallback={<div>Fallback Element</div>}>
-	<div>Child Element</div>
+<Show when={!loading()} fallback={<div>Loading...</div>}>
+	<div>Loaded</div>
 </Show>;
 ```
 
 ### Function child
 
 ```tsx
-import { Show } from "solid-js";
+const user = () => ({ name: "Ada" });
 
 <Show when={user()}>{(user) => <div>{user().name}</div>}</Show>;
 ```
 
 ### Keyed function child
 
 ```tsx
-import { Show } from "solid-js";
+const user = () => ({ name: "Ada" });
 
 <Show when={user()} keyed>
 	{(user) => <div>{user.name}</div>}