Using the Effect Hook

Question 1

Describe useEffect

Answer 1

The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

Effects may also optionally specify how to “clean up” after them by returning a function.

Question 2

What happens when you call useEffect?

Answer 2

When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state.

Question 3

When does useEffect run?

Answer 3

By default, React runs the effects after every render — including the first render.

Question 4

Multiple useEffects

Answer 4

Just like with useState, you can use more than a single effect in a component.

If you have multiple effects to run make sure you separate them out rather than having all the code in a single useEffect.

Question 5

Benefits of useEffect

Answer 5

Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods.

Question 6

What are some examples of side effects?

Answer 6

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects

Question 7

How is useEffect related to the component life cycle?

Answer 7

You can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Question 8

What are two common side effect types in react?

Answer 8

There are two common kinds of side effects in React components: those that don’t require cleanup, and those that do.

Question 9

Effects Without Cleanup

Answer 9

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 that don’t require a cleanup. We say that because we can run them and immediately forget about them.

Question 10

What does useEffectDo?

Answer 10

What does useEffect do?

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Question 11

Why is useEffect called inside a component?

Answer 11

Why is useEffect called inside a component?

Placing useEffect inside the component lets us access the state variable (or any props) right from the effect. We don’t need a special API to read it — it’s already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.

Question 12

Does useEffect run after every render?

Answer 12

Does useEffect run after every render?

Yes. By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.

Question 13

Does useEffect block the browser from updating the screen?

Answer 13

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously.

Question 14

Effects with Clean up

Answer 14

Earlier, we looked at how to express side effects that don’t require any cleanup. However, some effects do. For example, we might want to set up a subscription to some external data source. In that case, it is important to clean up so that we don’t introduce a memory leak.

Code for adding and removing a subscription is so tightly related that useEffect is designed to keep it together. If your effect returns a function, React will run it when it is time to clean up.

Effects might not have a cleanup phase, so they won’t return anything.

Question 15

How do you clean up in useEffect?

Answer 15

How do you clean up in useEffect?

This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect

Question 16

When exactly does React clean up an effect?

Answer 16

When exactly does React clean up an effect?

React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

Question 17

Does the returned function that cleans up have to be named?

Answer 17

We don’t have to return a named function from the effect. We called it cleanup here to clarify its purpose, but you could return an arrow function or call it something different.

Question 18

Use Multiple Effects to Separate Concerns

Answer 18

One of the problems we outlined in the Motivation for Hooks is that class lifecycle methods often contain unrelated logic, but related logic gets broken up into several methods.

So, how can Hooks solve this problem? Just like you can use the State Hook more than once, you can also use several effects. This lets us separate unrelated logic into different effects.

Hooks let us split the code based on what it is doing rather than a lifecycle method name. React will apply every effect used by the component, in the order they were specified.

Question 19

Why do Effects Run on Each Update?

Answer 19

There is no special code for handling updates because useEffect handles them by default. It cleans up the previous effects before applying the next effects.

This behavior ensures consistency by default and prevents bugs that are common in class components due to missing update logic.

Question 20

Conditionally run useEffect and second parameter dependency array.

Answer 20

In some cases applying the effect after every render can cause performance issues, so you need a way to conditionally run effect from a component.

To conditionally execute an effect we pass in a second parameter. This parameter is an array. Within this array you need to specify the props or state that we need to watch for. Only if those props and state specified in the array were to change the effect would be executed.

Question 21

How do you have useEffect run only once?

Answer 21

The way we do that is by specifying an empty array as the second parameter to the useEffect. We’re telling react that this effect does not depend on any props or state so there’s no reason to call this effect on re-renders. This makes react call the effect on the initial render and forget about it.