0% found this document useful (0 votes)
6 views17 pages

React Hooks

The document explains various React hooks, including useState, useEffect, and useContext, which allow function components to manage state and side effects. It also covers advanced hooks like useReducer, useCallback, and useMemo for optimizing performance and managing complex state logic. Additionally, it introduces hooks for handling transitions, unique IDs, and external stores, enhancing the overall functionality of React applications.

Uploaded by

pawanpathariys
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views17 pages

React Hooks

The document explains various React hooks, including useState, useEffect, and useContext, which allow function components to manage state and side effects. It also covers advanced hooks like useReducer, useCallback, and useMemo for optimizing performance and managing complex state logic. Additionally, it introduces hooks for handling transitions, unique IDs, and external stores, enhancing the overall functionality of React applications.

Uploaded by

pawanpathariys
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like