All React
Hooks
Explained
useState
This hook is the most fundamental hook in React,
allowing function components to have state variables.
It returns a pair: the current state value and a function
that lets you update it. You can call this function from
an event handler or somewhere else. It’s similar to
this.setState in a class, except it does not merge the old
and new state together.
useEffect
This hook lets you perform side effects in function
components. It is a close replacement for
componentDidMount, componentDidUpdate, and
componentWillUnmount in React classes. You can use
it to fetch data, set up a subscription, and dynamically
change the document title based on the state or props.
useContext
This hook allows you to subscribe to React context
without introducing nesting. It enables you to read the
current context value for a React context object. It’s
useful for accessing shared data like themes or user
data without having to manually pass props through
many levels of the component tree.
useReducer
An alternative to useState, this hook is usually
preferable for state logic that includes multiple sub-
values or when the next state depends on the previous
one. It also lets you optimize performance for
components that trigger deep updates because you
can pass dispatch down instead of callbacks.
useCallback
Returns a memoized version of the callback that only
changes if one of the dependencies has changed. It’s
useful when passing callbacks to optimized child
components that rely on reference equality to prevent
unnecessary renders.
useMemo
This hook returns a memoized value. Pass a “create”
function and an array of dependencies. useMemo will
only recompute the memoized value when one of the
dependencies has changed. It’s helpful for expensive
calculations on every render.
useRef
Returns a mutable ref object whose .current property is
initialized to the passed argument (initialValue). The
returned object will persist for the full lifetime of the
component. A common use case is to access a child
imperatively.
useImperativeHandle
useImperativeHandle customizes the instance value
that is exposed to parent components when using ref.
As such, it should be used with forwardRef.
useLayoutEffect
This runs synchronously immediately after DOM
mutations, thus can be used to read layout from the
DOM and then synchronously re-render. It mirrors the
lifecycle events of componentDidMount and
componentDidUpdate.
useDebugValue
Can be used in custom hooks to display a label in
React DevTools next to the hook. Useful for making
custom hooks easier to inspect in complex
components.
useDeferredValue
This hook allows you to defer changes to a value until
after the current render is complete, helping to
maintain a smooth user interface even when rendering
large amounts of data.
useTransition
Helps manage transitions, making them more pleasant
to the user. It lets you mark updates as transitions
which can be interrupted, thus keeping the interface
responsive.
useId
Generates a unique ID that is stable across server and
client and helps with server-side rendering and
hydration mismatches.
useSyncExternal
Store
Allows you to read from an external store in a way that
is compatible with React's Concurrent Mode and other
new features.
useInsertionEffect
Ensures that styles are injected before the browser
paints. It’s particularly useful for libraries that manage
global styles and need to inject styles in a way that
doesn’t cause layout shifts.
Follow me and
check my
profile for more
such content
