Riley Lambert

Riley Lambert

1586450940

The useEffect Hook and Its lifecycle

In this video we look at an issue I was having where state was being updated after the component had unmounted and the solution I came up with to solve that. What the heck is that 2nd argument for and did you know you can return a function from your useEffect function?


Using the useEffect Hook

useEffect is meant to handle any sort of “side effect” (making a change in some external system, logging to the console, making an HTTP request, etc…) that is triggered by a change in your component’s data or in reaction to the component rendering. It replaces componentDidMount, componentDidUnmount, and componentDidReceiveProps, or some code that is run any time your state changes. It can be challenging to grasp the nuances of its use, but by understanding when it runs and how to control that, it can become a little bit easier to wrap your head around.

In this article we’ll look at how to get an effect to run after every render, just once, or when a particular piece of data changes. We’ll also look at the difference between the effect itself, and how to clean up after itself.

Run the effect on every render

For the smallest example possible, we have the typical example of the useEffect which logs to the console the value of count after every render. It is important to note: useEffect is run after the render. Always think: First render, then effect.

import React, { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`The count is ${count}`);
  });

  return (
    <div>
      <p>Count is {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        increase
      </button>
    </div>
  );
}

Why does this example run after every render? The reason is because no arguments were passed as the 2nd argument to useEffect. React uses the 2nd argument to determine whether or not it needs to execute the function passed to useEffect… by passing nothing, React will run the effect every time.

This may cause performance issues or just be a tad overkill, so let’s see how to add a little extra control to when our effect functions are run.

Run the effect only once

Let’s say we only wanted the effect to run a single time… think of this as a replacement for componentDidMount. To do this, pass a [] as the 2nd argument to useEffect:

import React, { useEffect } from "react";

export default function Mounted() {
  useEffect(() => {
    console.log("mounted");
  }, []);

  return <div>This component has been mounted.</div>;
}

Run the effect when data changes

If what you really want is to run the effect only when a specific value changes… say to update some local storage or trigger an HTTP request, you’ll want to pass those values you are watching for changes as the 2nd argument. This example will write the user’s name to local storage after every time it is updated (triggered by the onChange of the input).

import React, { useState, useEffect } from "react";

export default function Listen() {
  const [name, setName] = useState("");

  useEffect(
    () => {
      localStorage.setItem("name", name);
    },
    [name]
  );

  return (
    <div>
      <input
        type="text"
        onChange={e => {
          setName(e.target.value);
        }}
        value={name}
      />
    </div>
  );
}

Cleaning up from your effect

Sometimes you need to undo what you’ve done… to clean up after yourself when the component is to be unmounted. To accomplish this you can return a function from the function passed to useEffect… that’s a mouthful but let’s see a real example, of what would be both componentDidMount and componentDidUnmount combined into a single effect.

import React, { useEffect } from "react";

export default function Listen() {
  useEffect(() => {
    const listener = () => {
      console.log("I have been resized");
    };
    window.addEventListener("resize", listener);

    return () => {
      window.removeEventListener("resize", listener);
    };
  }, []);

  return <div>resize me</div>;
}

Avoid setting state on unmounted components

Because effects run after the component has finished rendering, and because they often contain asynchronous code, it’s possible that by the time the asynchronous code resolves, the component is no longer even mounted! When it gets around to calling the setData function to update the state, you’ll receive an error that you can’t update state on an unmounted component.

The way we can solve the stated (no pun intended) issue above, is by using a local variable and taking advantage of the “cleanup” function returned from our effect function. By starting it off as true, we can toggle it to false when the effect is cleaned up, and use this variable to determine whether we still want to call the setData function or not.

import React, { useState, useEffect } from "react";
import Axios from "axios";

export default function Fetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(
    () => {
      // Start it off by assuming the component is still mounted
      let mounted = true;

      const loadData = async () => {
        const response = await Axios.get(url);
        // We have a response, but let's first check if component is still mounted
        if (mounted) {
          setData(response.data);
        }
      };
      loadData();

      return () => {
        // When cleanup is called, toggle the mounted variable to false
        mounted = false;
      };
    },
    [url]
  );

  if (!data) {
    return <div>Loading data from {url}</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
}

Cancelling an Axios call when component unmounts

With the example above, you may have asked yourself… why even bother waiting for a response if we know for a fact we don’t even need it. It turns out Axios has a way to cancel a request. We can use the same method as above, using a local variable along with an effect cleanup function, but this time the local variable will be an Axios cancellation source/token, allowing us to call source.cancel() to stop Axios in its tracks.

Just keep in mind that this will raise an exception that we should catch. Axios provides us a way using Axios.isCancel(error) to determine if what we caught was because of our own cancellation or some other unexpected error.

import React, { useState, useEffect } from "react";
import Axios from "axios";

export default function Fetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(
    () => {
      // Set up a cancellation source
      let source = Axios.CancelToken.source();

      const loadData = async () => {
        try {
          const response = await Axios.get(url, {
            // Assign the source.token to this request
            cancelToken: source.token
          });
          setData(response.data);
        } catch (error) {
          // Is this error because we cancelled it ourselves?
          if (Axios.isCancel(error)) {
            console.log(`call for ${url} was cancelled`);
          } else {
            throw error;
          }
        }
      };
      loadData();

      return () => {
        // Let's cancel the request on effect cleanup
        source.cancel();
      };
    },
    [url]
  );

  if (!data) {
    return <div>Loading data from {url}</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
}

Conclusion

I hope that this article was able to shed some light on a few different ways to take advantage of effects, what causes them to be executed, and how to deal with the issue of an effect possibly executing code after the component has already been unmounted. With useEffect we’re able to combine both the setup and the cleanup together, where in class based components you’d be required to split the functionality across the componentDidMount and componentDidUnmount lifecycle events.

The code referenced in this article can be found at https://github.com/leighhalliday/use-effect-example

#reactjs #javascript #web-development

What is GEEK

Buddha Community

The useEffect Hook and Its lifecycle
Mark Mara

Mark Mara

1607399166

Class-less Components in React

While coding this week, I had to convert one of my class components in React to a functional component.

Why would I need to do that? After all, the parent component sees the two types of components as identical. Sure, functional components can be shorter, require less boilerplate, and maybe even perform better. But that’s not why I needed to do it. I was using an npm package that had React hooks and hooks are for functional components only. React Hooks, added in React 16.8, allow functional components to manage state and replace lifecycle methods. To use the hook I needed I had to convert my class components to a functional.

Here are the steps I followed to change my class component to a functional component:

#react-hook-useeffect #useeffect #react-hook #react-hook-usestate #react

React Hooks Tutorial useEffect() Hook with Carousel Example in Hindi

In this video I cover everything you need to know about the useEffect hook in Hindi. We will make a Carousel using useEffect Hook. This is the part of a series of React videos where I cover all the important hooks in React.

📚 Materials/References:
useState Video: https://youtu.be/_lFMJZd6m_I
React in 10 minutes: https://youtu.be/GXcqMAIc_RQ
Create Your First React App : https://youtu.be/XJu15K_QNaU
Spread Operator : https://youtu.be/lNqy3SJ8AcU
Higher Order Functions : https://youtu.be/pJZW5n3Uzh4

Images Used : copy link from Unsplash

Connect With Me
Instagram : https://www.instagram.com/yashmehta5124/
LinkedIn : https://www.linkedin.com/in/yash-mehta-80b141172/


If you found this video valuable, give it a like.
If you know someone who needs to watch it, share it.
If you have questions ask below in comment section.
Add it to a playlist if you want to watch it later.


Music : https://www.bensound.com/

#useeffect #reactjs #hooks

Humberto  Ratke

Humberto Ratke

1589644080

What is DevOps Lifecycle? | How to manage yours

From conceptualization to deployment, the process of developing software applications or web applications is complex. By going through several intricate phases of development, a web application or software is tested on multiple levels before being proceeded into production.

In most cases, software application development becomes time-consuming due to its specifications and complexities. In order to deliver the application in a short span of time, software developers are following a universal set of practices called the DevOps lifecycle.

So, what is DevOps in the world of software application development? Let’s deep dive into its meaning, uses, as well as each critical phase in the DevOps lifecycle.

#devops #devops tutorial #devops lifecycle tools #devops lifecycle blocks #devops lifecycle phases #lifecycle of devops

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Steve Griffith

Steve Griffith

1603804567

Intro to React Hooks with useState and useEffect

https://www.youtube.com/watch?v=P5p3vMeJ6LQ

Learn about state, class components vs functional components, react hooks, useState, and useEffect.

#react #reactjs #javascript #hooks #usestate #useeffect