mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
4.3 KiB
JSON
17 lines
4.3 KiB
JSON
{
|
|
"id": "e7a40a89beb93d9ce02bf34c",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "signals",
|
|
"content": "---\ntitle: Signals\norder: 2\nuse_cases: \u003e-\n state management, reactive values, component state, updating ui, tracking\n changes, basic reactivity\ntags:\n - signals\n - state\n - reactivity\n - getter\n - setter\n - fundamentals\nversion: '1.0'\ndescription: \u003e-\n Create reactive state with signals - the foundation of Solid's reactivity\n system for automatic UI updates and tracking.\n---\n\nSignals are the primary means of [managing state](/concepts/intro-to-reactivity#state-management) in your Solid application.\nThey provide a way to store and update values, and are the foundation of [reactivity](/concepts/intro-to-reactivity) in Solid.\n\nSignals can be used to represent any kind of state in your application, such as the current user, the current page, or the current theme.\nThis can be any value, including primitive values such as strings and numbers, or complex values such as objects and arrays.\n\n## Creating a signal\n\nYou can create a signal by calling the [`createSignal`](/reference/basic-reactivity/create-signal) function, which is imported from `solid-js`.\nThis function takes an initial value as an argument, and returns a pair of functions: a **getter** function, and a **setter** function.\n\n```jsx\nimport { createSignal } from \"solid-js\";\n\nconst [count, setCount] = createSignal(0);\n// ^ getter ^ setter\n```\n\n \t:::note\n \t The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).\n\nThis lets you extract values from the array.\nIn the context of `createSignal`, the first value is the getter function, and the second value is the setter function.\n\n:::\n\n## Accessing values\n\nThe getter function returned by `createSignal` is used to access the value of the signal.\nYou call this function with no arguments to get the current value of the signal:\n\n```jsx\nconsole.log(count()); // output: 0\n```\n\n## Updating values\n\nThe setter function returned by `createSignal` is used to update the value of the signal.\nThis function takes an argument that represents the new value of the signal:\n\n```jsx\nsetCount(count() + 1);\n\nconsole.log(count()); // output: 1\n```\n\nThe setter function can also take a function that passes the previous value.\n\n```jsx\nsetCount((prevCount) =\u003e prevCount + 1);\n\nconsole.log(count()); // output: 1\n```\n\n## Reactivity\n\nSignals are reactive, which means that they automatically update when their value changes.\nWhen a signal is called within a [tracking scope](/concepts/intro-to-reactivity#tracking-changes), the signal adds the dependency to a list of subscribers.\nOnce a signal's value changes, it notifies all of its dependencies of the change so they can re-evaluate their values and update accordingly.\n\n```jsx\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\tconst increment = () =\u003e setCount((prev) =\u003e prev + 1);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eCount: {count()}\u003c/span\u003e {/* Updates when `count` changes */}\n\t\t\t\u003cbutton type=\"button\" onClick={increment}\u003e\n\t\t\t\tIncrement\n\t\t\t\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n:::note\nA tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.\n\nBoth functions subscribe to the signals accessed within them, establishing a dependency relationship.\nOnce this relationship is established, the function is notified whenever the signal changes.\n\n:::\n\nTo learn more about how to use Signals in your application, visit our [state management guide](/guides/state-management).",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/signals.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/concepts/signals.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3589,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "e552ff6af1ac05cf39c6baa53834a4f74d2e4e7e88d242dd71286d1795fa7b22",
|
|
"timestamp": "2026-02-23T11:43:00.186862617+01:00"
|
|
} |