To build React address autocomplete, create a debounced custom hook that fetches Royal Mail PAF-verified suggestions from the AutoPostcode API as the user types, render them in a controlled dropdown, and set the full address in state on selection. No third-party component is needed, and the data covers ~31M UK addresses across ~1.8M postcodes.
How do I write the debounced hook?
Keep the query in state and debounce the fetch inside a useEffect:
function useAddressSuggestions(query) {
const [items, setItems] = useState([]);
useEffect(() => {
if (query.length < 3) return setItems([]);
const t = setTimeout(async () => {
const r = await fetch("/api/autocomplete?q=" + encodeURIComponent(query));
const { suggestions } = await r.json();
setItems(suggestions);
}, 200);
return () => clearTimeout(t);
}, [query]);
return items;
}How do I render the component?
Wire the hook to a controlled input and a suggestions list, then resolve the selection:
function AddressInput({ onSelect }) {
const [q, setQ] = useState("");
const items = useAddressSuggestions(q);
const pick = async (id) => {
const r = await fetch("/api/resolve?id=" + id);
onSelect(await r.json());
setQ("");
};
return (
<div>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Start typing your address" />
<ul>{items.map((s) => <li key={s.id} onClick={() => pick(s.id)}>{s.label}</li>)}</ul>
</div>
);
}Custom hook vs third-party package
| Approach | Bundle cost | Control |
|---|---|---|
| Custom hook | Minimal | Full — your markup and styles |
| Third-party widget | Heavier | Limited theming |
Prefer a drop-in? See our React address autocomplete integration, powered by the address autocomplete API. For a vanilla JS version, follow the JavaScript autocomplete tutorial.
A UK-first, affordable alternative
AutoPostcode uses the same Royal Mail PAF data as Loqate, Fetchify and Ideal Postcodes, with a clean REST API that fits naturally into React.
Frequently asked questions
How do I build address autocomplete in React?
Build a debounced custom hook that fetches PAF-verified suggestions from the AutoPostcode API as the user types, render them in a controlled dropdown, and set the full address in state when one is selected. It's a self-contained component you can drop into any form.
Do I need a third-party React package?
No. A small custom hook with useState, useEffect and a debounce is enough. Because AutoPostcode is a plain REST API returning JSON, you avoid an extra dependency to maintain.
How do I debounce input in React?
Store the query in state and use a useEffect with a setTimeout that clears on each change, firing the fetch only after the user pauses — typically around 200ms and from three characters.
How do I keep my API key secret in React?
Never call the API directly from the browser with your secret key in production. Proxy the request through a backend route or serverless function that injects the key server-side.
Does this work with Next.js or Vite?
Yes. The hook is framework-agnostic React. In Next.js you'd proxy through a route handler; in Vite you'd proxy through your own backend or serverless function.
Is the address data Royal Mail PAF?
Yes. Suggestions come from Royal Mail PAF, covering ~31M UK delivery points across ~1.8M postcodes, so every result is real and correctly formatted.
Ready to get started?
Add Royal Mail PAF-verified UK address lookup to your site in minutes — start free, no card required.