Explorando a nova API use do React 19: Simplificando a leitura de Promises e Contextos

Foto de Galen Crout na Unsplash

O React 19 introduziu a nova API use, que traz uma abordagem simplificada e flexível para lidar com Promises e Contextos dentro dos componentes React. Neste artigo, vamos explorar os detalhes dessa API, seus benefícios e como ela pode mudar o dia a dia dos desenvolvedores React.

O Que é a API use?

A API use permite que você leia o valor de um recurso, como uma Promise ou um contexto, de maneira mais flexível do que as abordagens anteriores. A sintaxe básica é:

const value = use(resource);

Principais benefícios da API use

1. Flexibilidade: Diferente dos hooks tradicionais, use pode ser chamado dentro de loops e condicionais.
2. Integração com Suspense: use integra-se perfeitamente com Suspense, facilitando a renderização assíncrona.
3. Leitura Simplificada de Contextos: Pode substituir o useContext, oferecendo mais flexibilidade ao ler valores de contexto.

Implementando a API use com Promises

Quando chamada com uma Promise, a API use suspende o componente até que a Promise seja resolvida. Vamos ver um exemplo:

Exemplo: Streaming de dados do servidor para o cliente

Vamos imaginar um cenário onde queremos buscar uma mensagem do servidor e exibi-la no cliente. Primeiro, criamos uma Promise no componente de servidor:

import { fetchMessage } from './lib.js';
import { Message } from './message.js';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

No componente de cliente, utilizamos a API use para ler o valor da Promise:

'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

Tratando Promises rejeitadas

Se a Promise for rejeitada, podemos tratar o erro utilizando um Error Boundary ou fornecendo um valor alternativo com Promise.catch.

import { use, Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <Suspense fallback={<p>⌛Downloading message...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  );
}

function Message({ messagePromise }) {
  const content = use(messagePromise);
  return <p>Here is the message: {content}</p>;
}

Com Promise.catch:

import { Message } from './message.js';

export default function App() {
  const messagePromise = new Promise((resolve, reject) => {
    reject();
  }).catch(() => {
    return "no new message found.";
  });

  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

Usando a API use com Contextos

Quando um contexto é passado para use, ele funciona de maneira similar ao useContext, mas com a vantagem de poder ser chamado dentro de condicionais e loops.

Exemplo: Leitura de Contexto com use

Vamos ver como usar use para ler um contexto de tema:

import { createContext, use } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button show={true}>Sign up</Button>
      <Button show={false}>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = use(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ show, children }) {
  if (show) {
    const theme = use(ThemeContext);
    const className = 'button-' + theme;
    return <button className={className}>{children}</button>;
  }
  return null;
}

Neste exemplo, use é utilizado dentro de um if para ler o contexto ThemeContext.

Conclusão

A API use do React 19 traz uma nova abordagem para a leitura de Promises e Contextos, oferecendo mais flexibilidade e integração com Suspense. Essa API promete simplificar a vida dos desenvolvedores, tornando o código mais limpo e fácil de manter.

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬

Se gostou, dê 1 ou 50 claps (Só clicar 50x na 👏)

Obrigado pela leitura!

Me acompanhe por aí! 😜

• Portfólio: vinniciusgomes.com
• GitHub: @vinniciusgomes
• LinkedIn: @vinniciusgomes