React Hook useEffect() Example

In this post we will look into UseEffect() hook that can be thought of as componentDidMount, componentDidUpdate and componentWillUnmount.

In the previous post, we learnt about React Hook useState() Examples(#useState with Array). You can check the previous topic here.

Get Vinitha Subhash’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In the previous article, we learnt about React Hook useState() Example. You can check the previous topic here.

• Hooks are something that lets us write Functional component and still hook into class based features and use them.
• states and lifecycle methods are two big features of class based components.
• useEffect() allow us to handle logic in lifecycle methods and useState() allow us to bring state into functional components.

React Hook useEffect() Example

In the above example we are fetching country names from specified website and filtering country names whose length is “8” letters.

useEffect() Example with #async, await

• If we use Async/Await in useEffect we will get error, because we cannot return a promise from useEffect.
• Javascript async functions always returns a promise and useEffect exclusively returns another function which is used for cleaning up the effect.
• But we can re-write asynchronous logic like below example.

React Hook useEffect() async/await Example Code