What is useEffect in React - Quick Revision & Key Takeaways

Recall & Review

beginner

What is the purpose of the useEffect hook in React?

useEffect lets you run code after your component renders. It helps you handle side effects like fetching data, updating the DOM, or setting timers.

beginner

How do you control when useEffect runs?

You pass a dependency array as the second argument to useEffect. It runs the effect only when values in this array change.

beginner

What happens if you pass an empty array [] to useEffect?

<p>The effect runs only once after the first render, similar to <code>componentDidMount</code> in class components.</p>

intermediate

Why might you return a function from inside useEffect?

Returning a function lets you clean up side effects, like removing event listeners or clearing timers, before the component unmounts or before the effect runs again.

beginner

Give an example of a side effect you might handle with useEffect.

Fetching data from an API when the component loads, updating the document title, or subscribing to a WebSocket are common side effects handled with useEffect.

What does useEffect do in a React component?

A Styles the component

B Creates a new component

C Manages component state

D Runs code after rendering to handle side effects

useEffect runs code after rendering to handle side effects like data fetching or timers.

When does useEffect run if you provide an empty dependency array []?

A Only once after the first render

B After every render

C Never

D Only when the component unmounts

With an empty array, useEffect runs only once after the first render.

What is the purpose of returning a function inside useEffect?

A To update the component state

B To fetch data

C To clean up side effects before next run or unmount

D To render JSX

Returning a function cleans up side effects like removing event listeners or timers.

Which hook is used to handle side effects in React functional components?

A useState

B useEffect

C useContext

D useRef

useEffect is the hook designed for side effects.

If you want useEffect to run only when a specific variable changes, what do you do?

A Pass that variable in the dependency array

B Call <code>useEffect</code> multiple times

C Use <code>useState</code> instead

D Put the variable inside the effect function only

Passing the variable in the dependency array tells React to run the effect when it changes.

Explain in your own words what useEffect does and why it is useful in React.

Think about things like fetching data or timers in a component.

Describe how you would use useEffect to fetch data only once when a component loads.

Remember the empty array means run once.