DEV Community

Gabriel_Silvestre
Gabriel_Silvestre

Posted on

Iniciando em Context API

Context API

O que é?

É uma ferramenta nativa do React a partir da versão 16.3.0.

O que faz?

Tem como objetivo facilitar o controle e manipulação de estados dentro de uma aplicação, podendo ser classificada como um gerenciador de estados assim como o Redux. Porém, diferentemente do Redux, a Context API vem de forma nativa no React, além de possuir algumas peculiaridades.

Em projetos pequenos e médios pode ser uma alternativa ao Redux, porém em aplicações maiores a Context API pode gerar alguns problemas de organização, isso é devido a liberdade que ela nós da enquanto desenvolvedores. Projetos maiores, por vezes exigem uma estrutura mais robusta, rígida e "visual" para facilitar a escalabilidade.

Sintaxe

Criação de Contexto

Para criarmos um contexto devemos utilizar a função createContext(), atribuindo seu resultado a uma constante, essa que deverá ser exportada.

const SomeContext = createContext();
export default SomeContext;
Enter fullscreen mode Exit fullscreen mode

Com o contexto criado e exportado, precisamos definir o componente que irá iniciar o contexto, tendo o componente definido tudo que precisamos fazer é encapsular os componentes filhos com o Provider, passando os estados e funções a serem compartilhados através de props. Essa prop se chama value e normalmente irá receber um objeto contendo os estados e funções a serem utilizados em outros componentes.

class SomeComponent extends Component {
  render() {
    return (
      <SomeContext.Provider value={}>
        <OtherComponent />
        <AnotherComponent />
      </SomeContext.Provider>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Consumindo Contexto

Para consumir o contexto utilizamos uma sintaxe similar a do Provider, com a diferença que iremos receber o value ao invés de passá-lo e no lugar de .Provider utilizamos .Consumer. Para consumir o value, devemos utilizar uma função anônima dentro do .Consumer, essa função irá receber o value como parâmetro.

class OtherComponent extends Component {
  render() {
    return (
      <div>
        <SomeContext.Consumer>
          {(value) => {}}
        </SomeContext.Consumer>
      </div>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Context Provider

O que é?

É um componente React que deverá encapsular outros componentes, a fim de disponibilizar os estados do contexto a todos os componentes ali encapsulados.

Quais podem ser?

O único requisito para que um componente se torne Provider é possuir em seu render() o Context.Provider encapsulando outros componentes. Logo qualquer componente pode ser um Provider, com a exceção dos Consumers, os quais não são recomendados a se tornarem Providers.

Organização pessoal

Uma forma de se organizar é criar um componente exclusivo como Provider, dessa forma separamos toda a parte lógica, da parte visual. Todos os estados e funções devem ficar no Provider e toda a parte visual deve ficar nos Consumers.

const MyContext = createContext();
export default class MyContextComponent extends Component {
  render() {
    <MyContext.Provider value={}>
      {this.props.children}
    </MyContext.Provider>
  }
}
Enter fullscreen mode Exit fullscreen mode

Com o componente criado acima, podemos chamá-lo para encapsular o resto dos componentes que fazem sentido, sendo que os componentes filhos podem apenas chamar os estados e funções conforme for necessário, sem a necessidade de escrever lógica no componente filho.

Lembrando que não é “proibido” escrever a parte lógica nos componentes filhos (Consumers), porém para melhor organização, podemos centralizar tudo no componente Provider.


Observações

Todos os Links disponibilizados nesse artigo, levam ao seu respectivo conteúdo na documentação oficial do React.

Discussion (1)

Collapse
leboralli profile image
Leandro Boralli

Obrigado!