React hook: useEffect

React hook: useEffect

a photo with an effect

useEffect allows you to fire side effects in functional components.

It acts much like componentDidMount, but it will fire any time the component re-renders unless you pass in a secondary parameter – an array. This array can have any (or no) value, but generally you would link it to whatever property you are trying to update or keep track of with useEffect. If the array is empty, it will act very much like componentDidMount and only fire once when the component is first rendered, and not on subsequent re-renders.

In the example below, the useEffect is fetching some data to display on the frontend to the user. Normally one would probably want to use an async/await to do this, but there are some caveats when doing this with useEffect.

Async actually returns an ‘asyncFunc’ object, which useEffect does not want. So if you want to write an asynchronous function inside useEffect, you would want to declare the async as a named function inside the body of useEffect.

Another caveat is that if you want to use a conditional, it must be placed inside of the useEffect function. You cannot place the useEffect function inside of a conditional. See the code below.

See the Pen
by mikkel250 (@mikkel250)
on CodePen.

Add a comment

*Please complete all fields correctly

Related Blogs