46 - Context API

46 - Context API

1. 1. Um recurso do React que facilita o compartilhamento de dados entre os componentes

   • 2. Quando há necessidade de dados globais, provavelmente utilizaremos o Context.
     • 3. Quando há muitas idas e vindas de props, também deve se considerar o context.
       • 4. Geralmente ficam na pasta context.

2. 1. Alterando o contexto

   • Agora vamos exibir e alterar o valor do contexto
     • 2. Vamos utilizar o hook useContext para trazar o nosso contexto aos componentes.
       • 3. E com este hook é possível trazer a função que alterar o seu valor

3. 1. Criando o provider

   • O provider vai delimitar o escopo do contexto
     • 2. Ou seja, em que componentes teremos acesso aos dados
       • 3. O provider deve encapsular os componentes que precisam do context
         • 4. Geralmente é colocado em main.jsx
           • 5. O provider tem a prop children, para inserirmos elementos dentro

4. 1. Refatorando contexto com hook

   • Podemos criar um hook e trabalhar o contexto nele
     • 2. Concentramos o useContex em um só local, que será no hook
       • 3. E há um intervalo para uma possível validação na alteração do contexto

5. 1. Contexto mais complexo

   • podem necessitar de variações no comportamento
     • 2. Por isso o mais indicado é utilizar o hook useReducer
       • 3. Ele funciona como um useState, mas com mais possibilidades

6. 1. Criando o contexto

   • O primeiro passo é criar o Context.
     • 2. O arquivo tem a primeira letra maiúscula, como nos componentes, e geralmente termina com Context;
       • Exemplo: AlgumContext.js
         • 3. Convenção é deixar na pasta context em src
           • 4. Onde utilizamos o contexto, o arquivo precisa ser importado