{"id":2569,"date":"2023-10-25T17:13:12","date_gmt":"2023-10-25T20:13:12","guid":{"rendered":"https:\/\/blog.innovaconnect.com.br\/?p=2569"},"modified":"2023-10-25T17:33:02","modified_gmt":"2023-10-25T20:33:02","slug":"react-hook-swr","status":"publish","type":"post","link":"https:\/\/innspire.dev\/blog\/react-hook-swr\/","title":{"rendered":"React Hook SWR"},"content":{"rendered":"\n<p>Normalmente costumamos consumir conte\u00fados de API\u2019s utilizando a API padr\u00e3o do Fetch ou Axios. Por\u00e9m, quando precisamos falar sobre pagina\u00e7\u00e3o e cache de dados, surgem novas tecnologias que podem nos ajudar nessas tarefas. Um exemplo muito utilizado atualmente \u00e9 o React Query, que al\u00e9m de j\u00e1 possuir uma boa ades\u00e3o da comunidade, tamb\u00e9m \u00e9 utilizado em diversos projetos.<\/p>\n\n\n\n<p>No entanto, essa lib apresenta alguns empecilhos \u2014 principalmente relacionados a cache e configura\u00e7\u00f5es \u2014 que fazem com que diversos usu\u00e1rios acabem optando por outros meios\/bibliotecas. Buscando lidar com esses problemas surge uma nova tecnologia chamada React Hook SWR.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 o React SWR?<\/h2>\n\n\n\n<p>Primeiramente, devemos deixar bem claro que o SWR n\u00e3o substitui Fetch, Axios ou GraphQL, ele \u00e9 apenas um wrapper que trar\u00e1 funcionalidades ao nosso software de maneira mais otimizada e din\u00e2mica.<\/p>\n\n\n\n<p>SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d. Como o nome j\u00e1 diz, o SWR vai buscar os dados que j\u00e1 foram buscados anteriormente (cache) e vai estar sempre atento para buscar novos, caso existam. Isso n\u00e3o s\u00f3 melhora a experi\u00eancia para o usu\u00e1rio, por possuir sempre dados bem atualizados em sua interface, como tamb\u00e9m torna a aplica\u00e7\u00e3o muito mais din\u00e2mica, j\u00e1 que acaba n\u00e3o sendo necess\u00e1rio o uso de page refreshes ou manipula\u00e7\u00f5es desnecess\u00e1rias.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como o SWR mant\u00e9m as informa\u00e7\u00f5es sempre atualizadas?<\/h2>\n\n\n\n<p>Para que isso aconte\u00e7a, o hook vai fazer chamadas a API para manter os dados sempre presentes e tudo de forma autom\u00e1tica \u2014 por\u00e9m pode ser configurado para que esse comportamento n\u00e3o aconte\u00e7a \u2014 tornando a experi\u00eancia muito melhor tamb\u00e9m para o programador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que o SWR entrega:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Um r\u00e1pido, leve e reus\u00e1vel data fetching;<\/li>\n\n\n\n<li>Cache integrado e evita redund\u00e2ncia de requisi\u00e7\u00e3o;<\/li>\n\n\n\n<li>Experi\u00eancia Real-time;<\/li>\n\n\n\n<li>Suporte ao TypeScript;<\/li>\n\n\n\n<li>Possibilidade de ser utilizado no React Native;<\/li>\n\n\n\n<li>Navega\u00e7\u00e3o r\u00e1pida entre p\u00e1ginas;<\/li>\n\n\n\n<li>Revalida\u00e7\u00e3o dos dados quando a tela recebe foco (revalidate-on-focus);<\/li>\n\n\n\n<li>Revalida\u00e7\u00e3o de dados quando se reconecta \u00e0 Internet;<\/li>\n\n\n\n<li>Muta\u00e7\u00e3o de dados locais com (Optimistic UI);<\/li>\n\n\n\n<li>React Suspense;<\/li>\n\n\n\n<li>API agn\u00f3stica, pode ser utilizado com REST ou GraphQL;<\/li>\n\n\n\n<li>Back end agn\u00f3stico, n\u00e3o importa em qual linguagem foi implementado.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Na pr\u00e1tica<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"408\" src=\"https:\/\/blog.innspire.dev\/wp-content\/uploads\/2023\/10\/instalar-swr-projeto-500x408.webp\" alt=\"\" class=\"wp-image-2570\" style=\"width:400px\" srcset=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/instalar-swr-projeto-500x408.webp 500w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/instalar-swr-projeto.webp 502w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p>Primeiramente precisamos instalar o SWR em nosso projeto. Ap\u00f3s isso, criamos um hook customizado chamado useFetch, \u00e9 com ele que vamos integrar com o hook do SWR e fazer a m\u00e1gica acontecer.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><img decoding=\"async\" width=\"500\" height=\"406\" src=\"https:\/\/blog.innspire.dev\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-500x406.webp\" alt=\"\" class=\"wp-image-2572\" style=\"width:600px\" srcset=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-500x406.webp 500w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-1261x1024.webp 1261w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-768x624.webp 768w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-1170x950.webp 1170w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr-585x475.webp 585w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/integrar-hook-swr.webp 1362w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p><em>No exemplo acima, estamos usando Axios mas voc\u00ea pode optar por fetch, por exemplo.<\/em><\/p>\n\n\n\n<p>Como podemos ver no c\u00f3digo, teremos sempre o retorno de <strong>data<\/strong> e <strong>error<\/strong>, que ser\u00e3o os dados utilizados para exibirmos as informa\u00e7\u00f5es na tela ou exibir algum problema que possa vir acontecer durante as chamadas.<\/p>\n\n\n\n<p>Ap\u00f3s isso, basta chamarmos nosso <em>custom hook<\/em> em nosso componente e aproveitar todo o benef\u00edcio de c\u00f3digo limpo + performance que o SWR nos proporciona.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><img decoding=\"async\" width=\"500\" height=\"417\" src=\"https:\/\/blog.innspire.dev\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-500x417.webp\" alt=\"\" class=\"wp-image-2573\" style=\"aspect-ratio:1.1990407673860912;object-fit:cover;width:600px\" srcset=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-500x417.webp 500w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-1227x1024.webp 1227w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-768x641.webp 768w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-1170x977.webp 1170w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr-585x488.webp 585w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/codigo-limpo-performance-swr.webp 1294w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p>Note que o c\u00f3digo fica muito mais simples do que no exemplo abaixo, que n\u00e3o usa SWR e depende de useEffect para fazer a chamada.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"474\" src=\"https:\/\/blog.innspire.dev\/wp-content\/uploads\/2023\/10\/use-effect-500x474.webp\" alt=\"\" class=\"wp-image-2574\" style=\"aspect-ratio:1.0548523206751055;object-fit:cover;width:600px\" srcset=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect-500x474.webp 500w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect-1079x1024.webp 1079w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect-768x729.webp 768w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect-1170x1110.webp 1170w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect-585x555.webp 585w, https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/use-effect.webp 1294w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Mutate<\/h2>\n\n\n\n<p>Normalmente, quando criamos um novo dado em interface, temos que esperar uma resposta da API para que seja feita a atualiza\u00e7\u00e3o na interface. Com o SWR, isso se torna praticamente instant\u00e2neo e tudo gra\u00e7as ao <strong>mutate<\/strong>. Essa fun\u00e7\u00e3o do hook d\u00e1 aquela sensa\u00e7\u00e3o como se o sistema fosse muito r\u00e1pido e todas as coisas se comunicam em tempo real mas, na verdade, o que estamos fazendo \u00e9 \u201cenganar\u201d o usu\u00e1rio, exibindo uma informa\u00e7\u00e3o que ainda est\u00e1 no front-end e que na maioria das vezes ainda est\u00e1 sendo processada na API.<\/p>\n\n\n\n<p>Para n\u00e3o nos estendermos muito no artigo de hoje, n\u00e3o iremos mostrar como isso funciona na pr\u00e1tica, mas deixaremos um link para a documenta\u00e7\u00e3o no final do artigo, assim voc\u00ea consegue ver exemplos sobre e se aprofundar mais tamb\u00e9m.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Para o usu\u00e1rio, o React SWR torna a aplica\u00e7\u00e3o muito mais r\u00e1pida e din\u00e2mica, tornando a experi\u00eancia muito mais agrad\u00e1vel que o normal. O impacto real ser\u00e1 para o programador, que vai conseguir contar com um c\u00f3digo mais limpo, simples e eficiente em diversos aspectos que outras bibliotecas n\u00e3o conseguem entregar muito bem, al\u00e9m de possuir v\u00e1rias configura\u00e7\u00f5es que auxiliam o profissional a atender o padr\u00e3o que busca para seu software.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Documenta\u00e7\u00e3o do React Hook SWR<\/h3>\n\n\n\n<p><a href=\"https:\/\/swr.vercel.app\/pt-BR\/docs\/getting-started\">https:\/\/swr.vercel.app\/pt-BR\/docs\/getting-started<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Refer\u00eancias<\/h3>\n\n\n\n<p><a href=\"https:\/\/blog.rocketseat.com.br\/react-hook-swr-melhor-ux-no-consumo-de-api-no-front-end-react\/\">https:\/\/blog.rocketseat.com.br\/react-hook-swr-melhor-ux-no-consumo-de-api-no-front-end-react\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/swr.vercel.app\/pt-BR\">https:\/\/swr.vercel.app\/pt-BR<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2020\/06\/introduction-swr-react-hooks-remote-data-fetching\/\">https:\/\/www.smashingmagazine.com\/2020\/06\/introduction-swr-react-hooks-remote-data-fetching\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Normalmente costumamos consumir conte\u00fados de API\u2019s utilizando a API padr\u00e3o do Fetch ou Axios. <\/p>\n","protected":false},"author":5,"featured_media":2575,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[6],"tags":[34,25,36,45,46,37],"class_list":["post-2569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-coding","tag-desenvolvimento","tag-desenvolvimento-de-sistemas","tag-react","tag-react-hook-swr","tag-softwares"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Hook SWR<\/title>\n<meta name=\"description\" content=\"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/innspire.dev\/blog\/react-hook-swr\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Hook SWR\" \/>\n<meta property=\"og:description\" content=\"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d\" \/>\n<meta property=\"og:url\" content=\"https:\/\/innspire.dev\/blog\/react-hook-swr\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog InnSpire\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-25T20:13:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T20:33:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1360\" \/>\n\t<meta property=\"og:image:height\" content=\"841\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"InnSpire Author\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnSpire Author\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/\"},\"author\":{\"name\":\"InnSpire Author\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/person\\\/571e55b97748333a75eefb26285461d0\"},\"headline\":\"React Hook SWR\",\"datePublished\":\"2023-10-25T20:13:12+00:00\",\"dateModified\":\"2023-10-25T20:33:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/\"},\"wordCount\":787,\"publisher\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/react-hook-swr.webp\",\"keywords\":[\"coding\",\"desenvolvimento\",\"desenvolvimento de sistemas\",\"React\",\"React Hook SWR\",\"softwares\"],\"articleSection\":[\"Desenvolvimento\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/\",\"name\":\"React Hook SWR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/react-hook-swr.webp\",\"datePublished\":\"2023-10-25T20:13:12+00:00\",\"dateModified\":\"2023-10-25T20:33:02+00:00\",\"description\":\"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/react-hook-swr.webp\",\"contentUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/react-hook-swr.webp\",\"width\":1360,\"height\":841},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/react-hook-swr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Hook SWR\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\",\"name\":\"Blog InnSpire\",\"description\":\"Blog sobre inova\u00e7\u00e3o e tecnologia na \u00e1rea de desenvolvimento.\",\"publisher\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\",\"name\":\"Blog InnSpire\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/logotipo-blog-innspire.png\",\"contentUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/logotipo-blog-innspire.png\",\"width\":367,\"height\":73,\"caption\":\"Blog InnSpire\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/innovaconnect\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/innovaconnect\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/person\\\/571e55b97748333a75eefb26285461d0\",\"name\":\"InnSpire Author\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"caption\":\"InnSpire Author\"},\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/author\\\/dev\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Hook SWR","description":"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d","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:\/\/innspire.dev\/blog\/react-hook-swr\/","og_locale":"pt_BR","og_type":"article","og_title":"React Hook SWR","og_description":"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d","og_url":"https:\/\/innspire.dev\/blog\/react-hook-swr\/","og_site_name":"Blog InnSpire","article_published_time":"2023-10-25T20:13:12+00:00","article_modified_time":"2023-10-25T20:33:02+00:00","og_image":[{"width":1360,"height":841,"url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp","type":"image\/webp"}],"author":"InnSpire Author","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"InnSpire Author","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#article","isPartOf":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/"},"author":{"name":"InnSpire Author","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/person\/571e55b97748333a75eefb26285461d0"},"headline":"React Hook SWR","datePublished":"2023-10-25T20:13:12+00:00","dateModified":"2023-10-25T20:33:02+00:00","mainEntityOfPage":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/"},"wordCount":787,"publisher":{"@id":"https:\/\/innspire.dev\/blog\/#organization"},"image":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#primaryimage"},"thumbnailUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp","keywords":["coding","desenvolvimento","desenvolvimento de sistemas","React","React Hook SWR","softwares"],"articleSection":["Desenvolvimento"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/","url":"https:\/\/innspire.dev\/blog\/react-hook-swr\/","name":"React Hook SWR","isPartOf":{"@id":"https:\/\/innspire.dev\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#primaryimage"},"image":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#primaryimage"},"thumbnailUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp","datePublished":"2023-10-25T20:13:12+00:00","dateModified":"2023-10-25T20:33:02+00:00","description":"SWR significa Stale-While-Revalidate que, traduzindo para o portugu\u00eas, significa algo como \u201cTraga enquanto revalida\u201d","breadcrumb":{"@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/innspire.dev\/blog\/react-hook-swr\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#primaryimage","url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp","contentUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/react-hook-swr.webp","width":1360,"height":841},{"@type":"BreadcrumbList","@id":"https:\/\/innspire.dev\/blog\/react-hook-swr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/innspire.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"React Hook SWR"}]},{"@type":"WebSite","@id":"https:\/\/innspire.dev\/blog\/#website","url":"https:\/\/innspire.dev\/blog\/","name":"Blog InnSpire","description":"Blog sobre inova\u00e7\u00e3o e tecnologia na \u00e1rea de desenvolvimento.","publisher":{"@id":"https:\/\/innspire.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/innspire.dev\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/innspire.dev\/blog\/#organization","name":"Blog InnSpire","url":"https:\/\/innspire.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/logotipo-blog-innspire.png","contentUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/logotipo-blog-innspire.png","width":367,"height":73,"caption":"Blog InnSpire"},"image":{"@id":"https:\/\/innspire.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/innovaconnect\/","https:\/\/www.linkedin.com\/company\/innovaconnect\/"]},{"@type":"Person","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/person\/571e55b97748333a75eefb26285461d0","name":"InnSpire Author","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","caption":"InnSpire Author"},"url":"https:\/\/innspire.dev\/blog\/author\/dev\/"}]}},"_links":{"self":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts\/2569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/comments?post=2569"}],"version-history":[{"count":0,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts\/2569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/media\/2575"}],"wp:attachment":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/media?parent=2569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/categories?post=2569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/tags?post=2569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}