19.0.0 (5 de dezembro de 2024)
Novos recursos
React
- Actions:
startTransition agora pode aceitar funções assíncronas. Essas funções são chamadas de "Actions" e atualizam o estado em segundo plano, fazendo o commit da UI de uma só vez. Actions podem executar efeitos colaterais, como requisições assíncronas, e aguardam a conclusão do trabalho antes de a Transition terminar.
useActionState: novo hook que permite ordenar Actions dentro de uma Transition e acessar o estado. Aceita um estado inicial e um reducer.useOptimistic: novo hook para atualizar o estado enquanto uma Transition está em andamento. Quando a Transition termina, o estado é atualizado com o novo valor.use: nova API para ler recursos durante a renderização. Aceita Promise ou Context e, quando uma Promise é fornecida, suspende até que o valor seja resolvido.- Uso de
ref como prop: agora é possível usar ref como prop sem precisar de forwardRef.
- Pré-aquecimento de irmãos do Suspense: quando um componente é suspenso, o React faz imediatamente o commit do fallback da fronteira de Suspense mais próxima.
Cliente React DOM
- Prop
action de <form>: Form Actions gerenciam o formulário automaticamente e se integram com useFormStatus. Em caso de sucesso, redefinem o formulário automaticamente.
- Suporte a metadados de documento: agora é possível renderizar nativamente tags de metadados do documento a partir de componentes.
- Suporte a stylesheets: insere stylesheets no
<head> do cliente antes de revelar o conteúdo da fronteira de Suspense.
- Suporte a scripts assíncronos: agora é possível renderizar scripts assíncronos em qualquer lugar da árvore de componentes.
Servidor React DOM
- Adição das APIs
prerender e prerenderToNodeStream: APIs para geração de sites estáticos, projetadas para funcionar em ambientes de streaming, como streams do Node.js e Web Streams.
React Server Components
- Recursos de RSC: diretivas, Server Components e Server Functions foram estabilizados. Bibliotecas que incluem Server Components agora podem ter o React 19 como dependência de mesmo nível.
Descontinuações planejadas
- Acesso a
element.ref: o acesso a element.ref foi descontinuado em favor de element.props.ref.
react-test-renderer: no React 19, react-test-renderer registra um aviso de descontinuação e muda para renderização concorrente para uso na web.
Principais mudanças
React
- Nova transformação de JSX obrigatória: é necessária uma nova transformação de JSX para melhorar o tamanho do bundle e permitir o uso de JSX sem importar React.
- Erros de renderização não são relançados: se um erro não for capturado por um Error Boundary, ele será reportado para
window.reportError.
- Remoção de
propTypes: o uso de propTypes passa a ser silenciosamente ignorado. Recomenda-se migrar para TypeScript.
- Remoção de
defaultProps em funções: é possível usar parâmetros padrão do ES6 no lugar.
- Remoção de refs de string: o uso de refs de string deve ser migrado para callbacks de ref.
React DOM
- Remoção de
react-dom/test-utils: act foi movido de react-dom/test-utils para react. Os outros utilitários foram removidos.
- Remoção de
ReactDOM.render e ReactDOM.hydrate: substituídos por ReactDOM.createRoot e ReactDOM.hydrateRoot para renderização concorrente.
Mudanças dignas de nota
React
- Uso de
<Context> como provider: agora é possível renderizar <Context> como provider em vez de <Context.Provider>.
- Suporte a custom elements: o React 19 passa em todos os testes de custom elements.
- Mudanças no StrictMode:
useMemo e useCallback reutilizam o resultado memorizado da primeira renderização.
React DOM
- Diff para erros de hidratação: quando há uma incompatibilidade, o React 19 registra um único erro incluindo o diff do conteúdo incompatível.
Mudanças no TypeScript
- Retorno implícito proibido: refs agora aceitam apenas funções de limpeza. Retornos implícitos passam a gerar erro.
- Argumento inicial obrigatório em
useRef: o argumento inicial agora é obrigatório.
- Tipagem mais estrita de
ReactElement: as props dos elementos React agora usam unknown por padrão em vez de any.
1 comentários
Comentários do Hacker News
Há uma opinião de que usar React para criar aplicativos escaláveis é possível e divertido
Há uma opinião positiva sobre o novo lançamento do React, mas com a preocupação de que pode ser difícil para iniciantes começarem
Há uma opinião de que a complexidade dos frameworks client-side está aumentando
Foi avaliado positivamente o fato de que o novo lançamento adicionou o recurso
ref as a prop, eliminando a necessidade deforwardRefEm vez de Redux, é mencionado o Jotai, um clone do Recoil, e que ele é compatível com React 19
Há quem espere uma mudança de nome para a API
useFoi avaliado positivamente o adiamento do lançamento para resolver o problema de suspense em paralelo
Há uma dúvida sobre se é possível construir o hook
useActionStatecom base nos hooks internos já existentesFoi avaliado positivamente o acréscimo de recursos que incentivam o uso de tecnologias web padrão e melhoram a qualidade de vida