Scribd
Upload
16 views19 pages

?react Hooks - The Game Changer in Modern Web Development!

The document provides an overview of React Hooks, which allow developers to utilize state and lifecycle features in function components. It covers various hooks including useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo, and custom hooks, explaining their purposes and usage. The document emphasizes the rules for using hooks and provides examples for better understanding.

Uploaded by

Harsh Dhake
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
16 views19 pages

?react Hooks - The Game Changer in Modern Web Development!

The document provides an overview of React Hooks, which allow developers to utilize state and lifecycle features in function components. It covers various hooks including useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo, and custom hooks, explaining their purposes and usage. The document emphasizes the rules for using hooks and provides examples for better understanding.

Uploaded by

Harsh Dhake
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/ 19

HOOKS

useState
useEffect
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks

By Junaid Arshad
React Hooks
Hooks allow us to "hook" into
React features such as state
and lifecycle methods.

Rules:
Hooks can only be called inside React

function components.

Hooks can only be called at the top level of a

component.

Hooks cannot be conditional

1
1. useState
To use the useState Hook, we
first need to import it into our
component.
Initialize useState
We initialize our state by calling useState
in our function component.
useState accepts an initial state and
returns two values:
The current state.
A function that updates the state.

2
Example:

3
2. useEffect
The useEffect Hook allows you
to perform side effects in your
components.
Some examples of side effects
are: fetching data, directly
updating the DOM, and timers.
useEffect accepts two
arguments. The second
argument is optional.
useEffect(<function>,
<dependency>)

4
Example:

5
3. useContext

React Context is a way to


manage state globally.
It can be used together with the
useState Hook to share state
between deeply nested
components more easily than
with useState alone.

6
Example:

7
4. useRef

The useRef Hook allows you to


persist values between renders.
It can be used to store a mutable
value that does not cause a re-
render when updated.
It can be used to access a DOM
element directly.

8
Example:

9
5. useReducer
The useReducer Hook is similar
to the useState Hook.
It allows for custom state logic.
The reducer function contains
your custom state logic and the
initialStatecan be a simple value
but generally will contain an
object.
The useReducer Hook returns
the current stateand a
dispatchmethod.

10
Example:

11
6. useCallback
The React useCallback Hook
returns a memoized callback
function.
This allows us to isolate resource
intensive functions so that they will
not automatically run on every
render.
The useCallback Hook only runs
when one of its dependencies
update.
useCallback is a React Hook that
lets you cache a function definition
between re-renders.

12
Example:

13
7. useMemo
The React useMemo Hook
returns a memoized value.
The useMemo Hook only runs
when one of its dependencies
update.
The useMemo and useCallback
Hooks are similar. The main
difference is that useMemo
returns a memoized value and
useCallback returns a memoized
function.

14
Example:

15
8. Custom Hook

Hooks are reusable functions.


When you have component logic
that needs to be used by multiple
components, we can extract that
logic to a custom Hook.
Custom Hooks start with "use".
Example: useFetch.

16
Example:

17
Thanks
Don’t forget Like and Follow

By Junaid Arshad

You might also like