Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(state): add guidance on signals as props #6574

Merged
merged 3 commits into from
Jun 20, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/docs/src/routes/docs/(qwik)/components/state/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ contributors:
- aivarsliepa
- Balastrong
- Jemsco
- shairez
updated_at: '2023-10-04T21:48:45Z'
created_at: '2023-03-20T23:45:13Z'
---
Expand Down Expand Up @@ -73,6 +74,25 @@ export default component$(() => {

This example above shows how `useSignal()` can be used in a counter component to keep track of the count. Modifying the `count.value` property will cause the component to be updated automatically. For instance, when the property is changed in the button click handler as in the example above.

> **NOTE** If you just need to read the signal's value, don't pass the entire signal as a prop, instead pass only its value:

⛔ **Avoid:**

```tsx
const isClosedSig = useSignal(false);

return <Child isClosed={isClosedSig} />;
```

✅ **Instead do:**

```tsx
const isClosedSig = useSignal(false);

return <Child isClosed={isClosedSig.value} />;
```


## `useStore()`

Works very similarly to `useSignal()`, but it takes an object as its initial value and the reactivity extends to nested objects and arrays by default. One can think of a store as a multiple-value signal or an object made of several signals.
Expand Down
Loading