[{"data":1,"prerenderedAt":2395},["ShallowReactive",2],{"pt-BR-article-\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens":3,"pt-BR-related-posts-\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens":2235},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":2218,"description":2219,"enAlternateSlug":7,"extension":2220,"meta":2221,"navigation":164,"path":2222,"ptBrAlternateSlug":7,"publishedAt":2223,"seo":2224,"sitemap":2225,"stem":2232,"updatedAt":2231,"wordCount":2233,"__hash__":2234},"blog\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.md","Scroll Infinito no React-Native: Guia Prático","\u002Fimages\u002Fblog\u002Freact-native\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.webp",null,720,1280,"eduardo-goncalves-souza",{"type":12,"value":13,"toc":2206},"minimark",[14,18,23,26,30,33,49,57,62,65,309,313,320,1067,1070,1077,1081,1089,1096,1149,1156,1397,1406,1413,1753,1756,1760,1764,1770,1784,1896,1917,1920,1924,1927,1958,1969,2110,2113,2117,2121,2124,2128,2199,2202],[15,16,17],"p",{},"Você já se perguntou como alguns aplicativos que usamos frequentemente no nosso dia a dia conseguem carregar conteúdo sem fim no seu “feed”? Esse recurso se chama “Scroll Infinito”, esse recurso é muito comum em aplicativos mobiles, esse recurso consiste em carregar novos dados conforme o usuário desce\u002Frola a tela para baixo.",[19,20,22],"h2",{"id":21},"o-que-é-scroll-infinito","O que é Scroll Infinito?",[15,24,25],{},"O scroll infinito é uma técnica normalmente usada para o design de interface do usuário que carrega mais conteúdo automaticamente à medida que o usuário rola para o final do feed. Em vez de colocar o conteúdo em páginas ou forçar o usuário a clicar em um botão \"Carregar mais\" ou “Mostrar mais”, o scroll infinito cria uma experiência fluida, contínua e até intuitiva.",[19,27,29],{"id":28},"implementando-scroll-infinito","Implementando Scroll Infinito",[15,31,32],{},"Vamos criar um exemplo prático!",[15,34,35,36,43,44,48],{},"Utilizaremos o “React-Native” com “TypeScript” e a “API do Github” (",[37,38,42],"a",{"href":39,"rel":40},"https:\u002F\u002Fapi.github.com\u002F",[41],"nofollow","https:\u002F\u002Fapi.github.com","), vamos buscar tópicos com a palavra ",[45,46,47],"code",{},"React",", com 15 itens por página, e começar na página 1, a URL modificada vai ficar assim:",[50,51,53],"h4",{"id":52},"httpsapigithubcomsearchtopicsqreactper_page15page1",[37,54,55],{"href":55,"rel":56},"https:\u002F\u002Fapi.github.com\u002Fsearch\u002Ftopics?q=react&per_page=15&page=1",[41],[58,59,61],"h3",{"id":60},"passo-1-configuração-inicial","Passo 1: Configuração Inicial",[15,63,64],{},"Primeiro, vamos configurar nossos componentes, states e tipos:",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-typescript shiki shiki-themes dracula","import { useState, useEffect } from \"react\";\nimport {\n  View,\n  Text,\n  FlatList,\n  StyleSheet,\n  ActivityIndicator\n} from \"react-native\";\n\ntype Topic = {\n  name: string;\n  short_description: string;\n};\n\nexport default function App() {\n  const [data, setData] = useState\u003CTopic[]>([]);\n  const [page, setPage] = useState(1);\n  const [loading, setLoading] = useState(false);\n}\n","typescript","",[45,73,74,104,112,118,124,130,136,142,159,166,181,195,207,213,218,237,262,284,303],{"__ignoreMap":71},[75,76,79,83,87,90,94,98,101],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"s0Tla","import",[75,84,86],{"class":85},"sCdxs"," { useState, useEffect } ",[75,88,89],{"class":81},"from",[75,91,93],{"class":92},"seVfx"," \"",[75,95,97],{"class":96},"s-mGx","react",[75,99,100],{"class":92},"\"",[75,102,103],{"class":85},";\n",[75,105,107,109],{"class":77,"line":106},2,[75,108,82],{"class":81},[75,110,111],{"class":85}," {\n",[75,113,115],{"class":77,"line":114},3,[75,116,117],{"class":85},"  View,\n",[75,119,121],{"class":77,"line":120},4,[75,122,123],{"class":85},"  Text,\n",[75,125,127],{"class":77,"line":126},5,[75,128,129],{"class":85},"  FlatList,\n",[75,131,133],{"class":77,"line":132},6,[75,134,135],{"class":85},"  StyleSheet,\n",[75,137,139],{"class":77,"line":138},7,[75,140,141],{"class":85},"  ActivityIndicator\n",[75,143,145,148,150,152,155,157],{"class":77,"line":144},8,[75,146,147],{"class":85},"} ",[75,149,89],{"class":81},[75,151,93],{"class":92},[75,153,154],{"class":96},"react-native",[75,156,100],{"class":92},[75,158,103],{"class":85},[75,160,162],{"class":77,"line":161},9,[75,163,165],{"emptyLinePlaceholder":164},true,"\n",[75,167,169,172,176,179],{"class":77,"line":168},10,[75,170,171],{"class":81},"type",[75,173,175],{"class":174},"sCp4m"," Topic",[75,177,178],{"class":81}," =",[75,180,111],{"class":85},[75,182,184,187,190,193],{"class":77,"line":183},11,[75,185,186],{"class":85},"  name",[75,188,189],{"class":81},":",[75,191,192],{"class":174}," string",[75,194,103],{"class":85},[75,196,198,201,203,205],{"class":77,"line":197},12,[75,199,200],{"class":85},"  short_description",[75,202,189],{"class":81},[75,204,192],{"class":174},[75,206,103],{"class":85},[75,208,210],{"class":77,"line":209},13,[75,211,212],{"class":85},"};\n",[75,214,216],{"class":77,"line":215},14,[75,217,165],{"emptyLinePlaceholder":164},[75,219,221,224,227,230,234],{"class":77,"line":220},15,[75,222,223],{"class":81},"export",[75,225,226],{"class":81}," default",[75,228,229],{"class":81}," function",[75,231,233],{"class":232},"sAOxA"," App",[75,235,236],{"class":85},"() {\n",[75,238,240,243,246,249,252,255,259],{"class":77,"line":239},16,[75,241,242],{"class":81},"  const",[75,244,245],{"class":85}," [data, setData] ",[75,247,248],{"class":81},"=",[75,250,251],{"class":232}," useState",[75,253,254],{"class":85},"\u003C",[75,256,258],{"class":257},"sGEwX","Topic",[75,260,261],{"class":85},"[]>([]);\n",[75,263,265,267,270,272,274,277,281],{"class":77,"line":264},17,[75,266,242],{"class":81},[75,268,269],{"class":85}," [page, setPage] ",[75,271,248],{"class":81},[75,273,251],{"class":232},[75,275,276],{"class":85},"(",[75,278,280],{"class":279},"sIQBb","1",[75,282,283],{"class":85},");\n",[75,285,287,289,292,294,296,298,301],{"class":77,"line":286},18,[75,288,242],{"class":81},[75,290,291],{"class":85}," [loading, setLoading] ",[75,293,248],{"class":81},[75,295,251],{"class":232},[75,297,276],{"class":85},[75,299,300],{"class":279},"false",[75,302,283],{"class":85},[75,304,306],{"class":77,"line":305},19,[75,307,308],{"class":85},"}\n",[58,310,312],{"id":311},"passo-2-renderizando-dados-temporários","Passo 2: Renderizando dados temporários.",[15,314,315,316,319],{},"Agora vamos fazer a renderização dos elementos com a ",[45,317,318],{},"FlatList",", adicionar alguns dados temporários para dar uma olhada no que temos até o momento:",[66,321,323],{"className":68,"code":322,"language":70,"meta":71,"style":71}," \u002F\u002F ... (Código anterior)\n\nexport default function App() {\n  const [data, setData] = useState\u003CTopic[]>([\n    {\n      name: \"react\",\n      short_description:\n        \"A declarative, efficient, and flexible JavaScript library for building user interfaces.\",\n    },\n    {\n      name: \"redux\",\n      short_description: \"A Predictable State Container for JS Apps.\",\n    },\n    {\n      name: \"typescript\",\n      short_description:\n        \"A typed superset of JavaScript that compiles to plain JavaScript.\",\n    },\n    {\n      name: \"jest\",\n      short_description:\n        \"A delightful JavaScript Testing Framework with a focus on simplicity.\",\n    },\n    {\n      name: \"webpack\",\n      short_description:\n        \"A static module bundler for modern JavaScript applications.\",\n    },\n  ]);\n\n  const [page, setPage] = useState(1);\n  const [loading, setLoading] = useState(false);\n\n  const renderItem = ({ item }: { item: Topic }) => (\n    \u003CView style={styles.listItem}>\n      \u003CText style={styles.topicName}>{item.name}\u003C\u002FText>\n      \u003CText style={styles.topicDescription}>{item.short_description}\u003C\u002FText>\n    \u003C\u002FView>\n  );\n\n  return (\n    \u003CFlatList\n      contentContainerStyle={{ marginTop: 30, marginHorizontal: 20 }}\n      data={data}\n      renderItem={renderItem}\n      keyExtractor={(item) => item.name}\n    \u002F>\n  );\n\nconst styles = StyleSheet.create({\n  list: {\n    paddingHorizontal: 20,\n  },\n  listItem: {\n    backgroundColor: \"#f0f0f0\",\n    marginTop: 20,\n    padding: 20,\n    borderRadius: 10,\n  },\n  topicName: {\n    fontSize: 18,\n    fontWeight: \"bold\",\n    marginBottom: 5,\n  },\n  topicDescription: {\n    fontSize: 14,\n    color: \"#666\",\n  },\n});\n",[45,324,325,331,335,347,364,369,385,393,405,410,414,429,444,448,452,466,472,483,487,491,507,514,526,531,536,552,559,571,576,582,587,604,621,626,663,680,708,731,742,748,753,761,769,792,803,814,825,831,836,841,861,871,884,890,900,917,929,941,954,959,969,982,999,1012,1017,1027,1039,1056,1061],{"__ignoreMap":71},[75,326,327],{"class":77,"line":78},[75,328,330],{"class":329},"shSDL"," \u002F\u002F ... (Código anterior)\n",[75,332,333],{"class":77,"line":106},[75,334,165],{"emptyLinePlaceholder":164},[75,336,337,339,341,343,345],{"class":77,"line":114},[75,338,223],{"class":81},[75,340,226],{"class":81},[75,342,229],{"class":81},[75,344,233],{"class":232},[75,346,236],{"class":85},[75,348,349,351,353,355,357,359,361],{"class":77,"line":120},[75,350,242],{"class":81},[75,352,245],{"class":85},[75,354,248],{"class":81},[75,356,251],{"class":232},[75,358,254],{"class":85},[75,360,258],{"class":257},[75,362,363],{"class":85},"[]>([\n",[75,365,366],{"class":77,"line":126},[75,367,368],{"class":85},"    {\n",[75,370,371,374,376,378,380,382],{"class":77,"line":132},[75,372,373],{"class":85},"      name",[75,375,189],{"class":81},[75,377,93],{"class":92},[75,379,97],{"class":96},[75,381,100],{"class":92},[75,383,384],{"class":85},",\n",[75,386,387,390],{"class":77,"line":138},[75,388,389],{"class":85},"      short_description",[75,391,392],{"class":81},":\n",[75,394,395,398,401,403],{"class":77,"line":144},[75,396,397],{"class":92},"        \"",[75,399,400],{"class":96},"A declarative, efficient, and flexible JavaScript library for building user interfaces.",[75,402,100],{"class":92},[75,404,384],{"class":85},[75,406,407],{"class":77,"line":161},[75,408,409],{"class":85},"    },\n",[75,411,412],{"class":77,"line":168},[75,413,368],{"class":85},[75,415,416,418,420,422,425,427],{"class":77,"line":183},[75,417,373],{"class":85},[75,419,189],{"class":81},[75,421,93],{"class":92},[75,423,424],{"class":96},"redux",[75,426,100],{"class":92},[75,428,384],{"class":85},[75,430,431,433,435,437,440,442],{"class":77,"line":197},[75,432,389],{"class":85},[75,434,189],{"class":81},[75,436,93],{"class":92},[75,438,439],{"class":96},"A Predictable State Container for JS Apps.",[75,441,100],{"class":92},[75,443,384],{"class":85},[75,445,446],{"class":77,"line":209},[75,447,409],{"class":85},[75,449,450],{"class":77,"line":215},[75,451,368],{"class":85},[75,453,454,456,458,460,462,464],{"class":77,"line":220},[75,455,373],{"class":85},[75,457,189],{"class":81},[75,459,93],{"class":92},[75,461,70],{"class":96},[75,463,100],{"class":92},[75,465,384],{"class":85},[75,467,468,470],{"class":77,"line":239},[75,469,389],{"class":85},[75,471,392],{"class":81},[75,473,474,476,479,481],{"class":77,"line":264},[75,475,397],{"class":92},[75,477,478],{"class":96},"A typed superset of JavaScript that compiles to plain JavaScript.",[75,480,100],{"class":92},[75,482,384],{"class":85},[75,484,485],{"class":77,"line":286},[75,486,409],{"class":85},[75,488,489],{"class":77,"line":305},[75,490,368],{"class":85},[75,492,494,496,498,500,503,505],{"class":77,"line":493},20,[75,495,373],{"class":85},[75,497,189],{"class":81},[75,499,93],{"class":92},[75,501,502],{"class":96},"jest",[75,504,100],{"class":92},[75,506,384],{"class":85},[75,508,510,512],{"class":77,"line":509},21,[75,511,389],{"class":85},[75,513,392],{"class":81},[75,515,517,519,522,524],{"class":77,"line":516},22,[75,518,397],{"class":92},[75,520,521],{"class":96},"A delightful JavaScript Testing Framework with a focus on simplicity.",[75,523,100],{"class":92},[75,525,384],{"class":85},[75,527,529],{"class":77,"line":528},23,[75,530,409],{"class":85},[75,532,534],{"class":77,"line":533},24,[75,535,368],{"class":85},[75,537,539,541,543,545,548,550],{"class":77,"line":538},25,[75,540,373],{"class":85},[75,542,189],{"class":81},[75,544,93],{"class":92},[75,546,547],{"class":96},"webpack",[75,549,100],{"class":92},[75,551,384],{"class":85},[75,553,555,557],{"class":77,"line":554},26,[75,556,389],{"class":85},[75,558,392],{"class":81},[75,560,562,564,567,569],{"class":77,"line":561},27,[75,563,397],{"class":92},[75,565,566],{"class":96},"A static module bundler for modern JavaScript applications.",[75,568,100],{"class":92},[75,570,384],{"class":85},[75,572,574],{"class":77,"line":573},28,[75,575,409],{"class":85},[75,577,579],{"class":77,"line":578},29,[75,580,581],{"class":85},"  ]);\n",[75,583,585],{"class":77,"line":584},30,[75,586,165],{"emptyLinePlaceholder":164},[75,588,590,592,594,596,598,600,602],{"class":77,"line":589},31,[75,591,242],{"class":81},[75,593,269],{"class":85},[75,595,248],{"class":81},[75,597,251],{"class":232},[75,599,276],{"class":85},[75,601,280],{"class":279},[75,603,283],{"class":85},[75,605,607,609,611,613,615,617,619],{"class":77,"line":606},32,[75,608,242],{"class":81},[75,610,291],{"class":85},[75,612,248],{"class":81},[75,614,251],{"class":232},[75,616,276],{"class":85},[75,618,300],{"class":279},[75,620,283],{"class":85},[75,622,624],{"class":77,"line":623},33,[75,625,165],{"emptyLinePlaceholder":164},[75,627,629,631,634,636,639,642,645,647,650,652,654,657,660],{"class":77,"line":628},34,[75,630,242],{"class":81},[75,632,633],{"class":232}," renderItem",[75,635,178],{"class":81},[75,637,638],{"class":85}," ({ ",[75,640,641],{"class":257},"item",[75,643,644],{"class":85}," }",[75,646,189],{"class":81},[75,648,649],{"class":85}," { item",[75,651,189],{"class":81},[75,653,175],{"class":174},[75,655,656],{"class":85}," }) ",[75,658,659],{"class":81},"=>",[75,661,662],{"class":85}," (\n",[75,664,666,669,672,674,677],{"class":77,"line":665},35,[75,667,668],{"class":81},"    \u003C",[75,670,671],{"class":85},"View style",[75,673,248],{"class":81},[75,675,676],{"class":85},"{styles.listItem}",[75,678,679],{"class":81},">\n",[75,681,683,686,689,691,694,697,700,703,706],{"class":77,"line":682},36,[75,684,685],{"class":81},"      \u003C",[75,687,688],{"class":85},"Text style",[75,690,248],{"class":81},[75,692,693],{"class":85},"{styles.topicName}",[75,695,696],{"class":81},">",[75,698,699],{"class":85},"{item.name}",[75,701,702],{"class":81},"\u003C\u002F",[75,704,705],{"class":85},"Text",[75,707,679],{"class":81},[75,709,711,713,715,717,720,722,725,727,729],{"class":77,"line":710},37,[75,712,685],{"class":81},[75,714,688],{"class":85},[75,716,248],{"class":81},[75,718,719],{"class":85},"{styles.topicDescription}",[75,721,696],{"class":81},[75,723,724],{"class":85},"{item.short_description}",[75,726,702],{"class":81},[75,728,705],{"class":85},[75,730,679],{"class":81},[75,732,734,737,740],{"class":77,"line":733},38,[75,735,736],{"class":81},"    \u003C\u002F",[75,738,739],{"class":85},"View",[75,741,679],{"class":81},[75,743,745],{"class":77,"line":744},39,[75,746,747],{"class":85},"  );\n",[75,749,751],{"class":77,"line":750},40,[75,752,165],{"emptyLinePlaceholder":164},[75,754,756,759],{"class":77,"line":755},41,[75,757,758],{"class":81},"  return",[75,760,662],{"class":85},[75,762,764,766],{"class":77,"line":763},42,[75,765,668],{"class":81},[75,767,768],{"class":257},"FlatList\n",[75,770,772,775,777,780,783,786,789],{"class":77,"line":771},43,[75,773,774],{"class":85},"      contentContainerStyle",[75,776,248],{"class":81},[75,778,779],{"class":85},"{{ marginTop: ",[75,781,782],{"class":279},"30",[75,784,785],{"class":85},", marginHorizontal: ",[75,787,788],{"class":279},"20",[75,790,791],{"class":85}," }}\n",[75,793,795,798,800],{"class":77,"line":794},44,[75,796,797],{"class":85},"      data",[75,799,248],{"class":81},[75,801,802],{"class":85},"{data}\n",[75,804,806,809,811],{"class":77,"line":805},45,[75,807,808],{"class":85},"      renderItem",[75,810,248],{"class":81},[75,812,813],{"class":85},"{renderItem}\n",[75,815,817,820,822],{"class":77,"line":816},46,[75,818,819],{"class":85},"      keyExtractor",[75,821,248],{"class":81},[75,823,824],{"class":85},"{(item) => item.name}\n",[75,826,828],{"class":77,"line":827},47,[75,829,830],{"class":81},"    \u002F>\n",[75,832,834],{"class":77,"line":833},48,[75,835,747],{"class":85},[75,837,839],{"class":77,"line":838},49,[75,840,165],{"emptyLinePlaceholder":164},[75,842,844,847,850,852,855,858],{"class":77,"line":843},50,[75,845,846],{"class":81},"const",[75,848,849],{"class":85}," styles ",[75,851,248],{"class":81},[75,853,854],{"class":85}," StyleSheet.",[75,856,857],{"class":232},"create",[75,859,860],{"class":85},"({\n",[75,862,864,867,869],{"class":77,"line":863},51,[75,865,866],{"class":85},"  list",[75,868,189],{"class":81},[75,870,111],{"class":85},[75,872,874,877,879,882],{"class":77,"line":873},52,[75,875,876],{"class":85},"    paddingHorizontal",[75,878,189],{"class":81},[75,880,881],{"class":279}," 20",[75,883,384],{"class":85},[75,885,887],{"class":77,"line":886},53,[75,888,889],{"class":85},"  },\n",[75,891,893,896,898],{"class":77,"line":892},54,[75,894,895],{"class":85},"  listItem",[75,897,189],{"class":81},[75,899,111],{"class":85},[75,901,903,906,908,910,913,915],{"class":77,"line":902},55,[75,904,905],{"class":85},"    backgroundColor",[75,907,189],{"class":81},[75,909,93],{"class":92},[75,911,912],{"class":96},"#f0f0f0",[75,914,100],{"class":92},[75,916,384],{"class":85},[75,918,920,923,925,927],{"class":77,"line":919},56,[75,921,922],{"class":85},"    marginTop",[75,924,189],{"class":81},[75,926,881],{"class":279},[75,928,384],{"class":85},[75,930,932,935,937,939],{"class":77,"line":931},57,[75,933,934],{"class":85},"    padding",[75,936,189],{"class":81},[75,938,881],{"class":279},[75,940,384],{"class":85},[75,942,944,947,949,952],{"class":77,"line":943},58,[75,945,946],{"class":85},"    borderRadius",[75,948,189],{"class":81},[75,950,951],{"class":279}," 10",[75,953,384],{"class":85},[75,955,957],{"class":77,"line":956},59,[75,958,889],{"class":85},[75,960,962,965,967],{"class":77,"line":961},60,[75,963,964],{"class":85},"  topicName",[75,966,189],{"class":81},[75,968,111],{"class":85},[75,970,972,975,977,980],{"class":77,"line":971},61,[75,973,974],{"class":85},"    fontSize",[75,976,189],{"class":81},[75,978,979],{"class":279}," 18",[75,981,384],{"class":85},[75,983,985,988,990,992,995,997],{"class":77,"line":984},62,[75,986,987],{"class":85},"    fontWeight",[75,989,189],{"class":81},[75,991,93],{"class":92},[75,993,994],{"class":96},"bold",[75,996,100],{"class":92},[75,998,384],{"class":85},[75,1000,1002,1005,1007,1010],{"class":77,"line":1001},63,[75,1003,1004],{"class":85},"    marginBottom",[75,1006,189],{"class":81},[75,1008,1009],{"class":279}," 5",[75,1011,384],{"class":85},[75,1013,1015],{"class":77,"line":1014},64,[75,1016,889],{"class":85},[75,1018,1020,1023,1025],{"class":77,"line":1019},65,[75,1021,1022],{"class":85},"  topicDescription",[75,1024,189],{"class":81},[75,1026,111],{"class":85},[75,1028,1030,1032,1034,1037],{"class":77,"line":1029},66,[75,1031,974],{"class":85},[75,1033,189],{"class":81},[75,1035,1036],{"class":279}," 14",[75,1038,384],{"class":85},[75,1040,1042,1045,1047,1049,1052,1054],{"class":77,"line":1041},67,[75,1043,1044],{"class":85},"    color",[75,1046,189],{"class":81},[75,1048,93],{"class":92},[75,1050,1051],{"class":96},"#666",[75,1053,100],{"class":92},[75,1055,384],{"class":85},[75,1057,1059],{"class":77,"line":1058},68,[75,1060,889],{"class":85},[75,1062,1064],{"class":77,"line":1063},69,[75,1065,1066],{"class":85},"});\n",[15,1068,1069],{},"O resultado deve ser mais ou menos assim:",[1071,1072],"img",{"alt":1073,"height":1074,"src":1075,"width":1076},"Exemplo estático de uma lista de dados com nome e descrição",412,"images\u002Fblog\u002Freact-native\u002Fdemonstracao-estatica-dos-dados-de-teste-para-scroll-infinito.webp",222,[58,1078,1080],{"id":1079},"passo-3-puxando-dados-da-api","Passo 3: Puxando dados da API",[15,1082,1083,1084,1088],{},"Agora que criamos uma interface básica, vamos buscar os dados da API para preencher a lista com os primeiros ",[1085,1086,1087],"strong",{},"15 itens",".",[15,1090,1091,1092,1095],{},"Para centralizar algumas informações importantes, definiremos ",[1085,1093,1094],{},"3 variáveis"," abaixo dos nossos States:",[66,1097,1099],{"className":68,"code":1098,"language":70,"meta":71,"style":71},"const baseURL = \"https:\u002F\u002Fapi.github.com\";\nconst searchTerm = \"react\";\nconst itensPerPage = 15;\n",[45,1100,1101,1118,1135],{"__ignoreMap":71},[75,1102,1103,1105,1108,1110,1112,1114,1116],{"class":77,"line":78},[75,1104,846],{"class":81},[75,1106,1107],{"class":85}," baseURL ",[75,1109,248],{"class":81},[75,1111,93],{"class":92},[75,1113,42],{"class":96},[75,1115,100],{"class":92},[75,1117,103],{"class":85},[75,1119,1120,1122,1125,1127,1129,1131,1133],{"class":77,"line":106},[75,1121,846],{"class":81},[75,1123,1124],{"class":85}," searchTerm ",[75,1126,248],{"class":81},[75,1128,93],{"class":92},[75,1130,97],{"class":96},[75,1132,100],{"class":92},[75,1134,103],{"class":85},[75,1136,1137,1139,1142,1144,1147],{"class":77,"line":114},[75,1138,846],{"class":81},[75,1140,1141],{"class":85}," itensPerPage ",[75,1143,248],{"class":81},[75,1145,1146],{"class":279}," 15",[75,1148,103],{"class":85},[15,1150,1151,1152,1155],{},"Com esses dados definidos, vamos criar uma função chamada ",[45,1153,1154],{},"loadTopicsFromAPI"," para buscar os dados da API e colocar os dados nos seus States:",[66,1157,1159],{"className":68,"code":1158,"language":70,"meta":71,"style":71},"\u002F\u002F ... (Código anterior)\n\nconst loadTopicsFromAPI = async () => {\n  if (loading) return;\n\n  setLoading(true);\n\n  const response = await fetch(\n    `${baseURL}\u002Fsearch\u002Ftopics?q=${searchTerm}&per_page=${itensPerPage}&page=${page}`\n  );\n  const result = await response.json();\n\n  setData((prevData) => [...prevData, ...result.items]);\n  setPage((prevPage) => prevPage + 1);\n\n  setLoading(false);\n};\n\n\u002F\u002F ... (Continuação do código)\n",[45,1160,1161,1166,1170,1189,1202,1206,1218,1222,1240,1287,1291,1311,1315,1345,1370,1374,1384,1388,1392],{"__ignoreMap":71},[75,1162,1163],{"class":77,"line":78},[75,1164,1165],{"class":329},"\u002F\u002F ... (Código anterior)\n",[75,1167,1168],{"class":77,"line":106},[75,1169,165],{"emptyLinePlaceholder":164},[75,1171,1172,1174,1177,1179,1182,1185,1187],{"class":77,"line":114},[75,1173,846],{"class":81},[75,1175,1176],{"class":232}," loadTopicsFromAPI",[75,1178,178],{"class":81},[75,1180,1181],{"class":81}," async",[75,1183,1184],{"class":85}," () ",[75,1186,659],{"class":81},[75,1188,111],{"class":85},[75,1190,1191,1194,1197,1200],{"class":77,"line":120},[75,1192,1193],{"class":81},"  if",[75,1195,1196],{"class":85}," (loading) ",[75,1198,1199],{"class":81},"return",[75,1201,103],{"class":85},[75,1203,1204],{"class":77,"line":126},[75,1205,165],{"emptyLinePlaceholder":164},[75,1207,1208,1211,1213,1216],{"class":77,"line":132},[75,1209,1210],{"class":232},"  setLoading",[75,1212,276],{"class":85},[75,1214,1215],{"class":279},"true",[75,1217,283],{"class":85},[75,1219,1220],{"class":77,"line":138},[75,1221,165],{"emptyLinePlaceholder":164},[75,1223,1224,1226,1229,1231,1234,1237],{"class":77,"line":144},[75,1225,242],{"class":81},[75,1227,1228],{"class":85}," response ",[75,1230,248],{"class":81},[75,1232,1233],{"class":81}," await",[75,1235,1236],{"class":232}," fetch",[75,1238,1239],{"class":85},"(\n",[75,1241,1242,1245,1248,1251,1254,1257,1259,1262,1264,1267,1269,1272,1274,1277,1279,1282,1284],{"class":77,"line":161},[75,1243,1244],{"class":96},"    `",[75,1246,1247],{"class":81},"${",[75,1249,1250],{"class":85},"baseURL",[75,1252,1253],{"class":81},"}",[75,1255,1256],{"class":96},"\u002Fsearch\u002Ftopics?q=",[75,1258,1247],{"class":81},[75,1260,1261],{"class":85},"searchTerm",[75,1263,1253],{"class":81},[75,1265,1266],{"class":96},"&per_page=",[75,1268,1247],{"class":81},[75,1270,1271],{"class":85},"itensPerPage",[75,1273,1253],{"class":81},[75,1275,1276],{"class":96},"&page=",[75,1278,1247],{"class":81},[75,1280,1281],{"class":85},"page",[75,1283,1253],{"class":81},[75,1285,1286],{"class":96},"`\n",[75,1288,1289],{"class":77,"line":168},[75,1290,747],{"class":85},[75,1292,1293,1295,1298,1300,1302,1305,1308],{"class":77,"line":183},[75,1294,242],{"class":81},[75,1296,1297],{"class":85}," result ",[75,1299,248],{"class":81},[75,1301,1233],{"class":81},[75,1303,1304],{"class":85}," response.",[75,1306,1307],{"class":232},"json",[75,1309,1310],{"class":85},"();\n",[75,1312,1313],{"class":77,"line":197},[75,1314,165],{"emptyLinePlaceholder":164},[75,1316,1317,1320,1323,1326,1329,1331,1334,1337,1340,1342],{"class":77,"line":209},[75,1318,1319],{"class":232},"  setData",[75,1321,1322],{"class":85},"((",[75,1324,1325],{"class":257},"prevData",[75,1327,1328],{"class":85},") ",[75,1330,659],{"class":81},[75,1332,1333],{"class":85}," [",[75,1335,1336],{"class":81},"...",[75,1338,1339],{"class":85},"prevData, ",[75,1341,1336],{"class":81},[75,1343,1344],{"class":85},"result.items]);\n",[75,1346,1347,1350,1352,1355,1357,1359,1362,1365,1368],{"class":77,"line":215},[75,1348,1349],{"class":232},"  setPage",[75,1351,1322],{"class":85},[75,1353,1354],{"class":257},"prevPage",[75,1356,1328],{"class":85},[75,1358,659],{"class":81},[75,1360,1361],{"class":85}," prevPage ",[75,1363,1364],{"class":81},"+",[75,1366,1367],{"class":279}," 1",[75,1369,283],{"class":85},[75,1371,1372],{"class":77,"line":220},[75,1373,165],{"emptyLinePlaceholder":164},[75,1375,1376,1378,1380,1382],{"class":77,"line":239},[75,1377,1210],{"class":232},[75,1379,276],{"class":85},[75,1381,300],{"class":279},[75,1383,283],{"class":85},[75,1385,1386],{"class":77,"line":264},[75,1387,212],{"class":85},[75,1389,1390],{"class":77,"line":286},[75,1391,165],{"emptyLinePlaceholder":164},[75,1393,1394],{"class":77,"line":305},[75,1395,1396],{"class":329},"\u002F\u002F ... (Continuação do código)\n",[15,1398,1399],{},[1085,1400,1401,1402,100],{},"🤔 Dica: Não sabe usar o fetch? Veja um tutorial nesse link: \"",[37,1403,1404],{"href":1404,"rel":1405},"https:\u002F\u002Fcodigoaoponto.com\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api",[41],[15,1407,1408,1409,1412],{},"Com isso, temos uma função para puxar os dados da API, então não precisamos mais dos dados temporários, e também usaremos o ",[45,1410,1411],{},"useEffect"," para chamar a função toda vez que a página é carregada:",[66,1414,1416],{"className":68,"code":1415,"language":70,"meta":71,"style":71},"export default function App() {\n  const [data, setData] = useState\u003CTopic[]>([]);\n  const [page, setPage] = useState(1);\n  const [loading, setLoading] = useState(false);\n\n  const baseURL = \"https:\u002F\u002Fapi.github.com\";\n  const searchTerm = \"react\";\n  const itensPerPage = 15;\n\n  useEffect(() => {\n    loadTopicsFromAPI();\n  }, []);\n\n  const loadTopicsFromAPI = async () => {\n    if (loading) return;\n\n    setLoading(true);\n\n    const response = await fetch(\n      `${baseURL}\u002Fsearch\u002Ftopics?q=${searchTerm}&per_page=${itensPerPage}&page=${page}`\n    );\n    const result = await response.json();\n\n    setData((prevData) => [...prevData, ...result.items]);\n    setPage((prevPage) => prevPage + 1);\n\n    setLoading(false);\n  };\n\n    \u002F\u002F ... (Continuação do código)\n",[45,1417,1418,1430,1446,1462,1478,1482,1498,1514,1526,1530,1542,1549,1554,1558,1574,1585,1589,1600,1604,1619,1656,1661,1677,1681,1704,1725,1729,1739,1744,1748],{"__ignoreMap":71},[75,1419,1420,1422,1424,1426,1428],{"class":77,"line":78},[75,1421,223],{"class":81},[75,1423,226],{"class":81},[75,1425,229],{"class":81},[75,1427,233],{"class":232},[75,1429,236],{"class":85},[75,1431,1432,1434,1436,1438,1440,1442,1444],{"class":77,"line":106},[75,1433,242],{"class":81},[75,1435,245],{"class":85},[75,1437,248],{"class":81},[75,1439,251],{"class":232},[75,1441,254],{"class":85},[75,1443,258],{"class":257},[75,1445,261],{"class":85},[75,1447,1448,1450,1452,1454,1456,1458,1460],{"class":77,"line":114},[75,1449,242],{"class":81},[75,1451,269],{"class":85},[75,1453,248],{"class":81},[75,1455,251],{"class":232},[75,1457,276],{"class":85},[75,1459,280],{"class":279},[75,1461,283],{"class":85},[75,1463,1464,1466,1468,1470,1472,1474,1476],{"class":77,"line":120},[75,1465,242],{"class":81},[75,1467,291],{"class":85},[75,1469,248],{"class":81},[75,1471,251],{"class":232},[75,1473,276],{"class":85},[75,1475,300],{"class":279},[75,1477,283],{"class":85},[75,1479,1480],{"class":77,"line":126},[75,1481,165],{"emptyLinePlaceholder":164},[75,1483,1484,1486,1488,1490,1492,1494,1496],{"class":77,"line":132},[75,1485,242],{"class":81},[75,1487,1107],{"class":85},[75,1489,248],{"class":81},[75,1491,93],{"class":92},[75,1493,42],{"class":96},[75,1495,100],{"class":92},[75,1497,103],{"class":85},[75,1499,1500,1502,1504,1506,1508,1510,1512],{"class":77,"line":138},[75,1501,242],{"class":81},[75,1503,1124],{"class":85},[75,1505,248],{"class":81},[75,1507,93],{"class":92},[75,1509,97],{"class":96},[75,1511,100],{"class":92},[75,1513,103],{"class":85},[75,1515,1516,1518,1520,1522,1524],{"class":77,"line":144},[75,1517,242],{"class":81},[75,1519,1141],{"class":85},[75,1521,248],{"class":81},[75,1523,1146],{"class":279},[75,1525,103],{"class":85},[75,1527,1528],{"class":77,"line":161},[75,1529,165],{"emptyLinePlaceholder":164},[75,1531,1532,1535,1538,1540],{"class":77,"line":168},[75,1533,1534],{"class":232},"  useEffect",[75,1536,1537],{"class":85},"(() ",[75,1539,659],{"class":81},[75,1541,111],{"class":85},[75,1543,1544,1547],{"class":77,"line":183},[75,1545,1546],{"class":232},"    loadTopicsFromAPI",[75,1548,1310],{"class":85},[75,1550,1551],{"class":77,"line":197},[75,1552,1553],{"class":85},"  }, []);\n",[75,1555,1556],{"class":77,"line":209},[75,1557,165],{"emptyLinePlaceholder":164},[75,1559,1560,1562,1564,1566,1568,1570,1572],{"class":77,"line":215},[75,1561,242],{"class":81},[75,1563,1176],{"class":232},[75,1565,178],{"class":81},[75,1567,1181],{"class":81},[75,1569,1184],{"class":85},[75,1571,659],{"class":81},[75,1573,111],{"class":85},[75,1575,1576,1579,1581,1583],{"class":77,"line":220},[75,1577,1578],{"class":81},"    if",[75,1580,1196],{"class":85},[75,1582,1199],{"class":81},[75,1584,103],{"class":85},[75,1586,1587],{"class":77,"line":239},[75,1588,165],{"emptyLinePlaceholder":164},[75,1590,1591,1594,1596,1598],{"class":77,"line":264},[75,1592,1593],{"class":232},"    setLoading",[75,1595,276],{"class":85},[75,1597,1215],{"class":279},[75,1599,283],{"class":85},[75,1601,1602],{"class":77,"line":286},[75,1603,165],{"emptyLinePlaceholder":164},[75,1605,1606,1609,1611,1613,1615,1617],{"class":77,"line":305},[75,1607,1608],{"class":81},"    const",[75,1610,1228],{"class":85},[75,1612,248],{"class":81},[75,1614,1233],{"class":81},[75,1616,1236],{"class":232},[75,1618,1239],{"class":85},[75,1620,1621,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654],{"class":77,"line":493},[75,1622,1623],{"class":96},"      `",[75,1625,1247],{"class":81},[75,1627,1250],{"class":85},[75,1629,1253],{"class":81},[75,1631,1256],{"class":96},[75,1633,1247],{"class":81},[75,1635,1261],{"class":85},[75,1637,1253],{"class":81},[75,1639,1266],{"class":96},[75,1641,1247],{"class":81},[75,1643,1271],{"class":85},[75,1645,1253],{"class":81},[75,1647,1276],{"class":96},[75,1649,1247],{"class":81},[75,1651,1281],{"class":85},[75,1653,1253],{"class":81},[75,1655,1286],{"class":96},[75,1657,1658],{"class":77,"line":509},[75,1659,1660],{"class":85},"    );\n",[75,1662,1663,1665,1667,1669,1671,1673,1675],{"class":77,"line":516},[75,1664,1608],{"class":81},[75,1666,1297],{"class":85},[75,1668,248],{"class":81},[75,1670,1233],{"class":81},[75,1672,1304],{"class":85},[75,1674,1307],{"class":232},[75,1676,1310],{"class":85},[75,1678,1679],{"class":77,"line":528},[75,1680,165],{"emptyLinePlaceholder":164},[75,1682,1683,1686,1688,1690,1692,1694,1696,1698,1700,1702],{"class":77,"line":533},[75,1684,1685],{"class":232},"    setData",[75,1687,1322],{"class":85},[75,1689,1325],{"class":257},[75,1691,1328],{"class":85},[75,1693,659],{"class":81},[75,1695,1333],{"class":85},[75,1697,1336],{"class":81},[75,1699,1339],{"class":85},[75,1701,1336],{"class":81},[75,1703,1344],{"class":85},[75,1705,1706,1709,1711,1713,1715,1717,1719,1721,1723],{"class":77,"line":538},[75,1707,1708],{"class":232},"    setPage",[75,1710,1322],{"class":85},[75,1712,1354],{"class":257},[75,1714,1328],{"class":85},[75,1716,659],{"class":81},[75,1718,1361],{"class":85},[75,1720,1364],{"class":81},[75,1722,1367],{"class":279},[75,1724,283],{"class":85},[75,1726,1727],{"class":77,"line":554},[75,1728,165],{"emptyLinePlaceholder":164},[75,1730,1731,1733,1735,1737],{"class":77,"line":561},[75,1732,1593],{"class":232},[75,1734,276],{"class":85},[75,1736,300],{"class":279},[75,1738,283],{"class":85},[75,1740,1741],{"class":77,"line":573},[75,1742,1743],{"class":85},"  };\n",[75,1745,1746],{"class":77,"line":578},[75,1747,165],{"emptyLinePlaceholder":164},[75,1749,1750],{"class":77,"line":584},[75,1751,1752],{"class":329},"    \u002F\u002F ... (Continuação do código)\n",[15,1754,1755],{},"Sua aplicação deve estar desse jeito:",[1071,1757],{"alt":1758,"height":1074,"src":1759,"width":1076},"Exemplo de uma lista de dados puxados de uma API com nome e descrição","images\u002Fblog\u002Freact-native\u002Fdemonstracao-dos-quinze-primeiros-dados-puxados-da-api-para-scroll-infinito.gif",[58,1761,1763],{"id":1762},"passo-4-adicionando-o-scroll-infinito","Passo 4: Adicionando o Scroll Infinito",[15,1765,1766,1767,1769],{},"Vamos adicionar agora os métodos que darão funcionamento ao scroll infinito, a função ",[45,1768,1154],{},", além de carregar os primeiros dados, também adiciona mais 1 página sempre que chamada, fazendo carregar ainda mais dados!",[15,1771,1772,1773,1775,1776,1779,1780,1783],{},"Vamos até a ",[45,1774,318],{},", e adicionaremos as propriedades ",[45,1777,1778],{},"onEndReached"," e ",[45,1781,1782],{},"onEndReachedThreshold"," :",[66,1785,1787],{"className":68,"code":1786,"language":70,"meta":71,"style":71},"\u002F\u002F ... (Código anterior)\n\nreturn (\n  \u003CFlatList\n    contentContainerStyle={{ marginTop: 30, marginHorizontal: 20 }}\n    data={data}\n    renderItem={renderItem}\n    keyExtractor={(item) => item.name}\n    onEndReached={loadTopicsFromAPI}\n    onEndReachedThreshold={0.1}\n  \u002F>\n);\n\n\u002F\u002F ... (Continuação do código)\n",[45,1788,1789,1793,1797,1803,1810,1827,1836,1845,1854,1864,1879,1884,1888,1892],{"__ignoreMap":71},[75,1790,1791],{"class":77,"line":78},[75,1792,1165],{"class":329},[75,1794,1795],{"class":77,"line":106},[75,1796,165],{"emptyLinePlaceholder":164},[75,1798,1799,1801],{"class":77,"line":114},[75,1800,1199],{"class":81},[75,1802,662],{"class":85},[75,1804,1805,1808],{"class":77,"line":120},[75,1806,1807],{"class":81},"  \u003C",[75,1809,768],{"class":257},[75,1811,1812,1815,1817,1819,1821,1823,1825],{"class":77,"line":126},[75,1813,1814],{"class":85},"    contentContainerStyle",[75,1816,248],{"class":81},[75,1818,779],{"class":85},[75,1820,782],{"class":279},[75,1822,785],{"class":85},[75,1824,788],{"class":279},[75,1826,791],{"class":85},[75,1828,1829,1832,1834],{"class":77,"line":132},[75,1830,1831],{"class":85},"    data",[75,1833,248],{"class":81},[75,1835,802],{"class":85},[75,1837,1838,1841,1843],{"class":77,"line":138},[75,1839,1840],{"class":85},"    renderItem",[75,1842,248],{"class":81},[75,1844,813],{"class":85},[75,1846,1847,1850,1852],{"class":77,"line":144},[75,1848,1849],{"class":85},"    keyExtractor",[75,1851,248],{"class":81},[75,1853,824],{"class":85},[75,1855,1856,1859,1861],{"class":77,"line":161},[75,1857,1858],{"class":85},"    onEndReached",[75,1860,248],{"class":81},[75,1862,1863],{"class":85},"{loadTopicsFromAPI}\n",[75,1865,1866,1869,1871,1874,1877],{"class":77,"line":168},[75,1867,1868],{"class":85},"    onEndReachedThreshold",[75,1870,248],{"class":81},[75,1872,1873],{"class":85},"{",[75,1875,1876],{"class":279},"0.1",[75,1878,308],{"class":85},[75,1880,1881],{"class":77,"line":183},[75,1882,1883],{"class":81},"  \u002F>\n",[75,1885,1886],{"class":77,"line":197},[75,1887,283],{"class":85},[75,1889,1890],{"class":77,"line":209},[75,1891,165],{"emptyLinePlaceholder":164},[75,1893,1894],{"class":77,"line":215},[75,1895,1396],{"class":329},[1897,1898,1899],"ul",{},[1900,1901,1902,1905],"li",{},[1085,1903,1904],{},"💡 Explicação:",[1897,1906,1907,1912],{},[1900,1908,1909,1911],{},[45,1910,1778],{},": Chama uma função toda vez que a lista chega ao final!",[1900,1913,1914,1916],{},[45,1915,1782],{},": Define basicamente o percentual de distância do fim da lista para carregar novos dados, 0,1 significa\n10% e 1 significa 100%.",[15,1918,1919],{},"Se tudo funcionou como esperado, você deve estar vendo este resultado:",[1071,1921],{"alt":1922,"height":1074,"src":1923,"width":1076},"Exemplo de uma lista de dados puxados de uma API com nome e descrição e com scroll infinito","images\u002Fblog\u002Freact-native\u002Fdemonstracao-do-scroll-infinito-sem-estilos.gif",[15,1925,1926],{},"Ótimo, o scroll infinito está funcionando! Agora, para aprimorar a experiência do usuário e deixar mais intuitivo, vamos adicionar um indicador de carregamento ao final da lista quando estivermos carregando novos itens:",[66,1928,1930],{"className":68,"code":1929,"language":70,"meta":71,"style":71},"\u003CFlatList\n ...\n ListFooterComponent={renderFooter}\n\u002F>\n",[45,1931,1932,1938,1943,1953],{"__ignoreMap":71},[75,1933,1934,1936],{"class":77,"line":78},[75,1935,254],{"class":81},[75,1937,768],{"class":85},[75,1939,1940],{"class":77,"line":106},[75,1941,1942],{"class":81}," ...\n",[75,1944,1945,1948,1950],{"class":77,"line":114},[75,1946,1947],{"class":85}," ListFooterComponent",[75,1949,248],{"class":81},[75,1951,1952],{"class":85},"{renderFooter}\n",[75,1954,1955],{"class":77,"line":120},[75,1956,1957],{"class":81},"\u002F>\n",[15,1959,1960,1961,1964,1965,1968],{},"E vamos criar um componente acima do componente ",[45,1962,1963],{},"RenderItem"," e utilizar o ",[45,1966,1967],{},"ActivityIndicator"," do React-Native :",[66,1970,1972],{"className":68,"code":1971,"language":70,"meta":71,"style":71},"\u002F\u002F ... (Código anterior)\n\nconst renderFooter = () => {\n  if (!loading) return null;\n\n  return (\n    \u003CView style={{ alignSelf: \"center\", marginVertical: 20 }}>\n      \u003CActivityIndicator size=\"large\" color=\"#0000ff\" \u002F>\n    \u003C\u002FView>\n  );\n};\n\n\u002F\u002F ... (Continuação do código)\n",[45,1973,1974,1978,1982,1997,2017,2021,2027,2055,2086,2094,2098,2102,2106],{"__ignoreMap":71},[75,1975,1976],{"class":77,"line":78},[75,1977,1165],{"class":329},[75,1979,1980],{"class":77,"line":106},[75,1981,165],{"emptyLinePlaceholder":164},[75,1983,1984,1986,1989,1991,1993,1995],{"class":77,"line":114},[75,1985,846],{"class":81},[75,1987,1988],{"class":232}," renderFooter",[75,1990,178],{"class":81},[75,1992,1184],{"class":85},[75,1994,659],{"class":81},[75,1996,111],{"class":85},[75,1998,1999,2001,2004,2007,2010,2012,2015],{"class":77,"line":120},[75,2000,1193],{"class":81},[75,2002,2003],{"class":85}," (",[75,2005,2006],{"class":81},"!",[75,2008,2009],{"class":85},"loading) ",[75,2011,1199],{"class":81},[75,2013,2014],{"class":279}," null",[75,2016,103],{"class":85},[75,2018,2019],{"class":77,"line":126},[75,2020,165],{"emptyLinePlaceholder":164},[75,2022,2023,2025],{"class":77,"line":132},[75,2024,758],{"class":81},[75,2026,662],{"class":85},[75,2028,2029,2031,2033,2035,2038,2040,2043,2045,2048,2050,2053],{"class":77,"line":138},[75,2030,668],{"class":81},[75,2032,671],{"class":85},[75,2034,248],{"class":81},[75,2036,2037],{"class":85},"{{ alignSelf: ",[75,2039,100],{"class":92},[75,2041,2042],{"class":96},"center",[75,2044,100],{"class":92},[75,2046,2047],{"class":85},", marginVertical: ",[75,2049,788],{"class":279},[75,2051,2052],{"class":85}," }}",[75,2054,679],{"class":81},[75,2056,2057,2059,2062,2064,2066,2069,2071,2074,2076,2078,2081,2083],{"class":77,"line":144},[75,2058,685],{"class":81},[75,2060,2061],{"class":85},"ActivityIndicator size",[75,2063,248],{"class":81},[75,2065,100],{"class":92},[75,2067,2068],{"class":96},"large",[75,2070,100],{"class":92},[75,2072,2073],{"class":85}," color",[75,2075,248],{"class":81},[75,2077,100],{"class":92},[75,2079,2080],{"class":96},"#0000ff",[75,2082,100],{"class":92},[75,2084,2085],{"class":81}," \u002F>\n",[75,2087,2088,2090,2092],{"class":77,"line":161},[75,2089,736],{"class":81},[75,2091,739],{"class":85},[75,2093,679],{"class":81},[75,2095,2096],{"class":77,"line":168},[75,2097,747],{"class":85},[75,2099,2100],{"class":77,"line":183},[75,2101,212],{"class":85},[75,2103,2104],{"class":77,"line":197},[75,2105,165],{"emptyLinePlaceholder":164},[75,2107,2108],{"class":77,"line":209},[75,2109,1396],{"class":329},[15,2111,2112],{},"Juntando tudo que construímos até agora, temos algo assim como resultado final:",[1071,2114],{"alt":2115,"height":1074,"src":2116,"width":1076},"Exemplo de uma lista de dados puxados de uma API com nome e descrição e com scroll infinito e uma bolinha de carregamento","images\u002Fblog\u002Freact-native\u002Fdemonstracao-do-scroll-infinito-com-estilos-e-carregamento.gif",[19,2118,2120],{"id":2119},"resumindo","Resumindo!",[15,2122,2123],{},"Implementar um scroll infinito se encaixa em muitos projetos e melhora a experiência do usuário da aplicação, e nós vemos isso no nosso dia a dia, afinal os principais aplicativos como YouTube, Instagram, TikToc, entre outros.",[58,2125,2127],{"id":2126},"algumas-vantagens","Algumas vantagens.",[2129,2130,2131,2147,2163,2176,2186],"ol",{},[1900,2132,2133,2136],{},[1085,2134,2135],{},"Como dito antes, melhora a experiência do usuário:",[1897,2137,2138,2141,2144],{},[1900,2139,2140],{},"Proporciona uma navegação fluida e ininterrupta.",[1900,2142,2143],{},"Elimina a necessidade de clicar em botões de \"próxima página\" ou \"carregar mais\".",[1900,2145,2146],{},"Cria uma sensação de conteúdo infinito, incentivando o engajamento do usuário.",[1900,2148,2149,2152],{},[1085,2150,2151],{},"Otimização de Desempenho:",[1897,2153,2154,2157,2160],{},[1900,2155,2156],{},"Carrega dados sob demanda, reduzindo o uso de memória do dispositivo.",[1900,2158,2159],{},"Melhora o tempo de carregamento inicial do aplicativo.",[1900,2161,2162],{},"Permite lidar eficientemente com grandes conjuntos de dados.",[1900,2164,2165,2168],{},[1085,2166,2167],{},"Economia de Recursos:",[1897,2169,2170,2173],{},[1900,2171,2172],{},"Reduz o uso de dados do usuário, carregando conteúdo apenas quando necessário.",[1900,2174,2175],{},"Diminui a carga no servidor, pois os dados são solicitados em lotes menores.",[1900,2177,2178,2181],{},[1085,2179,2180],{},"Adaptabilidade:",[1897,2182,2183],{},[1900,2184,2185],{},"Funciona bem em diferentes tamanhos de tela e orientações de dispositivo.",[1900,2187,2188,2191],{},[1085,2189,2190],{},"Aumento do Tempo de Sessão.",[1897,2192,2193,2196],{},[1900,2194,2195],{},"Encoraja os usuários a continuarem rolando e consumindo mais conteúdo.",[1900,2197,2198],{},"Pode levar a maior engajamento e retenção de usuários.",[15,2200,2201],{},"Agora é com você! Experimente implementar o scroll infinito em seus projetos React Native e veja a diferença que faz!",[2203,2204,2205],"style",{},"html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .sCp4m, html code.shiki .sCp4m{--shiki-default:#8BE9FD;--shiki-default-font-style:italic}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .sGEwX, html code.shiki .sGEwX{--shiki-default:#FFB86C;--shiki-default-font-style:italic}html pre.shiki code .sIQBb, html code.shiki .sIQBb{--shiki-default:#BD93F9}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}",{"title":71,"searchDepth":106,"depth":106,"links":2207},[2208,2209,2215],{"id":21,"depth":106,"text":22},{"id":28,"depth":106,"text":29,"children":2210},[2211,2212,2213,2214],{"id":60,"depth":114,"text":61},{"id":311,"depth":114,"text":312},{"id":1079,"depth":114,"text":1080},{"id":1762,"depth":114,"text":1763},{"id":2119,"depth":106,"text":2120,"children":2216},[2217],{"id":2126,"depth":114,"text":2127},[154],"Aprenda a fazer scroll infinito no React Native, carregando novo conteúdo conforme o usuário rola a tela, e conheça as vantagens dessa técnica para o seu app.","md",{},"\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens","2024-12-15",{"title":5,"description":2219},{"loc":2222,"images":2226,"lastmod":2231},[2227,2228,2229,2230],{"loc":1075},{"loc":1759},{"loc":1923},{"loc":2116},"2026-10-06","blog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens",819,"18AfHeFs4bxXu21Iy8MI7aaooZUFfTgjplV4DsVTHT4",[2236,2244,2253,2260,2268,2276,2284,2291,2299,2307,2314,2322,2328,2337,2344,2351,2358,2365,2372,2374,2381,2387],{"id":2237,"path":2238,"title":2239,"articleCover":2240,"categoriesIds":2241,"publishedAt":2243},"blog\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.md","\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem","A maneira correta de utilizar a nomenclatura BEM","\u002Fimages\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.webp",[2242],"css","2024-05-05",{"id":2245,"path":2246,"title":2247,"articleCover":2248,"categoriesIds":2249,"publishedAt":2252},"blog\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n.md","\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n","Como Adicionar Caracteres Especiais em Traduções do i18N","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-caracteres-especiais-no-nuxtjs-thumb.webp",[2250,2251],"nuxt","vuejs","2025-01-29",{"id":2254,"path":2255,"title":2256,"articleCover":2257,"categoriesIds":2258,"publishedAt":2259},"blog\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3.md","\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3","Como adicionar o Google Tag Manager no seu website com Nuxt 3","\u002Fimages\u002Fblog\u002Fcomo-adicionar-google-tag-manager-em-projeto-com-nuxt-3.webp",[2250,2251],"2024-08-15",{"id":2261,"path":2262,"title":2263,"articleCover":2264,"categoriesIds":2265,"publishedAt":2267},"blog\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github.md","\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github","Chave SSH no Git: Como Configurar chave SSH para usar no GitHub","\u002Fimages\u002Fblog\u002Fgit\u002Fcomo-criar-e-configurar-chave-ssh-no-github-thumb.webp",[2266],"git","2025-02-04",{"id":2269,"path":2270,"title":2271,"articleCover":2272,"categoriesIds":2273,"publishedAt":2275},"blog\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.md","\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","Como consumir uma API no JavaScript com a Fetch API","\u002Fimages\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.webp",[2274],"javascript","2024-09-05",{"id":2277,"path":2278,"title":2279,"articleCover":2280,"categoriesIds":2281,"publishedAt":2283},"blog\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs.md","\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs","Como Adicionar Dados Estruturados no Nuxt.JS","\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[2250,2251,2282],"seo","2025-01-22",{"id":2285,"path":2286,"title":2287,"articleCover":2288,"categoriesIds":2289,"publishedAt":2290},"blog\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt.md","\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt","Rotas no Nuxt: dinâmicas, aninhadas e catch-all","\u002Fimages\u002Fblog\u002Fnuxt\u002Fsistema-de-rotas-no-nuxtjs-thumb.webp",[2250,2251],"2025-03-12",{"id":2292,"path":2293,"title":2294,"articleCover":2295,"categoriesIds":2296,"publishedAt":2298},"blog\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores.md","\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores","Como Lidar com Inveja de Outros Programadores","\u002Fimages\u002Fblog\u002Fcarreira\u002Finveja-de-programadores-com-quem-se-destaca.webp",[2297],"career","2025-08-29",{"id":2300,"path":2301,"title":2302,"articleCover":2303,"categoriesIds":2304,"publishedAt":2306},"blog\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode.md","\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode","Perdeu arquivos no Git sem commit? Veja como recuperar pelo VS Code","\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp",[2266,2305],"vscode","2024-05-15",{"id":2308,"path":2309,"title":2310,"articleCover":2311,"categoriesIds":2312,"publishedAt":2313},"blog\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs.md","\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs","Middlewares: O que são e como utilizar no Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Fmiddlewares-no-front-end.webp",[2250,2251],"2025-01-14",{"id":2315,"path":2316,"title":2317,"articleCover":2318,"categoriesIds":2319,"publishedAt":2321},"blog\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript.md","\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript","Como validar um cartão de crédito com JavaScript (algoritmo de Luhn)","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cartao-de-credito-com-javascript.webp",[2274,2320],"tools","2026-09-17",{"id":2323,"path":2324,"title":2325,"articleCover":2326,"categoriesIds":2327,"publishedAt":2321},"blog\u002Fblog\u002Fcomo-validar-cpf-com-javascript.md","\u002Fblog\u002Fcomo-validar-cpf-com-javascript","Como validar um CPF com JavaScript","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cpf-com-javascript.webp",[2274,2320],{"id":2329,"path":2330,"title":2331,"articleCover":2332,"categoriesIds":2333,"publishedAt":2336},"blog\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.md","\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar","Guia de Componentes no Figma para Iniciantes","\u002Fimages\u002Fblog\u002Ffigma\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.png",[2334,2335],"figma","ux","2024-10-15",{"id":2338,"path":2339,"title":2340,"articleCover":2341,"categoriesIds":2342,"publishedAt":2343},"blog\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores.md","\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores","Criei um Hub de Ferramentas Web Gratuitas para Devs","\u002Fimages\u002Fblog\u002Fferramentas\u002Fhub-ferramentas-gratuitas-para-desenvolvedores.webp",[2320],"2026-01-06",{"id":2345,"path":2346,"title":2347,"articleCover":2348,"categoriesIds":2349,"publishedAt":2350},"blog\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.md","\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las","Diretivas no Vue 3: nativas e personalizadas","\u002Fimages\u002Fblog\u002Fvue\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.webp",[2251],"2025-03-21",{"id":2352,"path":2353,"title":2354,"articleCover":2355,"categoriesIds":2356,"publishedAt":2357},"blog\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site.md","\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site","OG Tags: O que São e Como Adicioná-las ao Seu Site","\u002Fimages\u002Fblog\u002Fseo\u002Fo-que-e-como-utilizar-as-og-tags.webp",[2282],"2024-10-05",{"id":2359,"path":2360,"title":2361,"articleCover":2362,"categoriesIds":2363,"publishedAt":2364},"blog\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego.md","\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego","Os principais erros de programadores em entrevistas de emprego","\u002Fimages\u002Fblog\u002Fnao-cometa-esses-erros-na-sua-entrevista.webp",[2297],"2024-09-15",{"id":2366,"path":2367,"title":2368,"articleCover":2369,"categoriesIds":2370,"publishedAt":2371},"blog\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.md","\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs","Qual a diferença entre a Composition API e Options API no VueJS","\u002Fimages\u002Fblog\u002Fvue\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.webp",[2251],"2025-02-20",{"id":4,"path":2222,"title":5,"articleCover":6,"categoriesIds":2373,"publishedAt":2223},[154],{"id":2375,"path":2376,"title":2377,"articleCover":2378,"categoriesIds":2379,"publishedAt":2380},"blog\u002Fblog\u002Fvercel-compra-nuxt-labs.md","\u002Fblog\u002Fvercel-compra-nuxt-labs","Vercel comprou a Nuxt Labs! E agora, o que muda para o Nuxt?","\u002Fimages\u002Fblog\u002Fnuxt\u002Fvercel-compra-nuxt-labs.webp",[2250],"2025-07-17",{"id":2382,"path":2383,"title":2384,"articleCover":2385,"categoriesIds":2386,"publishedAt":2231},"blog\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar.md","\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar","Vue Vapor Mode: o que é e o que muda no Vue 3.6","\u002Fimages\u002Fblog\u002Fvue\u002Fvue-vapor-mode-como-funciona-e-como-usar.webp",[2251,2250],{"id":2388,"path":2389,"title":2390,"articleCover":2391,"categoriesIds":2392,"publishedAt":2394},"blog\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.md","\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","Web Vitals e SEO: como a experiência do usuário afeta o seu site","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.webp",[2282,2393],"web-vitals","2024-10-25",1791682333879]