295a6ec4.2d9c615e.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},y=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),y=r,b=p["".concat(o,".").concat(y)]||p[y]||m[y]||i;return n?a.a.createElement(b,c(c({ref:t},u),{},{components:n})):a.a.createElement(b,c({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=y;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var u=2;u<i;u++)o[u]=n[u];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}y.displayName="MDXCreateElement"},161:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/optimize-your-promise-by-using-async-await-20def419263bece126e69815d5ba6762.png"},77:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(3),a=n(7),i=(n(0),n(134)),o={slug:"optimize-your-promise-by-using-async-await-in-react",title:"Optimize Your Promise by Using Async/Await in React",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:["async/await","async","await"],image:"/img/optimize-your-promise-by-using-async-await.png"},c={permalink:"/blog/optimize-your-promise-by-using-async-await-in-react",source:"@site/blog/2020-11-28-optimize-your-promise-by-using-async-await-in-react.md",description:"Optimize Your Promise by Using Async/Await in React",date:"2020-11-28T00:00:00.000Z",tags:[{label:"async/await",permalink:"/blog/tags/async-await"},{label:"async",permalink:"/blog/tags/async"},{label:"await",permalink:"/blog/tags/await"}],title:"Optimize Your Promise by Using Async/Await in React",readingTime:1.17,truncated:!0,prevItem:{title:"Pros and Cons of Using TypeScript with React",permalink:"/blog/pros-and-cons-of-using-typescript-with-react"},nextItem:{title:"When to useMemo and useCallback?",permalink:"/blog/usememo-and-usecallback"}},s=[],u={rightToc:s};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,Object(i.b)("img",{alt:"Optimize Your Promise by Using Async/Await in React",src:n(161).default,title:"Optimize Your Promise by Using Async/Await in React"})),Object(i.b)("p",null,"When Promise was introduced in ES5, it was meant to solve a problem with asynchronous code, and they did, but over the 2 years that separated ES5 and ES7, it was clear that promises could not be the final solution."),Object(i.b)("p",null,"Promise was introduced to solve the famous callback hell problem, but they introduced complexity on their own, and syntax complexity."),Object(i.b)("p",null,"How can we escape Promise syntax complexity? Good things come to those who Await."))}l.isMDXComponent=!0}}]);