Iniciando em Context API
Tags: javascript, webdev, beginners, react
Published: 2022-01-20 17:53:46

## [Context API](https://pt-br.reactjs.org/docs/context.html#gatsby-focus-wrapper)

### 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](https://pt-br.reactjs.org/docs/context.html#reactcreatecontext)
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;
```

__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>
    )
  }
}
```

#### [Consumindo Contexto](https://pt-br.reactjs.org/docs/context.html#contextconsumer)
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>
    )
  }
}
```

___

## [Context Provider](https://pt-br.reactjs.org/docs/context.html#contextprovider)

### 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>
  }
}
```

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.