Creare hook personalizzati

Combina gli hook di Wompo per creare logica riutilizzabile.

Quando creare un hook

Crea un hook personalizzato quando più componenti condividono la stessa logica di stato, effetto o derivazione dati. Un hook deve restare una funzione pura dal punto di vista della chiamata: gli hook interni vanno eseguiti sempre nello stesso ordine.

Esempio: local storage

import { useEffect, useState } from 'wompo';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Uso nel componente

function PreferencesPanel() {
  const [theme, setTheme] = useLocalStorage('theme', 'system');

  return html`
    <select value=${theme} @change=${(event) => setTheme(event.target.value)}>
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  `;
}

Regole

  • Chiama gli hook personalizzati solo da componenti o altri hook.
  • Non chiamarli condizionatamente.
  • Restituisci una API piccola: valore, setter, stato di caricamento o funzioni esposte.