Preact v10.29.7 Documentation Reference

Look up Preact v10.29.7 syntax, hooks, components, and API behavior from the official docs.

Requirements

• None. This skill is a read-only documentation reference.

Quick Reference

Important Rules

1. This is a reference lookup skill, not a coding teacher. Use it to verify Preact syntax, hook signatures, and API behavior. Do not use it to generate entire apps from scratch.
2. Background knowledge: Preact is based on concepts from React. If the user has zero React/JSX background (e.g., doesn't know about className, JSX, or hooks), point them to React's Getting Started guide first before using this Preact reference.
3. Always check differences-to-react.md first when user mentions React or React-like behavior — this is the #1 source of agent mistakes when mental model is React
4. Always search scripts/preact-reference.json for Preact-specific answers
5. Cite category and slug when providing guidance (e.g., "api-reference" for full API, "differences-to-react" for React comparisons)
6. Flag preact/compat requirement for React ecosystem libraries — don't assume they work with vanilla Preact
7. Distinguish between h() function and JSX — both work but have different use cases

Usage Guide

This skill provides read-only access to the official Preact v10.29.7 documentation. Use it to answer questions like:

• "How does useState() work in Preact?"
• "What props does render() accept?"
• "What's the difference between preact and preact/compat?"
• "How do I import useEffect?"

Do not use this skill to teach Preact from scratch or to generate whole projects.

Basic Pattern

// In your code
const fs = require('fs');
const reference = JSON.parse(fs.readFileSync('{baseDir}/scripts/preact-reference.json', 'utf8'));

// Search for specific hook
const result = reference.find(item => 
  item.category === "hooks" && 
  item.slug.includes("hooks")
);

Critical Knowledge: Preact vs React

This is the most important page — read differences-to-react category thoroughly before answering any Preact/React compatibility questions.

Key differences:

• No Synthetic Events — Preact uses native DOM events
• Different children handling — Preact passes children as prop, React uses props.children
• Component lifecycles — Some lifecycle methods behave differently
• Context API — Similar but not identical to React
• Hooks — Mostly compatible, but subtle differences exist

When to use preact/compat

Use preact/compat (alias for react and react-dom) when:

• Importing React ecosystem libraries (Redux, React Router, Material-UI, etc.)
• Working with code that expects React APIs
• Needing drop-in React compatibility

Do NOT use preact/compat when:

• Writing new Preact-native code
• Building lightweight apps where bundle size matters
• Using Preact-specific features

Search Strategy

1. API surface → category="api-reference" — complete API in one place
2. Hooks → category="hooks" — useState, useEffect, useContext, etc.
3. React differences → category="differences-to-react" — critical for React devs
4. Components → category="components" — Fragment, Context, etc.
5. Context → category="context" — Provider/Consumer pattern
6. Forms → category="forms" — controlled components, refs
7. Debugging → category="debugging" — devtools, warnings
8. CLI → category="cli" — Preact CLI usage
9. Options → category="options" — configuration options

Key API Reference

Common Usage Examples

Functional component with hooks

import { h, render } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

render(<Counter />, document.getElementById('app'));

Using preact/compat for React libraries

// Instead of: import React from 'react';
import { h, Component } from 'preact';
// Or use the compat layer:
import React from 'preact/compat';
import ReactDOM from 'preact/compat';

// Now you can use React Router, Redux, etc.
import { BrowserRouter } from 'react-router-dom';

Context usage

import { createContext, useContext } from 'preact/hooks';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed</button>;
}

// Provider usage
<ThemeContext.Provider value="dark">
  <ThemedButton />
</ThemeContext.Provider>

Gotchas

• React libraries require preact/compat — vanilla Preact won't work with most React ecosystem packages
• JSX vs h() — both work, but h() is the native Preact function; JSX compiles to h()
• Event handlers — Preact uses native DOM events, not SyntheticEvent like React
• Children prop — Preact passes children differently than React in some edge cases
• Lifecycle methods — componentWillMount, componentWillReceiveProps behave differently or are deprecated
• DevTools — Preact DevTools extension exists but is separate from React DevTools
• Server-side rendering — Use preact-render-to-string package, not React's SSR APIs

Critical Differences from React

Further Reading

• {baseDir}/scripts/preact-reference.json — Complete Preact v10.29.7 documentation index (embedded in skill)
• Preact official guide — Live documentation
• differences-to-react category — Must-read for React developers