From cba901d77a76a989e1610d40ced7cc52e4e66b6d Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 16 Dec 2024 18:10:31 -0600 Subject: [PATCH] add note about destructuring breaking reactivity (#986) --- 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 } ```