O que há de novo no React 16? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 02 Min 35 Seg Tempo restante da oferta: 14 02 35 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que há de novo no React 16? [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # O que há de novo no React 16? O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16.jpg) Olá, Web Developers! O React, agora na sua 16ª versão, foi totalmente reescrito, mas tenha calma que não haverá grandes quebras. Caso sua aplicação esteja usando a versão 15.6, pode migrar sem se preocupar. ![](https://dkrn4sk0rn31v.cloudfront.net/2017/11/06174510/84966ce90c828f38ebd3436cb08d01d4-1.png) O Twitter Lite já está usando a versão 16 e perceberam uma redução no tamanho dos arquivo e melhora na performance. [ ![React Native - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-fundamentos) ## As principais novidades Dentre as novidades, destacamos: #### Licença MIT Houve muita discussão sobre o React ter adotado a licença BSD+Patents. Agora você pode usar o React sem se preocupar com patentes, pois agora ele está sob a [Licença MIT](https://pt.wikipedia.org/wiki/Licen%C3%A7a_MIT "licença MIT"). #### Ainda mais leve! Mesmo com novas funcionalidades, o tamanho agora da biblioteca diminuiu cerca de 32%. **Versão 15** - react - 20.7kb (6.9kb com gzip) - react-dom - 141kb (42.9kb com gzip) **Versão 16** - react - 5.3kb (2.2kb com gzip) - react-dom - 103.7kb (32.6kb com gzip) #### Tratamento de Erros Antes um erro em um componente poderia quebrar a aplicação. Agora podemos colocar em nossos componentes o método `componentDidCatch()` para tratar erros. #### Render com Arrays, Strings e Numbers Quem trabalha com React sabe que o método `render()` sempre deve retornar um único elemento. Caso você queira retonar uma lista de elementos, você deve criar um container para eles. Agora você pode retornar um Array de elementos. Por ser um Array, você ainda precisará adicionar o atributo `key` aos elementos. ```js render() { return [ item 1, item 2, item 3, ]; } ``` E também pode-se retornar uma simples String: ```js render() { return 'Hello TreinaWeb!'; } ``` #### Suporte para atributos personalizados Antes os atributos que a gente passava para o HTML ou SVG que não fossem reconhecidos eram ignorados. Agora o React os mantém. ```html ``` #### Portals O React 16 te permite inserir um elemento filho em um local diferente no DOM, fora da sua árvore principal. [ ![Next.js - Aplicações Dinâmicas](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/next-js.svg) Curso Next.js - Aplicações Dinâmicas Conhecer o curso ](https://www.treinaweb.com.br/curso/nextjs-aplicacoes-dinamicas) Imagine o seguinte cenário: ```html ``` Agora imagine que você tenha um componente na div “root”. Com `Portals` você pode pegar este componente e mandar renderizá-lo na div `my-portal`. **Um exemplo de uso:** se tiver um elemento que deva aparecer na página e reaparecer ao abrir uma modal, teríamos que chamar nosso componente em dois lugares (na página e na modal) e passar as propriedades para ele. Com `Portals` bastaria indicar o elemento que se quer pegar e onde quer exibí-lo. Precisa alterar alguma propriedade passada para o componente? Altere apenas em um lugar. ![](https://dkrn4sk0rn31v.cloudfront.net/2017/11/13132043/face_modal.png) No Facebook, quando você inicia um vídeo e começa a navegar, o vídeo aparece em uma modal para te permitir navegar e continuar vendo o vídeo. Isso poderia ser feito facilmente com `Portals`. #### Retornando null em setState() Antes a função `setState()` apenas atualizava um valor do estado do componente. Agora podemos colocar uma função dentro de `setState()`. Se esta função retornar `null`, o estado não é atualizado. ```js const newNumber = 7; this.setState(state => { if(state.myNumber === newNumber){ return null; }else{ return {myNumber: newNumber}; } }); ``` No código acima verificamos se o `newNumber` é igual ao número que temos no estado do componente. Caso sim, retornamos `null`, o que evitará mudança no estado do componente. [ ![Material UI - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/material-ui.svg) Curso Material UI - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/material-ui-fundamentos) ## O que ficou obsoleto? Algumas alterações que podem causar quebras em relação às versões anteriores: - Descontinuação do suporte aos React-Add-ons - Chamar `setState()` com `null` não dispara mais atualizações - Chamar `setState()` diretamente dentro de `render()` sempre causa atualizações. - Callbacks de `setState()` agora são disparados após `componentDidMount()` ou `componentDidUpdate()`. - `ReactDOM.render()` e `ReactDOM.unstable_renderIntoContainer()` agora retornam `null` se forem chamados de dentro de um método do lifecycle. Ah, não deixe de conhecer o nosso curso de React: Um abraço e até a próxima! ;) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #ReactJS ](https://www.treinaweb.com.br/blog/tag/reactjs) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155108/React-Hooks-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ React: Conheça o Poder dos Hooks ](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks) Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27113042/react-native-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é o React Native? ](https://www.treinaweb.com.br/blog/o-que-e-o-react-native) Veja neste artigo o que é o React Native. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/05141731/JSX-1-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é JSX? ](https://www.treinaweb.com.br/blog/o-que-e-jsx) Veja neste artigo o que é o JSX. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Conheça o React, biblioteca para desenvolvimento Web ](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web) Veja neste artigo o que é o React, biblioteca JavaScript para desenvolvimento web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/react-17-conheca-o-que-vai-mudar-no-jsx-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ React 17 - Conheça o que vai mudar no JSX ](https://www.treinaweb.com.br/blog/react-17-conheca-o-que-vai-mudar-no-jsx) Veja o que teremos de diferente no JSX a partir do React 17 e como isso irá influenciar suas aplicações daqui para frente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27110853/REDUX-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ O que é Redux? ](https://www.treinaweb.com.br/blog/o-que-e-redux) Confira neste artigo o que é Redux. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 02min 35s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58