{"id":12053,"library":"solid-js","title":"SolidJS","description":"SolidJS is a declarative JavaScript library for building user interfaces, currently stable at version 1.9.12, with a 2.0 beta release recently announced. It distinguishes itself from other UI libraries by compiling JSX templates directly to real DOM operations and fine-grained reactive primitives, avoiding a virtual DOM. This approach typically leads to excellent performance characteristics and a smaller bundle size. Solid focuses on explicit reactivity through signals, memos, and effects, providing granular control over updates without component re-renders. The project maintains a regular release cadence, primarily focusing on quality-of-life improvements and performance optimizations within the 1.x line, while actively developing the significant architectural changes and API re-evaluations slated for the upcoming 2.0 release.","status":"active","version":"1.9.12","language":"javascript","source_language":"en","source_url":"https://github.com/solidjs/solid","tags":["javascript","solid","solidjs","ui","reactive","components","compiler","performance","typescript"],"install":[{"cmd":"npm install solid-js","lang":"bash","label":"npm"},{"cmd":"yarn add solid-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add solid-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"SolidJS is primarily consumed as an ES module. While CommonJS might work with some build setups, ESM imports are standard. Signals are functions: call `signal()` to get its value.","wrong":"const createSignal = require('solid-js').createSignal;","symbol":"createSignal","correct":"import { createSignal } from 'solid-js';"},{"note":"The `render` function for mounting Solid applications to the DOM is specifically exported from the `solid-js/web` entry point, not the main `solid-js` package. Ensure correct path for browser rendering.","wrong":"import { render } from 'solid-js';\n// or\nconst render = require('solid-js/web').render;","symbol":"render","correct":"import { render } from 'solid-js/web';"},{"note":"Solid's control flow components like `For`, `Show`, `Switch`, `Match`, and `Suspense` are named exports from the main `solid-js` package, not default exports.","wrong":"import For from 'solid-js';","symbol":"For","correct":"import { For } from 'solid-js';"}],"quickstart":{"code":"import { createSignal, createEffect, onCleanup } from 'solid-js';\nimport { render } from 'solid-js/web';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  createEffect(() => {\n    console.log(`Current count: ${count()}`);\n    // Example of cleanup logic for an effect\n    onCleanup(() => console.log('Cleaning up effect for count change.'));\n  });\n\n  return (\n    <div>\n      <h1>SolidJS Counter</h1>\n      <p>Count: {count()}</p>\n      <button onClick={() => setCount(c => c + 1)}>Increment</button>\n      <button onClick={() => setCount(c => c - 1)}>Decrement</button>\n    </div>\n  );\n}\n\nconst appRoot = document.getElementById('app');\nif (appRoot) {\n  render(() => <Counter />, appRoot);\n} else {\n  console.error(\"Element with id 'app' not found.\");\n}","lang":"typescript","description":"Demonstrates a basic SolidJS component using `createSignal` for state, `createEffect` for side effects, and `render` to mount the application to the DOM. It shows a simple interactive counter."},"warnings":[{"fix":"Consult the SolidJS 2.0 migration guide and beta release notes for specific API changes and recommended migration paths before upgrading.","message":"The announcement of Solid 2.0 Beta (v2.0.0-beta.0) signifies an upcoming major version with likely significant breaking changes, API re-evaluations, and a focus on migration strategies. Developers should review the roadmap and beta releases for changes.","severity":"breaking","affected_versions":">=2.0.0-beta.0"},{"fix":"Regularly check SolidJS release notes and documentation for deprecated APIs and transition to recommended alternatives as they become available.","message":"Starting with v1.7.0, Solid began a migration roadmap to v2.0, introducing new APIs while reasonably deprecating existing ones. Developers should monitor release notes for specific deprecation warnings and future removal plans.","severity":"deprecated","affected_versions":">=1.7.0"},{"fix":"Carefully follow SolidStart and SolidJS documentation for Server-Side Rendering (SSR) and hydration best practices. Ensure server and client render trees are identical, especially concerning conditional logic.","message":"Features like streaming HTML, isomorphic error boundaries, multiple async hydration roots, partial hydration, and islands (introduced in v1.3.0 and v1.6.0) can be challenging to configure correctly, often leading to hydration mismatches or performance issues if not handled precisely.","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Test your application's components that use JSX spreads extensively after upgrading to v1.6.0 or later, and adjust attribute handling if behavior changes are observed.","message":"A long-standing issue with proper merging of JSX spreads on native elements was addressed in v1.6.0. This fix might alter behavior for applications that previously relied on or implicitly handled the buggy spread merging, potentially requiring adjustments.","severity":"breaking","affected_versions":">=1.6.0"},{"fix":"Ensure `createUniqueId` is only called within components that are intended for hydration on the server. For non-hydratable server-only rendering, consider server-specific UUID generation if absolute uniqueness is critical outside of a hydration context.","message":"The `createUniqueId` utility (introduced in v1.1.0), while universal, only guarantees unique IDs on the server when used within hydratable components. Its behavior in non-hydratable server contexts might not meet expectations for uniqueness across multiple server renders.","severity":"gotcha","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Always invoke signals as functions to retrieve their current value, e.g., `count()` instead of `count`.","cause":"Attempting to use a SolidJS signal (or other reactive primitive) as a direct value without calling it as a function.","error":"TypeError: Cannot read properties of undefined (reading 'call') or (intermediate value) is not a function"},{"fix":"Ensure identical rendering logic on both server and client. Avoid direct DOM manipulation by third-party scripts before hydration completes. Use Solid's built-in control flow components (`<Show>`, `<For>`) for conditional rendering.","cause":"Mismatch between the server-rendered HTML and the client-side SolidJS application's initial render output during hydration. Often caused by conditional rendering differences or external scripts modifying the DOM.","error":"Error: Hydration completed but element was not found."},{"fix":"Add the correct named import from `'solid-js'` or `'solid-js/web'`, e.g., `import { createSignal } from 'solid-js';`.","cause":"Missing or incorrect import statement for a SolidJS reactive primitive or utility.","error":"ReferenceError: createSignal is not defined"},{"fix":"Configure a build tool (e.g., Vite, Webpack, Rollup) with `vite-plugin-solid` or `babel-preset-solid` to correctly transpile and bundle your SolidJS application for browser execution. Ensure your `package.json` specifies `type: \"module\"` or use a bundler.","cause":"Attempting to run ES module syntax (`import`/`export`) directly in a browser without a build step, or without `type=\"module\"` on the script tag.","error":"Uncaught SyntaxError: Cannot use import statement outside a module (in browser console)"}],"ecosystem":"npm"}