Scribd
Upload
57 views33 pages

6.2 - Common Hooks in React: Useeffect, Usecallback, Usememo, Custom Hooks Prop Drilling

1. Common React hooks include useState, useEffect, useCallback, useMemo, and useRef. useState allows components to manage state, useEffect is used for side effects like data fetching, and the others optimize re-renders. 2. useEffect takes a dependency array to control when its callback runs, like only running on certain state changes. Custom hooks let developers extract component logic into reusable functions starting with "use". 3. Prop drilling refers to passing props from parent to child to child, which hooks help address through state management and context.

Uploaded by

Adesh Kumar chaturvedi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
57 views33 pages

6.2 - Common Hooks in React: Useeffect, Usecallback, Usememo, Custom Hooks Prop Drilling

1. Common React hooks include useState, useEffect, useCallback, useMemo, and useRef. useState allows components to manage state, useEffect is used for side effects like data fetching, and the others optimize re-renders. 2. useEffect takes a dependency array to control when its callback runs, like only running on certain state changes. Custom hooks let developers extract component logic into reusable functions starting with "use". 3. Prop drilling refers to passing props from parent to child to child, which hooks help address through state management and context.

Uploaded by

Adesh Kumar chaturvedi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 33

6.

2 | Common hooks in react


useE ect, useCallback, useMemo, custom hooks
Prop drilling
ff
Two jargons before we start

1. Side effects
2. Hooks
Two jargons before we start

1. Side effects
2. Hooks
Two jargons before we start

1. Side effects
2. Hooks
Two jargons before we start

Some common hooks are


1. useState
2. useEffect
1. Side effects 3. useCallback
2. Hooks 4. useMemo
5. useRef
6. useContext
useState

Let’s you describe the state of your app


Whenever state updates, it triggers a re-render
which nally results in a DOM update
fi
useEffect
Lets start with an example

You are a car racer that has to do a 100 laps across a stadium
You are allowed to take a pit stop from time to time.
Do you take the stop in b/w every lap? Or do you take a stop after every 10 laps lets say?
Lets start with an example

You will only make a pit stop


From time to time
(Lets say once every 20 laps)
even though you pass right in front of it Pit
stop
in every lap

Making a pit stop is a side e ect


ff
useEffect

Pit stop
useEffect

Pit stop

https://gist.github.com/hkirat/d3a74a1f4e 2c92f7a3c0da0c47d9c3
ff
useEffect

What should happen?


Pit stop
useEffect

Pit stop

When should it happen?


useEffect

Dependency array
When should the callback fn run

1. Tyre burst
2. Tyre pressure is up
3. 10 laps have passed
4. Engine is making a noise
5. Want to change the car
useEffect

Write a component that takes a todo id as an input


And fetches the data for that todo from the given endpoint
And then renders it

How would the dependency array change?

https://sum-server.100xdevs.com/todo?id=1

Solution
https://gist.github.com/hkirat/178ab 7b3bc80af5878be7b9a3b7d69
ff
useEffect
useEffect
useEffect

useE ect, useMemo, useCallback, custom hooks


Prop drilling
ff
useMemo

Before we start , lets understand what memoization means

It’s a mildly DSA concept

It means remembering some output given an input and not computing it again
useMemo

Lets say you are the driver


and you want to check how much petrol is left
Would u do that in every lap?
Or would u do that every 10 laps?
Or every 20 minutes?
useMemo

Lets say you are the driver


and you want to check how much petrol is left
Would u do that in every lap?
Or would u do that every 10 laps?
Or every 20 minutes?
useMemo

If I ask you to create an app that does two things -


1. Increases a counter by 1
2. Lets user put a value in an input box (n) and you need
to show sum from 1-n

One restriction - everything needs to be inside App


useMemo
Ugly solution

https://gist.github.com/hkirat/30d07fc535c83ab89b7b9c58b11e 4f
ff
useMemo

Better solution - memoize the value across re-renders, only


recalculate it if inputVal changes
useE ect, useMemo, useCallback, custom hooks
Prop drilling
ff
useCallback
useCallback
What is the problem in this code?

https://gist.github.com/hkirat/34c2ddf04284945f7bf0f17cbe8347f6
useCallback
Solution
useE ect, useMemo, useCallback, custom hooks
Prop drilling
ff
Custom hooks

Just like useState, useE ect, you can write your own hooks

Only condition is - It should start with a use (naming convention)


ff
Custom hooks
useE ect, useMemo, useCallback, custom hooks
Prop drilling
ff
Prop drilling

You might also like