React v16.6.0: lazy, memo e contextType

Hoje estamos lançando o React 16.6 com alguns novos recursos convenientes. Uma forma de utilizar o PureComponent / shouldComponentUpdate para componentes de função, uma maneira de fazer a divisão de código usando Suspense e uma maneira mais fácil de consumir o Contexto de componentes de classe.

Confira o changelog completo abaixo.

React.memo

Os componentes de classe podem não ser renderizados quando seus objetos de entrada são os mesmos usando PureComponent ou shouldComponentUpdate. Agora você pode fazer o mesmo com componentes de função envolvendo-os React.memo.

const MyComponent = React.memo(function MyComponent(props) {
  /* só re-renderiza se as prop forem alteradas */
});

React.lazy: Divisão de código com Suspense

Você pode ter visto a talk do Dan sobre React Suspense na JSConf Iceland. Agora você pode usar o componente Suspense para fazer a divisão de código agrupando uma importação dinâmica em uma chamada React.lazy().

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

O componente Suspense também permitirá que os autores da biblioteca iniciem a busca de dados com o suporte ao Suspense no futuro.

Nota: Esse recurso ainda não está disponível para renderização no lado do servidor. O suporte para suspense será adicionado em uma versão posterior.

static contextType

No React 16.3 introduzimos a API de Contexto oficial como uma substituição à API de Context Legado.

const MyContext = React.createContext();

Ouvimos comentários de que a adoção da nova API de suporte de renderização pode ser difícil em componentes de classe. Então, adicionamos uma conveniente API para consumir um valor de contexto de dentro de um componente de classe.

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* realizar um efeito colateral na montagem do componente usando o valor do MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* renderizando algo baseado no valor de MyContext */
  }
}

static getDerivedStateFromError()

O React 16 introduziu Error Boundaries para gerenciar os erros lançados nas renderizações do React. Já tivemos o componentDidCatch um método de ciclo de vida que é acionado depois que um erro já aconteceu. É ótimo para registrar erros no servidor. Ele também permite mostrar uma interface do usuário diferente para o usuário, chamando setState.

Antes que seja disparado, processamos null no lugar da árvore que gerou um erro. Isso às vezes interrompe os componentes pai que não esperam que seus representantes estejam vazios. Ele também não funciona para se recuperar de erros no servidor, pois os ciclo de vida Did não são acionados durante a renderização no lado do servidor.

Estamos adicionando outro método de erro que permite renderizar a interface do usuário de fallback antes que a renderização seja concluída. Veja os documentos para getDerivedStateFromError().

Nota: getDerivedStateFromError() ainda não está disponível para renderização no lado do servidor. Ele será projetado para funcionar com a renderização do lado do servidor em uma versão futura. Estamos liberando isso cedo para que você possa começar a se preparar para usá-lo.

Depreciações no StrictMode

Na versão 16.3 introduzmos o componente StrictMode. Ele permite que você aceite alertas antecipados quanto a padrões que possam causar problemas no futuro.

Adicionamos mais duas API’s na lista de depreciados no StrictMode. Se você não usa o StrictMode não precisa se preocupar pois esses avisos não serão disparados por você.

• ReactDOM.findDOMNode() - Esta API normalmente é mal compreendida e a maioria dos usos dela é desnecessária. Também pode ser surpreendentemente lento no React 16. Veja a documentação para possíveis atualizações.
• Legacy Context usando contextTypes e getChildContext - Contexto legado torna o React um pouco mais lento e maior do que o necessário. É por isso que queremos incentivar a atualização para a nova context API. Espero que a adição da contextType API torne isso um pouco mais fácil.

Se você está com problemas para fazer upgrade, gostaríamos de receber seus comentários.

Instalação

React v16.6.0 está disponível no npm.

Para instalar o React 16 com Yarn, execute:

yarn add react@^16.6.0 react-dom@^16.6.0

Para instalar o React 16 com npm, execute:

npm install --save react@^16.6.0 react-dom@^16.6.0

Nós também fornecemos compilações UMD de React via CDN:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Consulte a documentação para instruções detalhadas de instalação.

Changelog

React

• Adicione o React.memo() como uma alternativa PureComponent para funções. (@acdlite em #13748)
• Adicione o React.lazy() para componentes de divisão de código. (@acdlite em #13885)
• React.StrictMode agora avisa sobre a API de contexto legado. (@bvaughn em #13760)
• React.StrictMode agora avisa sobre findDOMNode. (@sebmarkbage em #13841)
• Renomeie unstable_AsyncMode para unstable_ConcurrentMode. (@trueadm em #13732)
• Renomeie unstable_Placeholder para Suspense, e delayMs para maxDuration. (@gaearon em #13799 e @sebmarkbage em #13922)

React DOM

• Adicionado contextType como uma maneira mais ergonômica de se inscrever no contexto de uma classe. (@bvaughn em #13728)
• Adicionado getDerivedStateFromError método de ciclo de vida para capturar erros futuros e assíncronos do lado do servidor. (@bvaughn em #13746)
• Avisa quando <Context> é chamado ao invés de <Context.Consumer>. (@trueadm em #13829)
• Corrigido a sobreposição cinza no iOS Safari. (@philipp-spiess em #13778)
• Corrigido um bug causado pela substituição window.event no desenvolvimento. (@sergei-startsev em #13697)

React DOM Server

• Adicionado suporte para React.memo(). (@alexmckenley em #13855)
• Adicionado suporte para contextType. (@alexmckenley em @sebmarkbage em #13889)

Scheduler (Experimental)

• Renomeado o pacote para scheduler. (@gaearon em #13683)
• Suportar níveis de prioridade, continuações e retornos de chamada agrupados. (@acdlite em #13720 e #13842)
• Melhorado o mecanismo de fallback em ambientes non-DOM (@acdlite em #13740)
• Agendado requestAnimationFrame antes. (@acdlite em #13785)
• Corrigido a detecção do DOM para ser mais completa. (@trueadm em #13731)
• Corrigir erros com o rastreamento de interação. Corrigir erros com o rastreamento de interação.(@bvaughn em #13590)
• Adicionado a transformação envify ao pacote. (@mridgway em #13766)