0% found this document useful (0 votes)
18 views7 pages

39 - Useeffect Hook

The useEffect hook allows performing side effects in React functional components. Side effects include fetching data from an API, updating the DOM directly, and using timers. useEffect is similar to componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods combined. It accepts a callback function and optional dependency array, and runs the callback after initial render and after updates if dependencies change. Common uses of useEffect include making API requests, interacting with the browser, and using timers.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
18 views7 pages

39 - Useeffect Hook

The useEffect hook allows performing side effects in React functional components. Side effects include fetching data from an API, updating the DOM directly, and using timers. useEffect is similar to componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods combined. It accepts a callback function and optional dependency array, and runs the callback after initial render and after updates if dependencies change. Common uses of useEffect include making API requests, interacting with the browser, and using timers.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

PART-39

useEffect Hook
PRESENTER: MOHAMMAD ADIL
REACT
useEffect Hook REACT

• many developers were confused by the name of this hook:


"useEffect".
• What exactly is an "effect“ ?
• The word effect refers to a functional programming term called a
"side effect".
• Some examples of side effects are: fetching data from API, directly
updating the DOM, and timers.
useEffect Hook REACT

• The useEffect Hook allows you to perform side effects in your


functional component.
• Sometimes, we want to run some additional code after React has
updated the DOM. Network requests, manual DOM mutations,
and logging are common examples of effects.
• The render method itself shouldn’t cause side effects. It would be too
early.
Common side effects include: REACT

• Making a request to an API for data from a backend server


• To interact with browser APIs (that is, to use document or window
directly)
• Using unpredictable timing functions like setTimeout or setInterval
useEffect Hook REACT

• If you are familiar about with React Life Cycle Methods Of Class
Components, you can compare useEffect Hook as
componentDidMount, componentDidUpdate and
componentWillUnmount combined.
How To Use useEffect Hook REACT

• First you have to import it from React.


• Import {useEffect} from ‘react’
• We have to place this useEffect() hook inside the function
component.
• When we place useEffect() hook inside the function component then
we have the access of props and state easily.
• useEffect runs after first render and also after every render update.
useEffect Hook REACT

• useEffect accepts two arguments. The second argument is optional.


• useEffect(<function>, <dependency>)
• The function inside useEffect() will run after every render is
committed.
• Second argument of useEffect is the array of values which depends
on effects.
• Important Note: you can call useEffect hook as many times as you
need.

You might also like