Working with Hooks

A comprehensive guide to using React Hooks in Preact

Hooks are a powerful feature in Preact that let you use state and other features without writing a class component. Preact’s hooks implementation is fully compatible with React Hooks.

What are Hooks?

Hooks are functions that let you “hook into” Preact state and lifecycle features from function components. They make it easier to reuse stateful logic between components and organize your code.

Available Hooks

Preact provides all the standard hooks from the preact/hooks package:

• useState - Manage local state
• useEffect - Perform side effects
• useReducer - Alternative to useState for complex state
• useRef - Create a mutable ref object
• useMemo - Memoize expensive computations
• useCallback - Memoize callback functions
• useContext - Access context values
• useLayoutEffect - Run effects synchronously after DOM mutations
• useImperativeHandle - Customize ref exposure
• useDebugValue - Display custom hook labels in DevTools
• useErrorBoundary - Catch errors in components
• useId - Generate unique IDs for accessibility

useState

The useState hook lets you add state to function components. It returns an array with the current state value and a function to update it.

Counter Example

import { useState } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Functional Updates

When the new state depends on the previous state, pass a function to the setter:

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // Good: Uses functional update
    setCount(prevCount => prevCount + 1);
  };

  return <button onClick={increment}>Count: {count}</button>;
}

useEffect

The useEffect hook lets you perform side effects in function components. Effects run after the browser paints, making them non-blocking.

useReducer

For complex state logic, useReducer is often preferable to useState. It’s built on top of useState internally.

import { useReducer } from 'preact/hooks';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error('Unknown action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        +
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        -
      </button>
      <button onClick={() => dispatch({ type: 'reset' })}>
        Reset
      </button>
    </div>
  );
}

Lazy Initialization

useReducer accepts an optional third argument for lazy initialization:

function init(initialCount) {
  return { count: initialCount };
}

function Counter({ initialCount }) {
  const [state, dispatch] = useReducer(
    reducer,
    initialCount,
    init  // Initialization function
  );
  
  // ...
}

Rules of Hooks

Hooks have two important rules that must be followed:

Rule 1: Top Level Only

Only call hooks at the top level of your function. Don’t call hooks inside loops, conditions, or nested functions.

// Bad: Hook inside condition
function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // Don't do this!
  }
}

// Good: Hook at top level
function Component({ condition }) {
  const [state, setState] = useState(0);
  
  if (condition) {
    // Use state here
  }
}

Rule 2: Function Components Only

Only call hooks from Preact function components or custom hooks. Don’t call them from regular JavaScript functions.

// Bad: Hook in regular function
function regularFunction() {
  const [state, setState] = useState(0); // Don't do this!
}

// Good: Hook in component
function Component() {
  const [state, setState] = useState(0);
  return <div>{state}</div>;
}

// Good: Hook in custom hook
function useCustomHook() {
  const [state, setState] = useState(0);
  return [state, setState];
}

Custom Hooks

Custom hooks let you extract component logic into reusable functions. They’re just functions that use other hooks.

useLocalStorage Hook

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

function useLocalStorage(key, initialValue) {
  // Get from local storage then parse stored json or return initialValue
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that
  // persists the new value to localStorage.
  const setValue = value => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

// Usage
function Component() {
  const [name, setName] = useLocalStorage('name', 'Bob');
  
  return (
    <input
      value={name}
      onChange={e => setName(e.target.value)}
    />
  );
}

Best Practices

Implementation Details

Preact’s hooks are implemented in hooks/src/index.js and integrate deeply with Preact’s rendering system. Key implementation details:

• Hooks use an internal currentComponent variable to track which component is rendering
• Each hook call increments a currentIndex counter to maintain hook state between renders
• useState is implemented using useReducer internally
• Effects are queued and flushed after painting using requestAnimationFrame
• Hook state is stored in component.__hooks._list array

Reference: hooks/src/index.js:172-175

Next Steps

Context API

Learn how to share state across components using Context

Refs

Access DOM elements and persist values with refs