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 é:
1const value = use(resource);Principais benefícios da API use
- Flexibilidade: Diferente dos hooks tradicionais, use pode ser chamado dentro de loops e condicionais.
- Integração com Suspense: use integra-se perfeitamente com Suspense, facilitando a renderização assíncrona.
- 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:
1import { fetchMessage } from './lib.js';
2import { Message } from './message.js';
3
4export default function App() {
5const messagePromise = fetchMessage();
6return (
7 <Suspense fallback={<p>waiting for message...</p>}>
8 <Message messagePromise={messagePromise} />
9 </Suspense>
10);
11}No componente de cliente, utilizamos a API use para ler o valor da Promise:
1'use client';
2
3import { use } from 'react';
4
5export function Message({ messagePromise }) {
6const messageContent = use(messagePromise);
7return <p>Here is the message: {messageContent}</p>;
8}Tratando Promises rejeitadas
Se a Promise for rejeitada, podemos tratar o erro utilizando um Error Boundary ou fornecendo um valor alternativo com Promise.catch.
1import { use, Suspense } from "react";
2import { ErrorBoundary } from "react-error-boundary";
3
4export function MessageContainer({ messagePromise }) {
5return (
6 <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
7 <Suspense fallback={<p>⌛Downloading message...</p>}>
8 <Message messagePromise={messagePromise} />
9 </Suspense>
10 </ErrorBoundary>
11);
12}
13
14function Message({ messagePromise }) {
15const content = use(messagePromise);
16return <p>Here is the message: {content}</p>;
17}Com Promise.catch:
1import { Message } from './message.js';
2
3export default function App() {
4const messagePromise = new Promise((resolve, reject) => {
5 reject();
6}).catch(() => {
7 return "no new message found.";
8});
9
10return (
11 <Suspense fallback={<p>waiting for message...</p>}>
12 <Message messagePromise={messagePromise} />
13 </Suspense>
14);
15}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:
1import { createContext, use } from 'react';
2
3const ThemeContext = createContext(null);
4
5export default function MyApp() {
6return (
7 <ThemeContext.Provider value="dark">
8 <Form />
9 </ThemeContext.Provider>
10)
11}
12
13function Form() {
14return (
15 <Panel title="Welcome">
16 <Button show={true}>Sign up</Button>
17 <Button show={false}>Log in</Button>
18 </Panel>
19);
20}
21
22function Panel({ title, children }) {
23const theme = use(ThemeContext);
24const className = 'panel-' + theme;
25return (
26 <section className={className}>
27 <h1>{title}</h1>
28 {children}
29 </section>
30)
31}
32
33function Button({ show, children }) {
34if (show) {
35 const theme = use(ThemeContext);
36 const className = 'button-' + theme;
37 return <button className={className}>{children}</button>;
38}
39return null;
40}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.