preact · Preact Docs
Preact Hooks
Teaches how to use the Hooks API in Preact to manage state, side effects, and component logic using functional components instead of class components.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Hooks
Teaches how to use the Hooks API in Preact to manage state, side effects, and component logic using functional components instead of class components.
When To Use
Use when you need to implement stateful logic, manage side effects, or refactor class-based components into functional components using the Preact Hooks API.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-hooks-workflow-guide.md | A comprehensive guide to using Preact Hooks, covering essentials, debugging, testing, and advanced API references. | Questions about a comprehensive guide to using Preact Hooks, covering essentials, debugging, testing, and advanced API references. |
examples/preact-hooks-counter-component.text | A text-based code example demonstrating a basic counter component implementation using Preact hooks logic. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating a basic counter component implementation using Preact hooks logic. |
examples/preact-hooks-counter-usecallback-usestate.text | A functional component demonstrating the use of useState and useCallback hooks to manage a counter value. | Exact payloads, commands, or snippets shown in A functional component demonstrating the use of useState and useCallback hooks to manage a counter value. |
examples/preact-hooks-usecounter-custom-hook.text | A custom useCounter hook implementation demonstrating useState and useCallback within a Preact component. | Exact payloads, commands, or snippets shown in A custom useCounter hook implementation demonstrating useState and useCallback within a Preact component. |
examples/preact-hooks-usecounter-custom-hook-2.text | A custom useCounter hook implementation demonstrating useState and useCallback usage in Preact. | Exact payloads, commands, or snippets shown in A custom useCounter hook implementation demonstrating useState and useCallback usage in Preact. |
examples/preact-hooks-usestate-counter.text | A code example demonstrating the usage of the useState hook to manage a counter state in a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useState hook to manage a counter state in a Preact component. |
examples/preact-hooks-usereducer-counter.text | A text-based code example demonstrating the implementation of the useReducer hook to manage state in a counter component. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating the implementation of the useReducer hook to manage state in a counter compon... |
examples/preact-hooks-usememo.text | A code example demonstrating the usage of the useMemo hook to memoize expensive function computations in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useMemo hook to memoize expensive function computations in Preact. |
examples/preact-hooks-usecallback.text | A code example demonstrating the usage of the useCallback hook in Preact to memoize callback functions. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useCallback hook in Preact to memoize callback functions. |
examples/preact-hooks-useref.text | A code example demonstrating the usage of the useRef hook to manage a DOM element reference in a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useRef hook to manage a DOM element reference in a Preact component. |
examples/preact-hooks-useimperativehandle.text | A code example demonstrating the use of the useImperativeHandle hook to expose a custom focus method to a parent component. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of the useImperativeHandle hook to expose a custom focus method to a parent comp... |
examples/preact-hooks-usecontext.text | A code example demonstrating the implementation of the useContext hook to manage theme state in a Preact application. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of the useContext hook to manage theme state in a Preact application. |
examples/preact-hooks-useeffect-syntax.text | A text-based example demonstrating the syntax and cleanup function usage of the useEffect hook in Preact. | Exact payloads, commands, or snippets shown in A text-based example demonstrating the syntax and cleanup function usage of the useEffect hook in Preact. |
examples/preact-hooks-useeffect-document-title.text | A code example demonstrating the use of the useEffect hook to update the document title based on component props. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of the useEffect hook to update the document title based on component props. |
examples/preact-hooks-window-width-useeffect.text | A Preact component demonstrating the use of useState and useEffect hooks to track and display the current window width on resize. | Exact payloads, commands, or snippets shown in A Preact component demonstrating the use of useState and useEffect hooks to track and display the current window widt... |
examples/preact-hooks-uselayouteffect-useref.text | A code example demonstrating the usage of useLayoutEffect and useRef to measure and position a DOM element in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useLayoutEffect and useRef to measure and position a DOM element in Preact. |
examples/preact-hooks-useerrorboundary.text | A code example demonstrating the usage of the useErrorBoundary hook to manage error states and reset them in a Preact application. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useErrorBoundary hook to manage error states and reset them in a Preact... |
examples/preact-hooks-useerrorboundary-2.text | A code example demonstrating the usage of the useErrorBoundary hook in Preact to catch and handle errors. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useErrorBoundary hook in Preact to catch and handle errors. |
examples/preact-hooks-useerrorboundary-3.text | A code example demonstrating the implementation of the useErrorBoundary hook in a Preact component to handle error states. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of the useErrorBoundary hook in a Preact component to handle error st... |
examples/preact-hooks-useid.text | A code example demonstrating the use of the useId hook to generate unique element IDs in a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of the useId hook to generate unique element IDs in a Preact component. |
examples/preact-hooks-usestate-usedebugvalue.text | A code example demonstrating the usage of useState and useDebugValue hooks within a custom useCount hook. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useState and useDebugValue hooks within a custom useCount hook. |
examples/preact-hooks-usestate-usedebugvalue-2.text | A code example demonstrating the implementation of a custom hook using useState and useDebugValue in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of a custom hook using useState and useDebugValue in Preact. |
examples/preact-hooks-usesyncexternalstore.text | A code example demonstrating the implementation of the useSyncExternalStore hook to track window scroll position in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of the useSyncExternalStore hook to track window scroll position in P... |
examples/preact-hooks-usedeferredvalue.text | A code example demonstrating the usage of the useDeferredValue hook from preact/compat. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useDeferredValue hook from preact/compat. |
examples/preact-hooks-usetransition.text | A code example demonstrating the usage of the useTransition hook in Preact to manage non-urgent state updates. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useTransition hook in Preact to manage non-urgent state updates. |
examples/preact-hooks-useinsertioneffect.text | A code example demonstrating the usage of the useInsertionEffect hook from preact/compat. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useInsertionEffect hook from preact/compat. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/hooks