Understanding React's useEffect Hook

Understanding React's useEffect Hook

I’ll explain the useEffect hook with code snippets, so that you can understand how the useEffect works. The useEffect hook lets you perform side effects in function components. Hooks were a new addition in the release of React 16.8. They let you use state and other React features without writing a class component.

Hooks were a new addition in the release of React 16.8. They let you use state and other React features without writing a class component.

The useEffect hook lets you perform side effects in function components

The useEffect hook is the Jack of all trades 👑 of the hooks. It’s the combination of componentDidMount, componentDidUpdate and componentWillUnmount. It's used for fetching the data when a component mounts, execute stuff when state or props change, Clean up stuff when the component unmounts. This useEffect hook can be really confusing 💡 until you understand or know how it works.

In this article, I’ll explain the useEffect hook with code snippets, so that you can understand how the useEffect works.

Run once like componentDidMount

By default, the useEffect hook runs after each render of the component where it is invoked, To run the useEffect only on mount, pass an empty array [] as a second argument. useEffect needs a dependency to re-render, here we're stating that this useEffect doesn't have any _dependency _to re-render. So it only renders once.

useEffect(() => {
 // Your code here
}, []);

On the change of props/state

By default, the useEffect hook runs after each render, you can also control when to re-render by passing the props or state variables as the second argument, The second argument is an array of dependencies if any of the variable in the dependencies array changes the useEffect hook will run.

useEffect(() => {
 // Your code here
}, [variableName]);

After every render

The useEffect hook runs after every render, If you simply omit the second argument, it will do the job 🙃

useEffect(() => {
 // Your code here
});

On unmount

To execute stuff on unmounting the component,

useEffect(() => {
  return () => {
   // unmount code here
  }
});

The code which you’ll place inside the return () ⇒ { } block will execute before the prior to unmounting. The unmount function is not just executed only when the component is unmounted. It’s executed every time before that useEffect runs which are to clean up from the last render.

react javascript programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.