React useEffect

Question 1

Give three examples of effects.

Answer 1

What are effects, really? Examples are:

Fetching data
Reading from local storage
Registering and deregistering event listeners

Question 2

How should you write asynchronous code in react?

Answer 2

Using useEffect( )

Question 3

Is it a good practice to use more than one useEffect in a component ?

Answer 3

It is, don’t be afraid to use multiple useEffect statements in your component. While useEffect is designed to handle only one concern, you’ll sometimes need more than one effect.

Question 4

Is useEffect designed to handle only one concern?

Answer 4

Yes useEffect is designed to handle only one concern. If you have more than one concern you need to add more useEffects.

Question 5

What are the problems of using only one effect for multiple purposes?

Answer 5

It decreases the readability of your code, and some use cases are straight-up not realisable.

Question 6

Should you think about hooks in terms of lifecycle methods?

Answer 6

No, don’t think in lifecycle methods anymore!

Question 7

When are effects executed?

Answer 7

After render. To be more specific, they execute both after the first render and after every update.

Question 8

Can effects block the UI?

Answer 8

No effects don’t block the UI because they run asynchronously.

Question 9

What determines whether an effect will be executed?

Answer 9

Other than always being ran after first render, the dependency array determines whether an effect will be executed. If a dependency array does not exist then an effect will always be executed. If a dependency array does exist it will only run an effect if a change has been made to the dependency array.

Question 10

What are acceptable Array values for useEffect dependency arrays and where must they come from?

Answer 10

Dependency array values must be from the component scope (i.e., props, state, context, or values derived from the aforementioned).

Question 11

Changes to what three things can cause a component to be re-rendered.

Answer 11

Changes to state, prop, or context cause components to be re-rendered.

Question 12

What are the “conditions” to execute for a useEffect call?

Answer 12

In the case of useEffect the “conditions” to execute are whether a useEffect dependency array exists or not and if it does have any values changed since the last render cycle.

If no dependency array is present an effect is executed after every re-render.

If a dependency array exists an effect is only executed if the dependency array’s values have changed.

Question 13

Does a useEffect always get called on a components initial render?

Answer 13

Yes it does, it runs after first render and then after every update (assuming if a dependency array exists, it has changed).

Question 14

What do the hooks useState, useEffect and useRef give you access too? (this is a stupid question for my own understanding)

Answer 14

useState lets you use state,
useEffect lets you use effects,
useRef lets you use refs

Question 15

Does the order of your effects matter?

Answer 15

Yes they are executed in the order in which they are declared in the code.

Question 16

How do you make an effect execute only once?

Answer 16

Add an empty dependency array. Effects are only executed once;

Question 17

What causes stale state ?

Answer 17

Accessing state before the component has re-rendered.

When you change state using a state setting function the component re-renders due to state changing. If you try and access state straight away inside the state setting function you will get the previous value because the component hasn’t re-rendered yet. When the component re-renders the state variable will be up to date.