Skip to content
On this page

Introduction

React gives you state and effects. Better Hooks handles the small jobs around them: timers that need cancelling, listeners that need removing, browser values the server cannot know, and async work that can go stale.

One Hook, one job

Each entry stays small enough to understand and combine. Use useToggle for a switch, useDebounce for settling input, useOnline for browser connectivity, or useCopyToClipboard for a user-triggered copy. The rest of your component stays ordinary React.

What the Hook takes care of

  • Importing a Hook does not start browser work.
  • Timers, listeners, subscriptions, and pending work are cleaned up when their inputs change or the component unmounts.
  • Long-lived callbacks see the latest committed values when the Hook is designed to do so.
  • Every public Hook has a typed direct entry as well as the root export.

Start with something useful

Follow Getting started to build a small client component, then open the Hook index and search for the behavior you need. If the component is server rendered, read SSR and RSC before using browser state.

What is not included

Better Hooks is headless. It does not ship UI components, a request cache, or a state container, and it does not rename React APIs that already solve the problem well.