React Context API

O que é?

Normalmente numa aplicação React, nós passamos informações através do componentes de cima para baixo, como um funil, através de props. Porém de acordo com a complexidade da aplicação e com a reutilização de componentes, esse envio de props pode-se mostrar totalmente ineficiente e confuso.

Usando o contexto, é possível criar uma área que compartilha todos os dados para os componentes pertencente à esse contexto e com isso diminuir e muito o envio das informações comuns à diversos componentes.

Quando usar?

Contexto (context como é descrito no React) é indicado para compartilhar dados dentro da área em comum que podem ser considerados “globais”. Normalmente alguns casos que nós usamos são usuário autenticado, idioma preferido ou valores que são pertencentes à mais de um componente da mesma árvore de componentes.

Como usar?

No exemplo do código a seguir, nós passamos um tema para a fim de estilizar o componente Header porém também vamos usar esse tema para estilizar o componente Footer.

Código sem (context)

class App extends React.Component {
  render() {
    return <div>
      <Header tema="dark" />
      <Footer tema="dark" />
    </div>
  }
}

function Header(props) {
  return (
    <div>
      <HeaderButton tema={props.tema} />
    </div>
  );
}

function Footer(props) {
  return (
    <div>
      <FooterLink tema={props.tema} />
    </div>
  );
}

class HeaderButton extends React.Component {
  render() {
    return <Button tema={this.props.tema} />;
  }
}

class FooterLink extends React.Component {
  render() {
    return <Link tema={this.props.tema} />;
  }
}

• Note que tivemos que passar o tema do component APP para os components Header e Footer e depois repassar para os components HeaderButton e FooterLink
• Se fosse necessário ter o tema em outros N components teríamos que repassar para eles também

Código com (context)

// Criamos um contexto (context) para o tema atual (com "light" como padrão).
const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Header />
        <Footer />
      </ThemeContext.Provider>
    );
  }
}

function Header(props) {
  // Esse componente não precisa mais enviar a props tema explicitamente
  return (
    <div>
      <HeaderButton />
    </div>
  );
}

function Footer(props) {
  // Esse componente não precisa mais enviar a props tema explicitamente
  return (
    <div>
      <FooterLink />
    </div>
  );
}

class HeaderButton extends React.Component {
  // O React vai encontrar o Provider (é como a gente chama o contexto) mais próximo
  // E vai usa-lo
  static contextType = ThemeContext;

  render() {
    return <Button tema={this.context} />;
  }
}

class FooterLink extends React.Component {
  static contextType = ThemeContext;

  render() {
    return <Link tema={this.context} />;
  }
}

• Note que agora declaramos o contexto no component APP e depois colocamos todos os components abaixo dele como filhos deste contexto
• Feito isto basta chamarmos “static contextType = ThemeContext;” para ter acesso ao contexto em qualquer component que esteja na árvore do <ThemeContext.Provider … >
• Assim fica mais fácil propagar um contexto porque não precisamos ficar repassando ele de pai para filho através da árvore de components

Considerações finais

O Context veio como solução para gerenciamento de informações que são muitas vezes usados, dentro de um contexto específico, porém ele não foi feito para substituir um gerenciador de estados como Redux e sim complementa-los.

O principal objetivo do Context é evitar o props drilling, ou seja, vazamento de props que é exatamente o envio de props por diversos componentes, porém para gerenciamentos mais complexos e de diversas informações e ações ao mesmo tempo, vale considerar o uso de uma biblioteca como o Redux para te auxiliar nessa tarefa.

Existem duas situações que a equipe do React não te recomenda utilizar o Context, a primeira delas é quando você precisa passar a informação adiante uma vez ou poucas, sem muitas complexidades. E por ser algo tão simples, você não deveria se preocupar com o Context e a outra situação é quando o compartilhamento torna a reutilização dos seus componentes tão difíceis que você também não deveria utilizar somente o Context e sim um gerenciador de estados também