Prompt Buddy logoPrompt Buddy

preact · Preact Docs

Preact References

Teaches how to create and use refs in Preact using createRef for class components and useRef for functional components to access DOM nodes or persist stable values across renders without triggering re-renders.

Import to Prompt Buddy

Derived skill

Files assembled from official documentation

Viewing SKILL.md

Preact References

Teaches how to create and use refs in Preact using createRef for class components and useRef for functional components to access DOM nodes or persist stable values across renders without triggering re-renders.

When To Use

Use when you need to imperatively manipulate DOM elements, measure element dimensions, or store mutable values that should not trigger component re-renders.

Reference Files

FileContainsUse For
SKILL.mdEntry point: scope, routing table, and workflow.Start here.
docs/preact-references-workflow-guide.mdA comprehensive guide covering the essentials, debugging, testing, and advanced usage of references in Preact.Questions about a comprehensive guide covering the essentials, debugging, testing, and advanced usage of references in Preact.
examples/preact-references-preact-v10-refs-component-create-ref.textA code example demonstrating the usage of createRef within a Preact class component to manage component and DOM references.Exact payloads, commands, or snippets shown in A code example demonstrating the usage of createRef within a Preact class component to manage component and DOM refer...
examples/preact-references-preact-hooks-useref.textA code example demonstrating the usage of the useRef hook within a Preact component.Exact payloads, commands, or snippets shown in A code example demonstrating the usage of the useRef hook within a Preact component.
examples/preact-references-preact-v10-refs-component-create-ref-2.textA Preact component demonstrating the use of createRef to access a DOM element within the componentDidMount lifecycle method.Exact payloads, commands, or snippets shown in A Preact component demonstrating the use of createRef to access a DOM element within the componentDidMount lifecycle...
examples/preact-references-preact-refs-useref-useeffect.textA code example demonstrating how to use the useRef and useEffect hooks to access a DOM element in Preact.Exact payloads, commands, or snippets shown in A code example demonstrating how to use the useRef and useEffect hooks to access a DOM element in Preact.
examples/preact-references-preact-v10-refs-component-lifecycle.textA JavaScript code example demonstrating how to use refs within a Preact component class to access DOM elements and implement cleanup functions.Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use refs within a Preact component class to access DOM elements and im...
examples/preact-references-preact-v10-refs-component-lifecycle-2.textA JavaScript code example demonstrating how to use refs in Preact to access DOM elements and implement cleanup functions during component unmounting.Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use refs in Preact to access DOM elements and implement cleanup functi...
examples/preact-references-preact-v10-refs-simple-clock-component.textA functional component example demonstrating the use of createRef to manage a timer interval in Preact.Exact payloads, commands, or snippets shown in A functional component example demonstrating the use of createRef to manage a timer interval in Preact.
examples/preact-references-preact-refs-simple-clock-use-ref.textA functional component demonstrating the use of the useRef hook to manage a timer interval in Preact.Exact payloads, commands, or snippets shown in A functional component demonstrating the use of the useRef hook to manage a timer interval in Preact.

What This Skill Covers

  • Guide Version: 11.x (preview) 10.x (current) 8.x
  • Main sections: Introduction, Essentials, Debug & Test, Advanced, Libraries.

Workflow

  1. Open the most relevant file under docs/ for the exact documented workflow and wording.
  2. Open schemas/ files for exact structured contracts.
  3. Open examples/ files for concrete requests, commands, snippets, and manifests.
  4. Do not add behavior or configuration that is not present in the attached source files.

Canonical source: https://preactjs.com/guide/v10/refs