A practical guide to React Hooks

React Hooks are functions that let components remember information and interact with the outside world. They make a component's behavior easier to package and reuse.

Start with state

Use useState for information that changes over time and should cause the UI to update. Keep each state variable focused on a single concern.

const [isOpen, setIsOpen] = useState(false);

Effects synchronize with the world

useEffect is for synchronizing with something outside React: a browser API, a subscription, or a network connection. It is not a replacement for ordinary calculations during rendering.

Extract custom Hooks

When two components share behavior, move the behavior into a custom Hook. A Hook should express intent, not just hide lines of code.

function useDocumentTitle(title: string) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}