From c6d069ac6d066aafc9ce394fb1e563c4567fc974 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 May 2025 10:30:23 +0330 Subject: [PATCH 1/2] Improve reference --- src/routes/reference/components/show.mdx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/routes/reference/components/show.mdx b/src/routes/reference/components/show.mdx index 2d7fa8f5f..cca4b2778 100644 --- a/src/routes/reference/components/show.mdx +++ b/src/routes/reference/components/show.mdx @@ -26,8 +26,7 @@ function Example() { ## Keyed rendering -When the `keyed` prop is set to `true`, the children of the `` component are re-rendered every time the `when` prop changes. -It's important to note that in this case, even if the reference of the `when` prop changes, the children will still re-render. +When the `keyed` prop is set to `true`, changes to the `when` prop—including reference changes—trigger a re-render of the `` component’s children. ```tsx import { createSignal, Show } from "solid-js"; @@ -59,11 +58,11 @@ The `` component can also accept a render function as its child. In this case, the first argument of the render function is an _accessor_ to the `when` prop. However, when the `keyed` prop is set to `true`, the argument is the `when` prop itself instead of an accessor. -The render function is treated like a separate component. -A key point to understand is that the render function is wrapped in [`untrack`](/reference/reactive-utilities/untrack). -As a result, any changes to signals accessed directly within the render function will not trigger updates. +When a render function is used, it is internally wrapped with [`untrack`](/reference/reactive-utilities/untrack). +As a result, signals accessed directly within the render function's scope will not react to updates. -For example, in the following code, clicking the increment button does not update the count value displayed on the screen because the `count` signal is not tracked. +For example, in the following code, the count displayed in the first `` component does not update when the `count` signal changes. +However, the second `` component does update since the `count` signal is accessed within a JSX element, which creates a tracking scope. ```tsx import { createSignal, Show } from "solid-js"; @@ -73,9 +72,9 @@ function RenderFunctionExample() { return (
- {/* This does not update because the count signal is not being tracked. */} + {/* This does not update. */} {(c) => count()} - {/* This will update because the outer JSX element creates a tracking scope. */} + {/* This will update. */} {(c) => <>{count()}}
); From 89d00f73ca8cfa61b0efbd0c00f8148aaea6bc8b Mon Sep 17 00:00:00 2001 From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Sun, 4 May 2025 19:30:23 +0330 Subject: [PATCH 2/2] Update src/routes/reference/components/show.mdx Co-authored-by: Sarah --- src/routes/reference/components/show.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/reference/components/show.mdx b/src/routes/reference/components/show.mdx index cca4b2778..1a9788ab0 100644 --- a/src/routes/reference/components/show.mdx +++ b/src/routes/reference/components/show.mdx @@ -26,7 +26,7 @@ function Example() { ## Keyed rendering -When the `keyed` prop is set to `true`, changes to the `when` prop—including reference changes—trigger a re-render of the `` component’s children. +When the `keyed` is set to `true`, any change to the `when` prop — including changes in its reference — will cause the `` component to re-render its children. ```tsx import { createSignal, Show } from "solid-js";