React — Questions & Answers (7) / useEffect in React Hooks

These are React basic quiz from Scrimba course I noted. I found it really helpful to learn most of frontend skills in there, super recommended!

👉🏼 https://scrimba.com/

React JS logo

Key features

Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.

• State Hooks (useState, useReducer)
• Context Hooks (useContext)
• Ref Hooks (useRef)
• Effect Hooks (useEffect)

useEffect(setup, dependencies?)

useEffect is a React Hook that lets you synchronize a component with an external system. When there is a change to dependency, setup will happen.

⚠️ It is for synchronizing external systems like non-React widget, network or on the browser DOM. The React document emphasizes that we need to avoid using them unnecessarily such as for just updating component’s state. Too many unnecessary useEffect will cause…

👎 Hard to read

👎 Slower rendering

👎 Error-prone

Summary Quiz

1. What is a “side effect” in React? What are some examples?

: Any code that affects an outside system.

Examples — local storage, API, websockets, two states to keep in sync.

2. What is NOT a “side effect” in React? Examples?

: Anything that React is in charge of.

Examples — Maintaining state, keeping the UI in sync with the data, render DOM elements.

3. When does React run your useEffect function? When does it NOT run the effect function?

• As soon as the component loads. — first render
• On every re-render of the component. — assuming no dependencies array
• Will not run the effect when the values of the dependencies in the array stay the same between renders.

4. How would you explain what the “dependecies array” is?

• Second parameter to the useEffect function.
• A way for React to know whether it should re-run the effect function.

Happy React! 🌐