Component Lifecycle / useEffect Hook

Effects Hook

What purpose does useEffect serve in a function component compared to its counterpart(s) in class components?

The useEffect helps to perform side effects in functional components; that is, any function that you need to run after updating the DOM. It replaces some events by running a function whenever one or more variables change. It takes two arguments: a function and an optional array.

When using the useEffect Hook

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.

Why is useEffect called inside a component?

Placing useEffect inside the component lets us access the count 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.

Does useEffect run after every render? By default, it runs both after the first render and after every update. 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.

Explain the importance of properly implementing effects with Cleanup Reflection

React’s useEffect cleanup function saves applications from unwanted behaviors like memory leaks by cleaning up effects.

What are your learning goals after reading and reviewing the class README?

I’m excited to dig further into state and better understand how hooks can let me manipulate an application in React.