mas o que é React? • É a biblioteca mais popular da atualidade, com mais de 22 milhões de downloads no último mês no NPM. • Utilizado em diversos sites de alto tráfego, como The New York Times, Twitter, Netflix, MDN e, é claro, nas nossas marcas. React é uma biblioteca JavaScript para construção de interfaces de usuário.
| BIT Tech Week Code Splitting com React.Suspense e React.lazy() • Disponível a partir da versão 16.6 • Permite fazer uma espécie de lazy loading de componentes, reduzindo o tamanho do bundle e melhorando a performance. • Ainda não está disponível no React DOM Server.
| BIT Tech Week Concurrent mode • Disponível como instável a partir da versão 16.6 • Permite renderizar componentes sem bloquear a main thread. • Ainda não possui documentação.
esperar? | BIT Tech Week React Hooks • Disponível a partir da versão 16.8 • Terá suporte a partir da versão 0.59 do React Native • Permite usar o estado (state) e outros recursos do React fora de classes (class). • São completamente retrocompatíveis • Site com mais receitas de Hooks: http://usehooks.com
esperar? | BIT Tech Week useState() • Não mescla o estado antigo com o novo • Precisa somente do estado inicial • Pode ser chamado mais de uma vez no componente • o estado não precisa ser um objeto, mas se quiser pode Link de exemplo: https://codesandbox.io/s/usestateexemplo-u31hv
esperar? | BIT Tech Week useEffect() • Serve ao mesmo propósito do componentDidMount(), componentDidUpdate() e componentWillUnmount() • Pode ser chamado mais de uma vez no mesmo componente • É executado após o render (incluindo o primeiro) • Também podem especificar como “limpar” as mudanças usando return Link de exemplo: https://codesandbox.io/s/useeffectexemplo-o721b
updates de 2019 React.Suspense para fetch de dados • Está sendo chamado de React Cache pelo core team • Provavelmente será lançado no meio do ano • Bibliotecas como o Apollo e o Relay poderão ser integradas • Seu uso ainda não é recomendado, tendo em vista a falta de diversos recursos básicos de cache
updates de 2019 React.Suspense para server-side rendering • É o foco do core team para 2019 • A proposta é incluir a espera por dados assíncronos no servidor, sem causar double rendering (ou o famoso pulinho) • Ainda não tem data prevista para lançamento
React.Suspense e React.lazy() Disponíveis a partir da versão 16.6 Permitem o code splitting Concurrent mode Disponível como instável a partir da versão 16.6 Não bloqueia a main thread ao renderizar componentes React.Hooks Disponível a partir da versão 16.8 Permite utlizar o state e outros recursos fora de classes React.Suspense para fetch de dados e server-side rendering Sem data de lançamento Permite carregar dados progressivamente e em partes
esperar? | BIT Tech Week • Roadmap do React: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html • Code splitting com React: https://reactjs.org/docs/code-splitting.html • Overview de Hooks: https://reactjs.org/docs/hooks-overview.html • Site com mais receitas de Hooks: http://usehooks.com • Comparação entre os maiores frameworks JavaScript: https://npmcharts.com/compare/react,vue,angular?minimal=true&interval=30