{"id":312,"date":"2026-06-04T13:01:19","date_gmt":"2026-06-04T13:01:19","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/react-custom-hooks-i-actually-reach-for-2026\/"},"modified":"2026-06-04T13:01:19","modified_gmt":"2026-06-04T13:01:19","slug":"react-custom-hooks-i-actually-reach-for-2026","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/react-custom-hooks-i-actually-reach-for-2026\/","title":{"rendered":"React Custom Hooks I Actually Reach For in 2026"},"content":{"rendered":"

Confession: there was a stretch in 2021 when I had a hooks\/<\/code> folder with 18 files and most of them were doing things React already did better. I had a useToggle<\/code>, a useCounter<\/code>, a useArray<\/code>. I had two competing useFetch<\/code> implementations because I forgot the first one existed. Half of them were one-liner wrappers that hid more than they helped.<\/p>\n

These days my custom hook list is shorter. Not because hooks are out of fashion, but because I figured out which ones earn their keep and which ones are just me showing off that I know hooks exist.<\/p>\n

This is the list of custom hooks I actually reach for in 2026, why I keep each one, and the ones I quietly deleted.<\/p>\n

A custom hook is a function. Don’t make it more than that.<\/h2>\n

The single biggest mistake I see in my old code is treating custom hooks like they were components. They aren’t. A hook is a regular function that happens to call other hooks. It doesn’t render anything, doesn’t memoize automatically, and doesn’t isolate state from anything else in the calling component.<\/p>\n

The official React docs<\/a> hammer this point and I still think they undersell it. If you’d write the logic as a plain function in a different language, write it as a plain function in React too. Only reach for use*<\/code> when the body actually needs useState<\/code>, useEffect<\/code>, or some other hook.<\/p>\n

That filter alone kills about half my old hooks. useToggle<\/code> was just !current<\/code>. useCounter<\/code> was n + 1<\/code>. Neither one needed to be a hook.<\/p>\n

usePersistedState, the one that survived every refactor<\/h2>\n

This is the one I keep across projects without changing much.<\/p>\n

import { useState, useEffect } from "react";\n\nexport function usePersistedState(key, initial) {\n  const [value, setValue] = useState(() => {\n    try {\n      const raw = localStorage.getItem(key);\n      return raw ? JSON.parse(raw) : initial;\n    } catch {\n      return initial;\n    }\n  });\n\n  useEffect(() => {\n    try {\n      localStorage.setItem(key, JSON.stringify(value));\n    } catch {\n      \/\/ quota exceeded or private mode, fail silently\n    }\n  }, [key, value]);\n\n  return [value, setValue];\n}\n<\/code><\/pre>\n
It looks small. The reason it earns its place is the failure handling. Every time I’ve shipped a hook that hit localStorage<\/code> without a try\/catch, Safari private mode found it within a week. I’ve debugged this exact bug three separate times before I made the pattern non-optional.<\/p>\n
Use it for filter state, sidebar collapsed state, the last selected tab. Don’t use it for anything that should be on the server. I made that mistake once with “saved cart” and watched a customer’s cart from June 2023 reappear nine months later on a different device.<\/p>\n
useDebouncedValue versus useDebouncedCallback, pick the right one<\/h2>\n
I had a single useDebounce<\/code> for years that took a value and returned a debounced version. Fine for search inputs. Wrong for almost everything else.<\/p>\n
The split that fixed it:<\/p>\n
\/\/ useDebouncedValue: returns the latest value after `delay` ms of quiet\nexport function useDebouncedValue(value, delay = 300) {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const id = setTimeout(() => setDebounced(value), delay);\n    return () => clearTimeout(id);\n  }, [value, delay]);\n  return debounced;\n}\n\n\/\/ useDebouncedCallback: returns a stable function that fires after quiet\nexport function useDebouncedCallback(fn, delay = 300) {\n  const ref = useRef(fn);\n  ref.current = fn;\n  const timer = useRef(null);\n  return useCallback((...args) => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => ref.current(...args), delay);\n  }, [delay]);\n}\n<\/code><\/pre>\n
The value version is for displaying. The callback version is for firing side effects like analytics or save-as-you-type. Mixing them up is how you end up with a search box that triggers four network requests per keystroke because you debounced the input value but not the request fired from onChange<\/code>. Ask me how I know.<\/p>\n
useFetch is dead to me<\/h2>\n
I had three different useFetch<\/code> hooks in 2022 and they all eventually grew the same bugs: no cache, no dedupe, refetch storms on remount, and that special variety of stale-state bug where the user navigates away and back and sees data from a request that resolved into a component that already unmounted.<\/p>\n
I deleted all of them when I moved data fetching to a query library. I wrote about why TanStack Query replaced most of my data hooks<\/a> recently and the short version is: a query library is a hook. It just happens to be one written by someone with way more time and tests than I had.<\/p>\n
If you’re rolling your own useFetch<\/code> in 2026, you’re rewriting the worst version of a library you could install in two minutes. The one exception is hitting a single internal endpoint from a single component for a single feature and never again. For anything that gets reused, install TanStack Query<\/a> and stop.<\/p>\n
useEventListener and the cleanup people forget<\/h2>\n
Adding event listeners directly in a component is one of those things that looks fine in dev and leaks in production. The hook version makes the cleanup mandatory because the effect’s return is the cleanup.<\/p>\n
export function useEventListener(target, event, handler) {\n  const ref = useRef(handler);\n  ref.current = handler;\n\n  useEffect(() => {\n    const el = target?.current ?? target ?? window;\n    const listener = (e) => ref.current(e);\n    el.addEventListener(event, listener);\n    return () => el.removeEventListener(event, listener);\n  }, [target, event]);\n}\n<\/code><\/pre>\n
The bit people get wrong: capturing handler<\/code> directly inside the effect. Then either you list handler<\/code> in the dependency array and re-bind on every render, or you don’t and the listener fires with a stale closure forever. The ref trick fixes both: stable listener, always-fresh handler.<\/p>\n
Use it for keydown<\/code>, resize<\/code>, scroll<\/code>, visibilitychange<\/code>. Don’t use it for events that have a React equivalent. onClick<\/code> is still onClick<\/code>.<\/p>\n
useElementSize and the ResizeObserver gotcha<\/h2>\n
This one I use mostly in dashboards where some chart needs to know its container width to redraw.<\/p>\n
export function useElementSize(ref) {\n  const [size, setSize] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      const { width, height } = entry.contentRect;\n      setSize({ width, height });\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [ref]);\n\n  return size;\n}\n<\/code><\/pre>\n
The gotcha I missed for an embarrassingly long time: ResizeObserver<\/code> fires before paint, so calling setState<\/code> inside it can trigger a “ResizeObserver loop limit exceeded” warning if the new size causes another layout change that fires the observer again. Fix it by debouncing or by checking whether the size actually changed before calling setState<\/code>. The cheap version is comparing rounded values.<\/p>\n
What I stopped reaching for<\/h2>\n
A short list of hooks I wrote, used, and quietly deleted.<\/p>\n
useToggle<\/code> was almost always shorter as setOpen((o) => !o)<\/code> inline. usePrevious<\/code> I used once for a comparison that should have been a useEffect<\/code> dependency. useMount<\/code> and useUnmount<\/code> are useEffect(fn, [])<\/code> with extra steps, and worse they hide the dependency array so readers can’t tell the effect is intentional-empty. I had a useLocalStorage<\/code> separate from usePersistedState<\/code> for a while, same thing, two files, pick one. And every useApi<\/code> wrapper around fetch eventually became the broken useFetch<\/code> I described above.<\/p>\n
I don’t think any of these were bad ideas the first time I wrote them. I think the pattern is that custom hooks reward extracting things you actually reuse three or more times. Anything I extracted “in case I need it later” became dead code I had to maintain.<\/p>\n
When NOT to write a custom hook<\/h2>\n
The rule I use now, after getting it wrong for years: if I can write the logic as a pure function and call it inside a component, do that. If I can express the dependency chain with one useEffect<\/code> and never read it twice in the same component, do that. The hook is only earned when the same chain of useState<\/code> plus useEffect<\/code> plus event listener shows up in two or three places and copying it the third time finally annoys me.<\/p>\n
The other anti-pattern: hooks that pretend to be components. If your “hook” calls four other hooks, returns 12 things, and is only ever used by one component, you’ve written a component without the JSX. Refactor it into a real component with children, or into separate smaller hooks.<\/p>\n
I cover a lot of this kind of “what I actually keep versus what I deleted” thinking in my day-to-day work<\/a>. The through-line in most of it is that taste is mostly about what you stop doing, not what you start.<\/p>\n
A small action for this week<\/h2>\n
Go look at your hooks\/<\/code> folder. For each custom hook in there, ask: how many components actually import it? Two or fewer is your warning sign. Either inline it back into the components, or rewrite it as a plain utility function. You’ll lose maybe four files and gain back the ability to read your own code six months from now without doing archaeology.<\/p>\n
That’s the whole list. Custom hooks are still one of the best things about React, but the version of me that wrote 18 of them was not paying for the maintenance, and the version of me writing five of them is.<\/p>\n","protected":false},"excerpt":{"rendered":"
What I actually keep in the hooks folder in 2026 – usePersistedState, useDebouncedValue, useEventListener – and the half-dozen custom hooks I quietly deleted.<\/p>\n","protected":false},"author":2,"featured_media":311,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"What I actually keep in the hooks folder in 2026 - usePersistedState, useDebouncedValue, useEventListener - and the half-dozen custom hooks I quietly deleted.","rank_math_focus_keyword":"react custom hooks","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[354],"tags":[38,44,41,355],"class_list":["post-312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-frontend","tag-javascript","tag-react","tag-react-hooks-2"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/311"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}