메뉴
Use when Preact hooks fail with invalid hook calls, __H undefined or null errors, mixed CJS/ESM imports, no-build import maps, duplicate Preact copies, useId SSR mismatches, or effect scheduling problems.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | preact-hooks-debugging |
| description | Use when Preact hooks fail with invalid hook calls, __H undefined or null errors, mixed CJS/ESM imports, no-build import maps, duplicate Preact copies, useId SSR mismatches, or effect scheduling problems. |
Most hard hook failures are caused by either invalid hook order or two different Preact module instances loaded into the same app.
preact/hooks or preact/compat, not a second bundled copy.preact package instance. Check bundler aliases, linked packages, test-runner aliases, and CDN import maps.preact and preact/ to the same exact version so preact/hooks shares core state. See the preact-no-build-vite-setup skill.__H, inspect module duplication before changing hook code — the symptom points at installation, not your component.// paste once in a DevTools console for a running app
const mods = performance.getEntriesByType('resource')
.map(e => e.name)
.filter(n => /preact(\.module)?(\?|$|\/hooks)/.test(n));
console.log(mods);
Two distinct URLs for preact (different versions, or the same version fetched from both npm and a CDN) will cause __H crashes and context splits.
useId() requires compatible Preact on both server and client, plus a compatible preact-render-to-string version. Upgrade together.useEffect() runs after paint; useLayoutEffect() runs during commit. Do not rely on either to create DOM that must exist for the first hydration pass — the server output must already contain it.options.requestAnimationFrame; any custom scheduler must preserve async post-render semantics.act() from @testing-library/preact (or your test harness's equivalent) so effects flush before assertions.Doc anchors: Hooks, Differences to React.
Use when hardening npm package release workflows with trusted publishing, OIDC, GitHub environments, pinned GitHub Actions, disabled publish-path caching, Changesets release PRs, direct tag-based npm publish flows, staged publishing, or npm release-supply-chain reviews.
Use when migrating React code or libraries to Preact, configuring preact/compat, bundler aliases, react/jsx-runtime, react-dom, Jest, Node SSR aliases, or diagnosing duplicate React/Preact copies and compat behavior differences.
Use when enabling preact/debug, interpreting Preact debug warnings, invalid HTML nesting or table parser problems, hydration mismatch diagnostics, duplicate keys, invalid refs/events, or component stack traces.
Use when building or debugging Preact forms, controlled or uncontrolled inputs, onInput versus onChange, checkbox, radio, select, textarea behavior, hydration of form state, cursor preservation, or compat event normalization.
Use when Preact SSR, prerendering, hydrate(), Suspense, lazy, streaming SSR, renderToStringAsync(), or browser-parsed HTML produces hydration warnings, duplicate nodes, mismatched DOM, lost focus, stale fallback markup, or client-only conditional render bugs.
Use when starting a Preact app, choosing Vite versus no-build HTM or import maps, setting JSX pragmas, CDN ESM imports, create-preact, or integrating Preact into an existing build pipeline.