React Hooks Examples
A runnable gallery of everyday React hooks patterns — counter, toggle, controlled input, list render, effect on mount, useRef focus, timer and data fetch — each a short editable demo.
Examples · Updated
Overview
A gallery of runnable React hooks patterns — edit any one live in the editor. New to hooks? Start with React state — the basics.
Examples
Counter with useState
Toggle a boolean
Controlled input
List render with map
useEffect on change
useRef to focus an input
Timer with setInterval
Fetch data on mount
Frequently asked questions
How do I build a counter with React hooks?
Call
const [count, setCount] = useState(0) and update it on click with setCount(count + 1). See the counter demo above, and the useState reference for the full API.How do I run code when a component mounts?
Use
useEffect(() => { /* run setup */ }, []) with an empty dependency array so it runs once after the first render. The useEffect reference covers cleanup and dependencies.How do I handle a text input with hooks?
Hold the value in
useState, set the input's value from it, and update it in onChange. The full walk-through is how to handle form input.