b5d305d3.4ff87a1a.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{112:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return f}));var o=n(3),c=n(7),a=(n(0),n(134)),r={slug:"how-to-use-async-function-in-useEffect-hook",title:"How to use async function in useEffect hook?",author:"Bunlong",author_title:"React Patterns Team",author_url:"https://github.com/Bunlong",author_image_url:"https://avatars1.githubusercontent.com/u/37023003?s=400&u=0049c6773040efb265cdf622076305f8b47facec&v=4",tags:["hook"],image:"/img/how-to-use-async-function-in-useEffect-hook.png"},i={permalink:"/blog/how-to-use-async-function-in-useEffect-hook",source:"@site/blog/2020-12-26-how-to-use-async-function-in-useEffect-hook.md",description:"How to use async function in useEffect hook?",date:"2020-12-26T00:00:00.000Z",tags:[{label:"hook",permalink:"/blog/tags/hook"}],title:"How to use async function in useEffect hook?",readingTime:1.02,truncated:!0,prevItem:{title:"What is React Server Component",permalink:"/blog/react-server-component"},nextItem:{title:"Pros and Cons of Using TypeScript with React",permalink:"/blog/pros-and-cons-of-using-typescript-with-react"}},u=[{value:"How to use async function in useEffect hook?",id:"how-to-use-async-function-in-useeffect-hook",children:[]},{value:"How to deal with async function in useEffect hook?",id:"how-to-deal-with-async-function-in-useeffect-hook",children:[]}],s={rightToc:u};function f(e){var t=e.components,r=Object(c.a)(e,["components"]);return Object(a.b)("wrapper",Object(o.a)({},s,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,Object(a.b)("img",{alt:"How to use async function in useEffect hook?",src:n(165).default,title:"How to use async function in useEffect hook?"})),Object(a.b)("h2",{id:"how-to-use-async-function-in-useeffect-hook"},"How to use async function in useEffect hook?"),Object(a.b)("p",null,"At first glance you will have an idea as following."),Object(a.b)("pre",null,Object(a.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx"}),"useEffect(async () => {\n  await someTask();\n}, []);\n")),Object(a.b)("p",null,Object(a.b)("strong",{parentName:"p"},"What's wrong?")),Object(a.b)("p",null,"The compiler should be yielding something as following."),Object(a.b)("pre",null,Object(a.b)("code",Object(o.a)({parentName:"pre"},{}),"Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.\n")),Object(a.b)("p",null,"Do you start seeing the problem here? Let's take a look the ",Object(a.b)("a",Object(o.a)({parentName:"p"},{href:"https://reactjs.org/docs/hooks-reference.html#useeffect"}),"useEffect hook")," to get more informations."),Object(a.b)("p",null,"The problem is ",Object(a.b)("inlineCode",{parentName:"p"},"useEffect")," expects a clean-up function in return to clear the created resources before the component leaves the screen, but when we use async function it return a promise instead. "),Object(a.b)("h2",{id:"how-to-deal-with-async-function-in-useeffect-hook"},"How to deal with async function in useEffect hook?"),Object(a.b)("p",null,"You can define an async function inside ",Object(a.b)("inlineCode",{parentName:"p"},"useEffect")," and then call it over there as following."),Object(a.b)("pre",null,Object(a.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx"}),"useEffect(() => {\n  // Create an scoped async function in the hook\n  async anyNameFunction() => {\n    await someTask();\n  }\n\n  // Execute the created function directly\n  anyNameFunction();\n}, []);\n")),Object(a.b)("p",null,"You can also us an IIFE (Immediately Invoked Function Expression) as following."),Object(a.b)("pre",null,Object(a.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx"}),"useEffect(() => {\n  (async anyNameFunction() => {\n    await someTask();\n  })();\n}, []);\n")))}f.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return h}));var o=n(0),c=n.n(o);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,o,c=function(e,t){if(null==e)return{};var n,o,c={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(c[n]=e[n]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(c[n]=e[n])}return c}var s=c.a.createContext({}),f=function(e){var t=c.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},l=function(e){var t=f(e.components);return c.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return c.a.createElement(c.a.Fragment,{},t)}},b=c.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,r=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),l=f(n),b=o,h=l["".concat(r,".").concat(b)]||l[b]||p[b]||a;return n?c.a.createElement(h,i(i({ref:t},s),{},{components:n})):c.a.createElement(h,i({ref:t},s))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,r=new Array(a);r[0]=b;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:o,r[1]=i;for(var s=2;s<a;s++)r[s]=n[s];return c.a.createElement.apply(null,r)}return c.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},165:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/how-to-use-async-function-in-useEffect-hook-59278d7125a4b9e2c85c722fcb052ab2.png"}}]);