Use the React Effect Hook in Function Components

Share this video with your friends

Send Tweet

Similar to the State Hook, the Effect Hook is “first-class” in React and handy for performing side effects in function components. The Effect Hook is called by passing a function as the first argument. Here, you can perform side effects. If needed, you can pass an optional second argument, which is an array of dependencies. This tells React, "Only run my effect when these values change."

A tip from Ryan Florence on using the dependency array:

"with which state does this effect synchronize with."

Udit
Udit
~ 5 years ago

Is there a way to wrap side effects in a hook?

Joe Previte
Joe Previte(instructor)
~ 5 years ago

Is there a way to wrap side effects in a hook?

Yes, we essentially do that by writing a custom React effect hook in this video (later in the course):

https://egghead.io/lessons/react-write-a-custom-react-effect-hook

If you have more questions after watching that, let me know and I'd be happy to elaborate 😄