Performance
For a Hook library, small has two meanings: little code to download and little native work left running in the page.
What the package contains
- Direct entries
- 37
- Median gzip
- 1.04 kB
- Complete root graph
- 21.2 kB
- Within size budget
- 37 / 37
- use-websocket3.07 kB
- use-key-press2.68 kB
- use-session-storage2.17 kB
- use-local-storage2.17 kB
- use-intersection-observer1.98 kB
- use-resize-observer1.74 kB
- use-click-outside1.55 kB
- use-debounce-fn1.44 kB
View all 37 direct entries
| Entry | Modules | Raw | gzip | Brotli | gzip / budget |
|---|---|---|---|---|---|
| use-async | 3 | 4.37 kB | 1.33 kB | 1.13 kB | Within budget: 1.33 kB / 2.05 kB |
| use-boolean | 2 | 1.55 kB | 623 B | 527 B | Within budget: 623 B / 2.05 kB |
| use-click-outside | 3 | 5.05 kB | 1.55 kB | 1.30 kB | Within budget: 1.55 kB / 2.05 kB |
| use-controllable-state | 2 | 2.59 kB | 923 B | 766 B | Within budget: 923 B / 2.05 kB |
| use-copy-to-clipboard | 3 | 3.37 kB | 1.24 kB | 1.04 kB | Within budget: 1.24 kB / 2.05 kB |
| use-counter | 2 | 2.76 kB | 1.04 kB | 873 B | Within budget: 1.04 kB / 2.05 kB |
| use-debounce | 2 | 3.25 kB | 996 B | 856 B | Within budget: 996 B / 2.05 kB |
| use-debounce-fn | 4 | 4.59 kB | 1.44 kB | 1.26 kB | Within budget: 1.44 kB / 2.05 kB |
| use-document-visibility | 1 | 3.94 kB | 1.14 kB | 984 B | Within budget: 1.14 kB / 2.05 kB |
| use-event-listener | 3 | 4.05 kB | 1.19 kB | 1.03 kB | Within budget: 1.19 kB / 2.05 kB |
| use-hover | 3 | 5.07 kB | 1.39 kB | 1.19 kB | Within budget: 1.39 kB / 2.05 kB |
| use-input | 2 | 2.76 kB | 1.03 kB | 833 B | Within budget: 1.03 kB / 2.05 kB |
| use-intersection-observer | 3 | 7.34 kB | 1.98 kB | 1.71 kB | Within budget: 1.98 kB / 2.05 kB |
| use-interval | 4 | 2.14 kB | 839 B | 708 B | Within budget: 839 B / 2.05 kB |
| use-is-mounted | 2 | 1.27 kB | 565 B | 431 B | Within budget: 565 B / 2.05 kB |
| use-isomorphic-layout-effect | 1 | 491 B | 302 B | 235 B | Within budget: 302 B / 2.05 kB |
| use-key-press | 3 | 8.59 kB | 2.68 kB | 2.33 kB | Within budget: 2.68 kB / 3.07 kB |
| use-latest | 2 | 1.27 kB | 585 B | 451 B | Within budget: 585 B / 2.05 kB |
| use-local-storage | 2 | 8.60 kB | 2.17 kB | 1.94 kB | Within budget: 2.17 kB / 3.07 kB |
| use-lock-fn | 3 | 1.91 kB | 800 B | 657 B | Within budget: 800 B / 2.05 kB |
| use-map | 1 | 2.20 kB | 820 B | 716 B | Within budget: 820 B / 2.05 kB |
| use-media-query | 2 | 4.16 kB | 1.28 kB | 1.12 kB | Within budget: 1.28 kB / 2.05 kB |
| use-memoized-fn | 2 | 1.53 kB | 689 B | 552 B | Within budget: 689 B / 2.05 kB |
| use-online | 1 | 1.85 kB | 706 B | 587 B | Within budget: 706 B / 2.05 kB |
| use-previous | 1 | 291 B | 211 B | 171 B | Within budget: 211 B / 2.05 kB |
| use-reset-state | 4 | 3.39 kB | 1.19 kB | 966 B | Within budget: 1.19 kB / 2.05 kB |
| use-resize-observer | 3 | 6.30 kB | 1.74 kB | 1.49 kB | Within budget: 1.74 kB / 2.05 kB |
| use-safe-state | 2 | 1.45 kB | 676 B | 530 B | Within budget: 676 B / 2.05 kB |
| use-session-storage | 2 | 8.60 kB | 2.17 kB | 1.94 kB | Within budget: 2.17 kB / 3.07 kB |
| use-set | 1 | 2.14 kB | 764 B | 665 B | Within budget: 764 B / 2.05 kB |
| use-throttle | 3 | 3.74 kB | 1.10 kB | 945 B | Within budget: 1.10 kB / 2.05 kB |
| use-throttle-fn | 4 | 4.31 kB | 1.35 kB | 1.19 kB | Within budget: 1.35 kB / 2.05 kB |
| use-timeout | 4 | 3.29 kB | 1.09 kB | 926 B | Within budget: 1.09 kB / 2.05 kB |
| use-toggle | 1 | 820 B | 465 B | 360 B | Within budget: 465 B / 2.05 kB |
| use-unmounted-ref | 2 | 1.32 kB | 617 B | 498 B | Within budget: 617 B / 2.05 kB |
| use-websocket | 3 | 13.8 kB | 3.07 kB | 2.68 kB | Within budget: 3.07 kB / 3.07 kB |
| use-window-size | 1 | 2.13 kB | 792 B | 677 B | Within budget: 792 B / 2.05 kB |
The report measures each unminified ES2022 entry and its reachable internal modules. React and React DOM stay external. gzip and Brotli use Node.js defaults, so these numbers are a consistent package baseline, not a prediction of your final application bundle.
Import what you need
Every Hook has a direct ESM entry such as better-hooks/use-media-query. The root better-hooks entry exposes the same API and relies on your bundler's tree shaking. Direct imports make the first module boundary obvious and are what the examples use.
The package has no runtime dependency beyond React, uses explicit exports, and declares sideEffects: false.
Share browser work only when it helps
Hooks share native work when subscribers truly observe the same source. Equal media queries reuse one channel, online state uses one listener pair per browser realm, and window-size subscribers share one resize listener. Instance-specific observers and connections stay separate when sharing would blur cancellation or error handling.
Timers, listeners, observers, and network work start after commit and stop when their owner changes or unmounts. Stable callback refs avoid rebuilding that work just because a callback received a new identity.
Measure the application you ship
Your bundler may minify, split, deduplicate, and transform this code differently. Check the finished application for bundle size, long tasks, subscription counts, and unnecessary rerenders. Package metrics are the starting point, not the last word.