From 26a3bab8bcc3567dd14d31501a30038f1317bd1b Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 16 Dec 2024 17:59:53 -0600 Subject: [PATCH] add note about destructuring breaking reactivity --- src/routes/concepts/components/props.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/concepts/components/props.mdx b/src/routes/concepts/components/props.mdx index 0346a4343..12e13afcc 100644 --- a/src/routes/concepts/components/props.mdx +++ b/src/routes/concepts/components/props.mdx @@ -56,7 +56,8 @@ Instead, you should access props directly from the `props` object, or wrap them ```typescript function MyComponent(props) { - const name = props.name; // ❌: breaks reactivity and will not update when the prop value changes + const { name } = props; // ❌: breaks reactivity and will not update when the prop value changes + const name = props.name; // ❌: another example of breaking reactivity const name = () => props.name; // ✓: by wrapping `props.name` into a function, `name()` always retrieves its current value } ```