/react-useeffect-explanation/

[panzerdp]

Written on 10/10/2020 14:07:32

URL: https://dmitripavlutin.com/react-useeffect-explanation/

[data-scientist-ml1]

This article should be in React Js official documentation of UseEffect() instead of their original doc. Great Article and very easy to understand.

[test11github]

Very easy words, no dry term over another. So very easy to read and really enjoy reading them. Please carry on. :) The "Try Demo" code block above 6.1, it still keep incrementing. For example, typing in "hey msg", after a while, the blue counter keeps going up in console every 2 seconds. Seems not clearing.

[codthing]

The usage of arrow function here is wrong：

import { useEffect } from 'react';
function RepeatMessage({ message }) {
  useEffect(() => {
    const id = setInterval(() => {
      console.log(message);
    }, 2000);
//-----wrong-----
    return () => {
      clearInterval(id);
    };
//-----right-----
    return () => clearInterval(id);
  }, [message]);
  return <div>I'm logging to console "{message}"</div>;
}

[panzerdp]

The usage of arrow function here is wrong...

@codthing Can you provide more details why the usage of the arrow function is wrong in my code sample?

[panzerdp]

Very easy words, no dry term over another. So very easy to read and really enjoy reading them. Please carry on. :) The "Try Demo" code block above 6.1, it still keep incrementing. For example, typing in "hey msg", after a while, the blue counter keeps going up in console every 2 seconds. Seems not clearing.

@test11github The idea is that previous interval timers were cleanup. The new one is indeed still going.

[SunilPrasad]

What if we write fetch function outside the usEffect . Example

const fetchPosts = async () => { const response = await fetch(api); const data = await response.json(); setPosts(data); }; useEffect(() => {
fetchPosts(); }, []);

[panzerdp]

What if we write fetch function outside the usEffect . Example

const fetchPosts = async () => { const response = await fetch(api); const data = await response.json(); setPosts(data); }; useEffect(() => { fetchPosts(); }, []);

I think it's doable, and moreover it simplifies the useEffect()'s callback.

[vignesh53]

Great Explanation. Very clear!

[FilipHrn]

Somebody give this man a medal! First time ever I voluntarily subscribe to email sending. So simply explained yet so well. Not a single unclear spot. Very well done, keep the explanations coming and thank you so much!

[brandonbawe]

Thank you for this article sir it made understand useEffect better.

[panzerdp]

@FilipHrn @brandonbawe Glad you like it! 😄

[Jamalahmad123]

@panzerdp when getting data from an api and that request is depends on the form submit so then how we can use the useEffect there, or there is no need of useEffect because as i learned from you that the aim of useEffect is to decouple it from the component

[panzerdp]

@Jamalahmad123 Can you share some running code or a sandbox?

[Jamalahmad123]

of course here is my code

handle Submit is a function in which I'm doing a fetch request
function handleSubmit(e) {
e.preventDefault();

// check if text is empty
if (text === "") {
  setError(true);
} else if (text !== "") {
  setError(false);
}

fetch(`https://api.shrtco.de/v2/shorten?url=${text}`)
  .then((res) => res.json())
  .then((data) => {
    setLinksData([
      {
        id: uuidv4(),
        actualLink: data.result.original_link,
        shortLink: data.result.short_link,
      },
      ...linksData,
    ]);
  });

setText("");

}

[panzerdp]

@Jamalahmad123 It's safe to execute the fetch as a result of a DOM event without using useEffect().

[Jamalahmad123]

@panzerdp is this the correct way to fetch data when working with forms without using useEffect and also if we want to use the useEffect so how then we can use it when working with forms.

[mh-saeed]

You should add another example in "Dependencies argument" section for non-primitive type dependency. Like how useEffect() will behave if the dependency is an object, will it run every time or it will behave same as it did for primitive type dependency.

[panzerdp]

how useEffect() will behave if the dependency is an object

@mh-saeed That's a good idea. I will add a section explaining what to do when the dependency is an object.

[guwalgiya]

great article, love the south park references here

[odeliopj]

I've begun my first internship in software development and since then I'am trying to learn React - I'm passing through a change of career (in the past 4 years I worked as a lawyer in privacy and data protection). This is the best explanation on useEffect() I've encountered.

Great article!

[acoderwannabe19]

Very good and simple explanation Sir, keep it up!