{"id":6062,"date":"2018-11-05T19:49:21","date_gmt":"2018-11-05T19:49:21","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6062\/"},"modified":"2022-07-01T17:23:09","modified_gmt":"2022-07-01T17:23:09","slug":"whats-new-react-suspense","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/","title":{"rendered":"What\u2019s the new React Suspense?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this article you will get to know what is React Suspense, how to use this feature and what to expect from the future of the SPA&#8217;s (Single-page application) from my point of view.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the last <\/span><a href=\"https:\/\/2018.jsconf.is\/\"><span style=\"font-weight: 400;\">JsConf at Iceland<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/twitter.com\/dan_abramov\"><span style=\"font-weight: 400;\">Dan Abramov<\/span><\/a><span style=\"font-weight: 400;\"> showed us a new feature called Suspense, where you can manage asynchronous requests and more &#8211; if you didn&#8217;t watch the presentation, you can do it right now:<\/span><\/p>\n<p><!--more--><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/nLF0n9SACd4\" width=\"1280\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h1>The Concept<\/h1>\n<p><span style=\"font-weight: 400;\">Suspense is the experimental feature announced by <\/span><a href=\"https:\/\/twitter.com\/dan_abramov\"><span style=\"font-weight: 400;\">Dan Abramov<\/span><\/a><span style=\"font-weight: 400;\"> that helps us to manage asynchronous operations. It is able to defer rendering data respecting the CPU power and data fetch, allowing more scalability and performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Considering it, there is a new structure based on cache where you can store your data, and access it as well, using the cached data as resource. <\/span><\/p>\n<h1>How to use it<\/h1>\n<p><span style=\"font-weight: 400;\">To use this feature you only need to install the dependence:<\/span><\/p>\n<p><b>npm install simple-cache-provider<\/b><\/p>\n<p><span style=\"font-weight: 400;\">And call some important methods:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6064\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/Screen-Shot-2018-11-05-at-5.28.07-PM.png\" alt=\"\" width=\"778\" height=\"238\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/Screen-Shot-2018-11-05-at-5.28.07-PM.png 778w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/Screen-Shot-2018-11-05-at-5.28.07-PM-768x235.png 768w\" sizes=\"(max-width: 778px) 100vw, 778px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In this case, we need to create a storage (createCache) &#8211; to store your data, of course &#8211; and then to create a resource (createResource), like a service to do asynchronous operations. This way, the component will never be shown until your data is loaded. This is enough to define a structure that is able to manage data cached and fetches with a suspense possibility.<\/span><\/p>\n<h1>Live Code<\/h1>\n<p><span style=\"font-weight: 400;\">However I might have a more practical demo to present you:<\/span><\/p>\n<p><iframe loading=\"lazy\" style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" src=\"https:\/\/codesandbox.io\/embed\/8k4mpwyq79\" width=\"300\" height=\"150\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n<h1>What to do right now?<\/h1>\n<p><span style=\"font-weight: 400;\">I hope a big change with data organization in front-end. Today we have the Redux, a powerful solution to manage data, but with the simplicity of suspense and its cache provider it may promote Redux&#8217;s death.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I would consider this way because the first contact with it is easier than with Redux. Also because it is an alternative package that gives you good scalability and performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Maybe we are living a new era to architect data in front-end and this is the opportunity to recreate this pattern to another technologies component-based, like vue.js, angular and more.<\/span><\/p>\n<h1>One more thing\u2026<\/h1>\n<p><span style=\"font-weight: 400;\">Don&#8217;t forget this is an experimental feature, so don&#8217;t worry about using it in production environment yet.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And, of course have fun while using this tool. I hope you feel more productive and satisfied with the result. \ud83d\ude42<\/span><\/p>\n<h1>References<\/h1>\n<p><a href=\"https:\/\/www.freepik.com\/free-vector\/illustration-of-chemistry-laboratory-instruments-set_3099091.htm\">Designed by Rawpixel.com<\/a><\/p>\n<p><a href=\"https:\/\/reactjs.org\/\"><span style=\"font-weight: 400;\">https:\/\/reactjs.org\/<\/span><\/a><\/p>\n<p><a href=\"https:\/\/blog.logrocket.com\/async-rendering-in-react-with-suspense-5d0eaac886c8\"><span style=\"font-weight: 400;\">https:\/\/blog.logrocket.com\/async-rendering-in-react-with-suspense-5d0eaac886c8<\/span><\/a><\/p>\n<p><a href=\"https:\/\/medium.com\/@baphemot\/understanding-react-suspense-1c73b4b0b1e6\"><span style=\"font-weight: 400;\">https:\/\/medium.com\/@baphemot\/understanding-react-suspense-1c73b4b0b1e6<\/span><\/a><\/p>\n<p><a href=\"https:\/\/blog.pusher.com\/time-slice-suspense-api-react-17\/\"><span style=\"font-weight: 400;\">https:\/\/blog.pusher.com\/time-slice-suspense-api-react-17\/<\/span><\/a><\/p>\n<p><a href=\"https:\/\/medium.com\/@ryanflorence\/the-suspense-is-killing-redux-e888f9692430\"><span style=\"font-weight: 400;\">https:\/\/medium.com\/@ryanflorence\/the-suspense-is-killing-redux-e888f9692430<\/span><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=z-6JC0_cOns\"><span style=\"font-weight: 400;\">https:\/\/www.youtube.com\/watch?v=z-6JC0_cOns<\/span><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=nLF0n9SACd4\"><span style=\"font-weight: 400;\">https:\/\/www.youtube.com\/watch?v=nLF0n9SACd4<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article you will get to know what is React Suspense, how to use this feature and what to expect from the future of the SPA&#8217;s (Single-page application) from my point of view. In the last JsConf at Iceland, Dan Abramov showed us a new feature called Suspense, where you can manage asynchronous requests [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":6066,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[303,302],"class_list":["post-6062","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-frontend","tag-tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What\u2019s the new React Suspense?<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What\u2019s the new React Suspense?\" \/>\n<meta property=\"og:description\" content=\"In this article you will get to know what is React Suspense, how to use this feature and what to expect from the future of the SPA&#8217;s (Single-page application) from my point of view. In the last JsConf at Iceland, Dan Abramov showed us a new feature called Suspense, where you can manage asynchronous requests [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-05T19:49:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:23:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\"},\"author\":{\"name\":\"Rurik Pinheiro\"},\"headline\":\"What\u2019s the new React Suspense?\",\"datePublished\":\"2018-11-05T19:49:21+00:00\",\"dateModified\":\"2022-07-01T17:23:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\"},\"wordCount\":443,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png\",\"keywords\":[\"Front-end\",\"ReactJS\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\",\"name\":\"What\u2019s the new React Suspense?\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png\",\"datePublished\":\"2018-11-05T19:49:21+00:00\",\"dateModified\":\"2022-07-01T17:23:09+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Rurik Pinheiro\"},\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png\",\"width\":2000,\"height\":720,\"caption\":\"react logo with chemistry lab behind\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s the new React Suspense?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Rurik Pinheiro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"Rurik Pinheiro\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/rurik-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What\u2019s the new React Suspense?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/","og_locale":"en_US","og_type":"article","og_title":"What\u2019s the new React Suspense?","og_description":"In this article you will get to know what is React Suspense, how to use this feature and what to expect from the future of the SPA&#8217;s (Single-page application) from my point of view. In the last JsConf at Iceland, Dan Abramov showed us a new feature called Suspense, where you can manage asynchronous requests [&hellip;]","og_url":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2018-11-05T19:49:21+00:00","article_modified_time":"2022-07-01T17:23:09+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/"},"author":{"name":"Rurik Pinheiro"},"headline":"What\u2019s the new React Suspense?","datePublished":"2018-11-05T19:49:21+00:00","dateModified":"2022-07-01T17:23:09+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/"},"wordCount":443,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png","keywords":["Front-end","ReactJS"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/","url":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/","name":"What\u2019s the new React Suspense?","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png","datePublished":"2018-11-05T19:49:21+00:00","dateModified":"2022-07-01T17:23:09+00:00","author":{"@type":"person","name":"Rurik Pinheiro"},"breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2018\/11\/capa.rurik_.png","width":2000,"height":720,"caption":"react logo with chemistry lab behind"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/whats-new-react-suspense\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What\u2019s the new React Suspense?"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Rurik Pinheiro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"Rurik Pinheiro"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/rurik-2\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6062"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6062\/revisions"}],"predecessor-version":[{"id":10233,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6062\/revisions\/10233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6066"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}