React Suspense no React Native

O React Suspense é uma funcionalidade introduzida no React para ajudar a simplificar o gerenciamento de estados assíncronos em aplicativos baseados em React. No React Native, o React Suspense pode ser usado para carregar componentes de forma assíncrona, reduzindo o tempo de carregamento e melhorando a experiência do usuário.

O que é React Suspense? -

Antes de entrarmos em como usar o React Suspense no React Native, é importante entender o que é o React Suspense e como ele funciona. O React Suspense é uma funcionalidade que permite aos desenvolvedores suspender a renderização de um componente até que seus dados assíncronos estejam disponíveis. Isso significa que, em vez de mostrar um indicador de carregamento, o componente será renderizado somente quando os dados estiverem prontos.

Como ele funciona em conjunto com o React.lazy(), que é usado para carregar componentes de forma assíncrona. Combinados, permitem que os desenvolvedores carreguem apenas os componentes necessários para a tela atual, melhorando significativamente o tempo de carregamento.

Como usar o React Suspense no React Native -

Para usar o React Suspense no React Native, primeiro é necessário instalar o pacote React Native Experimental. Isso pode ser feito através do gerenciador de pacotes Yarn ou NPM, executando o comando:

yarn add react-native-experimental
npm install react-native-experimental

Feita a instalação, importamos o React Suspense usando o seguinte código:

import { Suspense } from 'react';

Vejamos um exemplo de uso do React Suspense, lembrando que seu uso é bem próximo do utilizado na web com NextJs e outras linguagens:

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

O resultado pós carregamento de Loading será:

Ao final ela retornará o desejado somente quando o processo acabar. No nosso caso aqui, temos como alvo requisitar uma API de Albúm dos Beatles(que não aparece no código, usado acima):

O React Suspense é uma funcionalidade poderosa que pode ser usada para carregar componentes de forma assíncrona no React Native. Usando o React Suspense em conjunto com o React.lazy(), os desenvolvedores podem melhorar significativamente o tempo de carregamento e a experiência do usuário em seus aplicativos React Native.

Caso ainda não tenha experimentado o React Suspense, vale a pena explorar seus recursos e ver como ele pode ajudar a melhorar o desempenho e a usabilidade de seus aplicativos.