webdev-react-patterns

React Patterns & Best Practices

Core Principles

1. Composition over inheritance — Build complex UIs by combining small, focused components
2. Hooks for all logic — Use hooks to encapsulate stateful logic and side effects. Never use class components
3. Unidirectional data flow — Data flows down via props; events flow up via callbacks
4. Colocation — Place state, styles, tests, and types next to the components that use them
5. Type safety everywhere — Use TypeScript for props, state, context, and hook return types

Hooks Fundamentals

function Search({ items, onSelect }: { items: string[]; onSelect: (item: string) => void }) {
  const [query, setQuery] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const filtered = useMemo(
    () => items.filter((item) => item.toLowerCase().includes(query.toLowerCase())),
    [items, query]
  );

  const handleSelect = useCallback(
    (item: string) => { setQuery(""); onSelect(item); },
    [onSelect]
  );

  useEffect(() => { inputRef.current?.focus(); }, []);

  return (
    <div>
      <input ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)} />
      {filtered.map((item) => (
        <button key={item} onClick={() => handleSelect(item)}>{item}</button>
      ))}
    </div>
  );
}

See hooks-patterns for:

• Rules of hooks, useId, useRef patterns
• Cleanup functions and dependency array pitfalls

Custom Hooks

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    fetch(url, { signal: controller.signal })
      .then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); })
      .then((json) => setData(json as T))
      .catch((err) => { if (err.name !== "AbortError") setError(err); })
      .finally(() => setLoading(false));
    return () => controller.abort();
  }, [url]);

  return { data, error, loading };
}