See Our Public Workshops:
Almost exactly two years ago in 2023 I wrote a similar post which I believe still holds true: You don't need most of React's Hooks for your day-to-day work and some you'll use seldomly. Now that its been two years, I have some updates.
First, I just want to say for newer React devs that they try to limit the number of Hooks they give you. You're supposed to use these as primitives that you can build upon to make your own custom Hooks. The ones they give you are "hooking into" the underlying internals of React in a way where you couldn't have made these on your own with a custom Hook. So they're all necessary for something, but unless you get into a unique situation, you probably don't need that special something they do.
Here's a list of the ones that made into the blog post from 2023 for reference:
- useDebugValue()
- useInsertionEffect()
- useImperativeHandle()
- useSyncExternalStore()
- useDeferredValue()
- useEffect()
- useLayoutEffect()
In the last post I color coded each Hook subjectively according to how likely I think the Hook is needed in normal React situations. Things are a bit different now as you'll soon read, so I'm using symbols instead and these are a bit less subjective and more factual about how React works now depending on your setup.
Here's how we categorize the Hooks on this page:
- ✨: Only needed if your're using the new React Compiler
- ▲: Only needed if you're using RSC with certain frameworks like NextJS
- 19: You can stop using this Hook if you're on React 19
Here are the Hooks you might not need with links to explanations below:
A quick bit on RSC and form actions
The big win with React Server Components (RSCs) is that you will have a smaller bundle size and less hydration if you choose to do React on the server with a Framework like NextJS. Just know that there are lesser known frameworks that also support RSC, but the vast majority of the React ecosystem thinks of NextJS when they think of RSC support as of today in 2025. If you do choose to use NextJS, they give you two architecture choices. Their old architecture is called "pages" and the new one is called "app". Don't let the words "app vs pages" fool you about any suggestion of scale. When you hear "pages" in the Next world, that just means the older architecture. The big takeaway here is that you can only do RSCs with the newer architecture in the app
folder.
There are several Hooks that play a supporting role with RSC in how they want you to do mutations. When we say mutations we mean network requests that mutate something like a POST
, DELETE
, UPDATE
, etc.
Form Actions: The form action attribute (<form action>
) is not commonly used in SPA because we normally intercept the form's submit event and handle the data ourselves. However, one new feature in React is to use that attribute as a callback function and in that case it works similar to onSubmit
:
function formAction(formData: FormData) {// no need for event.preventDefault()}return <form action={formAction}></form>
. React is kind of "piggy-backing" on that for mutations when it comes to a RSC architecture. See here at https://react.dev/reference/react-dom/components/form
Form actions in React are accompanied by several hooks: useFormStatus()
, useActionState()
, and useOptimistic()
to assist them with RSC architecture.
useFormStatus()
useFormStatus()
and the next three hooks listed all have the same rationale:
While you can use useFormStatus()
with SPAs and the new "form actions", it's really more meant for RSC architecture. You only really need this Hook if you're doing NextJS with the newer app
architecture. See the above explanation of RSCs and form actions.
useActionState()
While you can use useActionState()
with SPAs and the new "form actions", it's really more meant for RSC architecture. You only really need this Hook if you're doing NextJS with the newer app
architecture. See the above explanation of RSCs and form actions.
useOptimistic()
While you can use useOptimistic()
with SPAs and the new "form actions", it's really more meant for RSC architecture. You only really need this Hook if you're doing NextJS with the newer app
architecture. See the above explanation of RSCs and form actions.
useMemo()
I wrote a lengthy post explaining the React Compiler last year that was originally titled React 19 will be compiled. The thing I got wrong was that the compiler would be made available around the same time as React 19 but isn't tied directly to it. You can use the compiler with React 17, 18, and 19 with a Babel plugin. It's optional, so not everyone will have "compiled React" going forward.
The main point of creating the compiler was to eliminate manual memoization. So say adios to memo
, useMemo
, and useCallback
if you choose to use the compiler. Don't use the compiler yet? Then you still need to manually memoize things at times.
useCallback()
Using useCallback
is a form of "memoization" for the identity of a function. This Hooks falls into the same category as useMemo
when it comes to the compiler. See the above explanation in useMemo
.
useContext()
Context is awesome, you need it even if you're not using it for global state. There's this weird misconception that if you're using Redux or Zustand for global state that you don't ever need context. Context can do certain things that a global state tool can't so I hope you familiarize yourself with context.
By saying useContext
is not needed anymore, I'm not saying context isn't needed or useful. Im just letting you know that React 19 has a new function called use
that can replace all your uses of useContext
if you choose to.
Is the use
function just a different Hook? Nope. It's not a Hook at all 🤔. I know it's weird, but any function that starts with "use" is a Hook and must follow the Rules of Hooks but not the use()
function itself. So weird!
Even the docs categorize use()
in the "APIs" section of the docs, and not the "Hooks" section: https://react.dev/reference/react/use
Instead of having comments here in our blog, we've tweeted about this post so you can comment there if you wish.
View on Twitter