Should I use IIFE in useEffect hook?-CodePudding

Is it good practice to use IIFE in useEffect or I should declare async function and then call it?

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const json = await response.json();

      setPosts(json);
    })();
  });

CodePudding user response：

As many of you may already know, you cannot pass an async function to the useEffect hook in React. Because of IIFE’s in a roundabout way we still can

You will see for our useEffect hook that we are able to use async-await syntax by using an IIFE. That’s really it. It’s that simple. IIFEs unlock the potential to use async-await syntax inside the useeffect hook.

Conclusion IIFE’s are a really powerful JavaScript coding practice that comes in handy for a lot of different use-cases. It turns out that useEffect is no exception.

CodePudding user response：

I would suggest using IIFE rather than declaring async function and calling it. coz you are going to use the declared async function only once in the useEffect and its precisely the use case for IIFE.