Usando o React Context API Facilmente

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.

Sem utilizar o contexto (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} />;
  }
}

class App extends React.Component {

render() {

return <div>

</div>

}

function Header(props) {

return (

<div>

</div>

);

}

function Footer(props) {

return (

<div>

</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

Utilizando o contexto (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} />;
  }
}

// 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">

</ThemeContext.Provider>

);

}

function Header(props) {

// Esse componente não precisa mais enviar a props tema explicitamente

return (

<div>

</div>

);

}

function Footer(props) {

// Esse componente não precisa mais enviar a props tema explicitamente

return (

<div>

</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 MobX ou 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 ou MobX 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.

Documentação oficial do Context – React

Uma outra forma para compartilhar estados no React (mais próxima ao Redux porém mais simples) é usar o Recoil, nós temos um excelente post aqui no OneBitCode mostrando exatamente como usando o Recoil no seus APPs: Recoil: Gerencie estados no React facilmente (passo a passo)

Obrigado por ler este artigo, se você gostou dele, compartilhe com seus amigos, isso nos ajuda e motiva a levar mais conhecimento a mais pessoas. Se você quiser contribuir com sua opinião, estarei de olho nos comentários, 👀.

Até a próxima e um grande abraço.
Matheus Mello

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
📱 • https://instagram.com/one_bit_code
🐦 • online dating letting them down gently zoosk

Nossos cursos:

🥇 • search dating sites by email address
💎 • dating show
⚙ • online dating succes stories over 60
🐞 • https://onebitcode.com/free-online-dating-sites-in-germany-without-payment/

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

5 1 vote

Article Rating

setembro 4, 2020

Posts | Cursos

Matheus Mello

Um estudante de 25 anos que gosta de compartilhar o conhecimento obtido.

Website :

4 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Paulo

2 anos atrás

Legal mas muito batido, todo mundo faz esse exemplo. Seria legal um exemplo realmente mais próximo do dia a dia

Responder

Andrecio

2 anos atrás

Reply to Paulo

E com hooks, afinal é o que vale agora

Responder

Matheus

2 anos atrás

Reply to Paulo

Muito obrigado pelo comentário, será feito 😉

Responder

Sabrina

1 ano atrás

Sinceramente não entendi nada

Responder

Usando o React Context API Facilmente

O que é?

Quando usar?

Como usar?

Considerações finais

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

Nossas redes sociais:

Nossos cursos:

Matheus Mello

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!