React - Ciclo de vida e context API

Na versão 16.3.0, que foi lançada em 29 de março de 2018, teve a adição de novos métodos para o ciclo de vida dos componentes e nova API.

Métodos de ciclo de vida

No ciclo de vida dos componentes existem métodos para controlarmos o fluxo de montar, atualizar e desmontar cada elemento. E com essa versão do React, três métodos estão sendo depreciados: componentWillMount, componentWillReceiveProps, e componentWillUpdate. E foram adicionados dois novos métodos:

• getDerivedStateFromProps – adicionado como uma alternativa mais segura do método componentWillReceiveProps. Executado tanto na inicialização do componente quanto na sua atualização de propriedades e deve retornar as alterações no estado do componente baseada nas propriedades ou nulo.
• getSnapshotBeforeUpdate – adicionado para oferecer suporte à leitura segura de propriedades. Todo valor retornado por esse método é enviado ao componentDidUpdate que é o ciclo executado posteriormente.

Context API

Sempre existiu uma Context API, mas era instável e com diversos problemas relacionados à performance. Eu particularmente já usava para uma questão de tema e gostei muito da estabilide que veio nessa versão.

Ao compartilhar informações entre componentes totalmente desconexos você terá que utilizar a arquitetura flux com Redux. Com a nova Context API conseguimos facilmente repassar informações de qualquer tipo entre diversos componentes do React.

Precisaremos ver 3 coisas: React.createContext, Provider e Consumer.

Abaixo, temos o componente filho Title e ainda não estamos usando a nova API de contexto.

class App extends Component {
  state = {
    ttile: 'Esse é um título'
  }
 
  render() {
    const { title } = this.state;
    return (
      {tenant && 
        <div className="container">
          <Title />
        </div>
      }
    );
  }
}

Vamos começar criando uma variável de contexto com o comando React.createContext passando como parâmetro o valor padrão quando nenhum valor existir nessa variável.

const ExampleContext = React.createContext('example');

A variável ExampleContext já pode ser considerada uma variável de contexto. Para alterar o seu valor, precisamos utilizar um componente chamado Provider que pertence à essa variável:

render() {
  const { title } = this.state;
  return (
    <ExampleContext.Provider value={title}>
      {title && 
        <div className="container">
          <Title />
        </div>
      }
    </ExampleContext.Provider>
  );
}

Assim, criamos um ExampleContext.Provider com uma única propriedade chamada value que é responsável por prover o valor da variável de contexto.

Agora o componente Title, consome o ExampleContext:

function Title() {
  return (
    <ExampleContext.Consumer>
      {title => (
        <h1>{title}</h1>
      )}
    </ExampleContext.Consumer>
  );
}

Com o ThemeContext.Consumer podemos utilizar esses dados e trabalhar com uma técnica chamada render props.

Sendo assim, você não vai mais precisar utilizar o Redux sempre que precisar compartilhar informações entre componentes, mas vale lembrar que a arquitetura Flux é muito mais do que simplesmente compartilhamento de dados, tem a ver com estrutura, com fluxo de informações e arquitetura dos dados da aplicação.

Para retornar o valor padrão que informamos na criação da variável ExampleContext, o componente não deverá possuir um Provedor correspondente acima dele na árvore. Isso pode ser útil para testar componentes isoladamente sem envolvê-los.

render() {
  const { title } = this.state;
  return (
    <div className="container">
      <Title />
    </div>
  );
}

// Saída: example

Mais pode ser visto na documentação oficial.

Considerações finais

Então vamos continuar precisando de um gerenciamento de estado mais complexo como o Redux e temos a API de contexto quando for necessário compartilhar algumas informações entre componentes.

Agora é ficar ligado nos novos métodos e prestar atenção nos que foram depreciados. A biblioteca está evoluindo muito bem e vamos botar a mão na massa.