Scribd
Upload
4 views9 pages

React Hook

The document outlines various React hooks, including useState for state management, useEffect for side effects, and useRef for accessing DOM elements. It also discusses useContext for avoiding props drilling, useReducer for complex state logic, and performance optimization hooks like useCallback and useMemo. Each hook serves a specific purpose to enhance React application functionality and performance.

Uploaded by

hanan.sa.202
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
4 views9 pages

React Hook

The document outlines various React hooks, including useState for state management, useEffect for side effects, and useRef for accessing DOM elements. It also discusses useContext for avoiding props drilling, useReducer for complex state logic, and performance optimization hooks like useCallback and useMemo. Each hook serves a specific purpose to enhance React application functionality and performance.

Uploaded by

hanan.sa.202
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/ 9

REACT

HOOKS
1. useState

➡️ Used to create the state


for our application and it
also returns a function
which is used to update the
state
2. useEffect

➡️ Used to perform side


effects e.g, API calls. This
hook gets called when
component first mounts on
the DOM
3. useRef

➡️ This hook is helpful


when we need to access
any DOM element and
modify it. Example - Focus
an form input on page load
4. useContext

➡️ This hook is helpful


when you're working with
Context API. To avoid the
problem of props drilling
we use context API
5. useReducer

➡️ It is used to handle
more complex state logic.
It works similar to Redux
like creating reducer
functions & dispatching
actions
6. useCallback

➡️ Memoize the entire


function so it doesn't gets
created on every render.
This improves the
performance as the
memoized function is used
on re-renders
7. useMemo

➡️ Memoize the return


value from the function so
it doesn't run on every
render. This way React
doesn't need to do
additional computation
when running the function
If you find this post
helpful then please
do share this post
with your connections
;))

You might also like