update

devour_data/docs/create-context.json

@@ -0,0 +1,17 @@
+{
+  "id": "f9b5a16cefb4e0d6b77ebf73",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "create-context",
+  "content": "---\ntitle: createContext\norder: 5\nuse_cases: \u003e-\n  prop drilling, global state, theme providers, user authentication, app-wide\n  settings, dependency injection\ntags:\n  - context\n  - providers\n  - global-state\n  - props\n  - dependency-injection\nversion: '1.0'\ndescription: \u003e-\n  Create context providers with createContext to share data across components\n  without prop drilling. Perfect for themes, auth, and global app state.\n---\n\nContext provides a form of dependency injection in Solid.\nIt is used to save from needing to pass data as props through intermediate components (aka **prop drilling**).\nThis function creates a new context object that can be used with [useContext](/reference/component-apis/use-context) and offers the Provider control flow.\nThe default value is used when no Provider is found above in the hierarchy.\n\n## Usage\n\nTo avoid reinstatiating a new context when Hot-Module Replacement (HMR) occurs, it is recommended to use `createContext` in its own module (file).\n\n:::danger[Hot-Module Replacement]\nWhen using HMR, the context is lost when the module is reloaded.\nWhich will cause an error to be thrown as `useContext` will try to access it while it is still reloading.\n:::\n\nFor example:\n\n```ts title=\"/context/counter.ts\"\nimport { createContext } from \"solid-js\";\n\nexport const INITIAL_COUNT = 0;\n\nconst INITIAL_STORE_SETTER = {\n\tincrement: () =\u003e {},\n\tdecrement: () =\u003e {}\n};\n\nexport const CounterContext = createContext([\n\t{ count: INITIAL_COUNT },\n\tINITIAL_STORE_SETTER\n]);\n```\n\nWith the context created in its own module, you can use to instantiate the context provider.\n\n```ts title=\"/context/counter-component.tsx\"\nimport { createStore } from 'solid-js/store';\nimport { CounterContext, INITIAL_COUNT } from \"./counter.ts\";\n\nexport function CounterProvider(props) {\n    const [value, setValue] = createStore({ count: props.initialCount || INITIAL_COUNT })\n\n    const counter = [\n        value,\n        {\n            increment() {\n                setValue(\"count\", currentCount =\u003e currentCount + 1)\n            },\n            decrement() {\n                setValue(\"count\", currentCount =\u003e currentCount - 1)\n            },\n        },\n    ]\n\n    return (\n        \u003cCounterContext.Provider value={counter}\u003e\n            {props.children}\n        \u003c/CounterContext.Provider\u003e\n    )\n}\n```\n\nA few imporant notes on how to pass data through the context API:\n\n- The value passed to provider is passed to `useContext` as is.\n- Wrapping as a reactive expression will not work.\n- You should pass in Signals and Stores directly instead of accessing them in the JSX.\n\nTo learn how to consume the context, see the [useContext](/reference/component-apis/use-context) documentation and the [Context concepts entry](/concepts/context).\n\n## Default Values\n\n`createContext()` takes an optional \"default value\" as an argument.\nIf `useContext` is called and there is no corresponding context provider above it in the component hierarchy, then the value passed as `defaultValue` is returned.\n\nHowever, if no `defaultValue` was passed, then `undefined` is returned in this case.\nAlso, `defaultValue` (or `undefined`) is returned if `useContext` is called inside an event callback, as it is then outside of the component hierarchy.\n\nThis has implications for TS.\nIf no `defaultValue` is passed, then it is possible that `useContext()` will return `undefined`, and the types reflect this.\n\nAnother (used in the example in the previous section) is provide a default value to `createContext()`.\nIn that case, `useContext()` will always return a value, and therefore TS will not complain either.\nThe pitfall with this approach is that if you _unintentionally_ use `useContext` outside of a provider, it may not be immediately apparent, because the context is still providing a valid value.\nTherefore, if you expect to always use `useContext` within a provider, it is best to use the error based approach described above.\n\n## Type signature\n\n```ts\ninterface Context\u003cT\u003e {\n\tid: symbol\n\tProvider: (props: { value: T; children: any }) =\u003e any\n\tdefaultValue: T\n}\n\nfunction createContext\u003cT\u003e(defaultValue?: T): Context\u003cT | undefined\u003e\n```",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/create-context.mdx",
+  "metadata": {
+    "path": "src/routes/reference/component-apis/create-context.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 4139,
+    "source_type": "github"
+  },
+  "hash": "e321aead2c2440fe047efdd8223b2f67758e970c6b94ea3cbfc0c0d05e283a69",
+  "timestamp": "2026-02-23T11:43:00.188643674+01:00"
+}