f0001acd.29407e77.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{125:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),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),r=n(7),c=(n(0),n(134)),a={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:[]}],s={rightToc:u};function f(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(c.b)("wrapper",Object(o.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,Object(c.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(c.b)("h2",{id:"how-to-use-async-function-in-useeffect-hook"},"How to use async function in useEffect hook?"),Object(c.b)("p",null,"At first glance you will have an idea as following."),Object(c.b)("pre",null,Object(c.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx"}),"useEffect(async () => {\n  await someTask();\n}, []);\n")),Object(c.b)("p",null,Object(c.b)("strong",{parentName:"p"},"What's wrong?")),Object(c.b)("p",null,"The compiler should be yielding something as following."),Object(c.b)("pre",null,Object(c.b)("code",Object(o.a)({parentName:"pre"},{}),"Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.\n")))}f.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return m}));var o=n(0),r=n.n(o);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(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?a(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(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,r=function(e,t){if(null==e)return{};var n,o,r={},c=Object.keys(e);for(o=0;o<c.length;o++)n=c[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)n=c[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),f=function(e){var t=r.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 r.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,c=e.originalType,a=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),l=f(n),b=o,m=l["".concat(a,".").concat(b)]||l[b]||p[b]||c;return n?r.a.createElement(m,i(i({ref:t},s),{},{components:n})):r.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=n.length,a=new Array(c);a[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,a[1]=i;for(var s=2;s<c;s++)a[s]=n[s];return r.a.createElement.apply(null,a)}return r.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"}}]);