Devour/devour_data/docs/intro-to-reactivity.json

{
  "id": "0f1666f8bc1c83689c748173",
  "source": "solid:signals",
  "type": "github-document",
  "title": "intro-to-reactivity",
  "content": "---\ntitle: Intro to reactivity\norder: 1\nuse_cases: \u003e-\n  learning reactivity, understanding signals, reactive principles, state\n  management basics, getting started\ntags:\n  - reactivity\n  - signals\n  - fundamentals\n  - state\n  - subscribers\n  - basics\nversion: '1.0'\ndescription: \u003e-\n  Master Solid's reactive system fundamentals: signals, subscribers, and\n  automatic UI updates for responsive applications.\n---\n\n**Note**: While this guide is useful for understanding reactive systems, it does use some Solid-specific terminology.\n\nReactivity powers the interactivity in Solid applications.\nThis programming paradigm refers to a system's ability to respond to changes in data or state automatically.\nWith Solid, reactivity is the basis of its design, ensuring applications stay up-to-date with their underlying data.\n\n## Importance of reactivity\n\n1. Reactivity keeps the user interface (UI) and state in sync, which reduces the need for manual updates.\n\n2. Real-time updates create a more responsive and interactive user experience.\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{\" \"}\n\t\t\t{/* Only `count()` is updated when the button is clicked. */}\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\nThis `Counter` function sets up a button that, when clicked, calls the `increment` function to increase the `count` by one.\nThis updates just the number displayed _without_ refreshing the entire component.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=cry9JT4nroFQ4rRxzOpvCg\"\n\tpreview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=cry9JT4nroFQ4rRxzOpvCg\u0026type=embed\"\n/\u003e\n\n## Reactive principles\n\n### Signals\n\nSignals serve as core elements in reactive systems, playing an important role in data management and system responsiveness.\nThey are responsible for storing and managing data, as well as triggering updates across the system.\nThis is done through the use of getters and setters.\n\n```jsx\nconst [count, setCount] = createSignal(0);\n//     ^ getter  ^ setter\n```\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=lseAEjGlKLslaVsTlfej_g\"\n\tpreview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=lseAEjGlKLslaVsTlfej_g\u0026type=embed\"\n/\u003e\n\n- **Getter**: A function responsible for accessing the current value of the signal.\n  You call a getter to access the data stored in a signal within a component.\n\n- **Setter**:\n  The function used to modify a signal's value.\n  To trigger reactive updates across an application, you call a setter to update the value of a signal.\n\n```js\nconsole.log(count()); // `count()` is a getter that returns the current value of `count`, which is `0`.\n\nsetCount(1); // the setter, `setCount`, updates the value of `count`.\n\nconsole.log(count()); // the updated value of `count` is now `1`.\n```\n\n### Subscribers\n\nSubscribers are the other core element in reactive systems.\nThey are responsible for tracking changes in signals and updating the system accordingly.\nThey are automated responders that keep the system up-to-date with the latest data changes.\n\nSubscribers work based on two main actions:\n\n- **Observation**: At their core, subscribers observe signals.\n  This keeps the subscriber primed to pick up on any changes to the signal they are tracking.\n- **Response**: When a signal changes, the subscriber is notified.\n  This triggers the subscriber to respond to the change in the signal.\n  This can involve tasks like updating the UI or calling external functions.\n\n```jsx\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\tconst increment = () =\u003e setCount((prev) =\u003e prev + 1);\n\n\tcreateEffect(() =\u003e {\n\t\tconsole.log(count());\n\t});\n\t// the `createEffect` will trigger the console log every time `count` changes.\n}\n```\n\n## State management\n\nState management is the process of managing the state of an application.\nThis involves storing and updating data, as well as responding to the changes in it.\n\nWith Solid, state management is handled through signals and subscribers.\nSignals are used to store and update data, while subscribers are used to respond to changes in the data.\n\n### Tracking changes\n\nTracking changes involves monitoring any updates to the data and responding accordingly.\nThis is done through the use of subscribers.\n\nWhen a signal is not accessed within a tracking scope, an update to the signal will not trigger an update.\nThis happens because if a signal is not being tracked, it is not able to notify any subscribers of the change.\n\n```jsx\nconst [count, setCount] = createSignal(0);\n\nconsole.log(\"Count:\", count());\n\nsetCount(1);\n\n// Output: Count: 0\n\n// `count` is not being tracked, so the console log will not update when `count` changes.\n```\n\nInitialization, or creation is a **one-time event** that doesn't cause tracking.\nTo track a signal, it must be accessed within the scope of a subscriber.\nReactive primitives, such as [memos](/concepts/derived-values/memos) can be used to create derived values from signals or other memos, and [effects](/concepts/effects) to create subscribers that use the reactive graph output once it's settled.\n\n```jsx\nconst [count, setCount] = createSignal(0);\n\ncreateEffect(() =\u003e {\n\tconsole.log(\"Count:\", count());\n});\n\nsetCount(1);\n\n// Output: Count: 0\n//         Count: 1\n```\n\n### Updating the UI\n\nThe UI of a Solid application is built using [JSX](/concepts/understanding-jsx).\nJSX creates a tracking scope behind the scenes, which allows signals to be tracked within the return statement of a component.\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{\" \"}\n\t\t\t{/* ✅ will update 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\nComponents, much like other functions, will only run _once_.\nThis means that if a signal is accessed outside of the return statement, it will run on initialization, but any updates to the signal will not trigger an update.\n\n```jsx\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\tconst increment = () =\u003e setCount((prev) =\u003e prev + 1);\n\n\tconsole.log(\"Count:\", count()); // ❌ not tracked - only runs once during initialization.\n\n\tcreateEffect(() =\u003e {\n\t\tconsole.log(count()); // ✅ will update whenever `count()` changes.\n\t});\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eCount: {count()}\u003c/span\u003e{/* ✅ will update whenever `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\nTo learn more about managing state in Solid, visit the [guide on state management](/guides/state-management).\n\n## Synchronous vs. asynchronous\n\nReactive systems are designed to respond to changes in data.\nThese responses can be immediate or delayed, depending on the nature of the system.\nOften, the choice between these two depends on the requirements of the application and the nature of the tasks involved.\n\n### Synchronous reactivity\n\n[Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous) reactivity is Solid's default reactivity mode, where a system responds to changes in a direct and linear fashion.\nWhen a signal changes, any corresponding subscribers are immediately updated in an ordered manner.\n\nWith synchronous reactivity, the system is able to respond to changes in a predictable manner.\nThis is useful in scenarios where the order of updates is important.\nFor example, if a subscriber depends on another signal, it is important that the subscriber is updated after the signal it depends on.\n\n```jsx\nconst [count, setCount] = createSignal(0);\nconst [double, setDouble] = createSignal(0);\n\ncreateEffect(() =\u003e {\n\tsetDouble(count() * 2);\n});\n```\n\nIn this example, the `double` signal will always be updated after `count` due to synchronous reactivity.\nThis ensures that `double` is always up-to-date with the latest value of `count`.\n\n### Asynchronous reactivity\n\n[Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous) reactivity is when a system responds to changes in a delayed or non-linear fashion.\nWhen a signal changes, the corresponding subscribers are not immediately updated.\nInstead, the system waits for a specific event or task to complete before updating the subscribers.\n\nThis is important in scenarios where subscribers depend on multiple signals.\nIn these cases, updating one signal before another could result in data inconsistency.\nFor example, if a subscriber depends on two signals, it is important that the subscriber is updated after both signals have been updated.\nRather, the system waits for both signals to be updated before updating the subscriber.\n\n**Note:** When asynchronous reactivity is present, it is important to ensure that the system is able to handle the delay in updates.\n[`batch`](/reference/reactive-utilities/batch) can be used to delay an update so the subscriber runs after each signal has been updated.\n\n## Key concepts\n\n- Signals are the core elements of a reactive system.\n  They are responsible for storing and managing data.\n- Signals are both readable and writeable because of getters and setters.\n- Subscribers are automated responders that track changes in signals and update the system accordingly.\n- Signals and subscribers work together to ensure that the system is kept up-to-date with the latest data changes.\n- A reactive system is built on the principles of data-driven reactivity.\n  This means that the system's reactivity is driven by the data it is built on.\n- Reactive systems can be synchronous or asynchronous.\n\nIf you want to dive deeper, visit the [guide on fine-grained reactivity](/advanced-concepts/fine-grained-reactivity).",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/intro-to-reactivity.mdx",
  "metadata": {
    "path": "src/routes/concepts/intro-to-reactivity.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 9920,
    "source_type": "github"
  },
  "hash": "ff4951e27531cc39d40c7219ea658f8fcd9fd759130ca92c740c84a4a2a3fdb0",
  "timestamp": "2026-02-23T11:43:00.186809387+01:00"
}