Contexto no React

Antes de prosseguir para o estudo do próximo hook, precisamos considerar o conceito de contexto no React.

Geralmente, passávamos dados de componentes pais para componentes filhos usando props. Esse método é bom se você não tem muitos componentes e não precisa passar props do componente pai para o componente desejado através de componentes filhos mais de 2-3 vezes.

Este método também pode se tornar extremamente inconveniente e levar a vários problemas, se os props intermediários não forem utilizados de forma alguma nesses componentes (esse problema é chamado de prop drilling), ou se você precisar passar os mesmos dados para um grande número de componentes.

Nesses casos, o contexto pode nos ajudar, pois permite que os dados do componente pai sejam disponibilizados para qualquer componente filho, independentemente de sua localização na árvore de componentes, sem passá-los através de props. Consequentemente, apenas os componentes que precisam deles irão receber os dados.

Para usar o contexto, precisamos criá-lo. Primeiro, vamos criar o arquivo MyContext.js e importar a função createContext para ele:

MyContext.jsximport { createContext } from 'react';

Agora vamos criar o objeto de contexto, gravá-lo na variável MyContext, que não devemos esquecer de exportar. No nosso caso, definimos o valor inicial em createContext como null, pois não é crucial para nós (poderíamos ter deixado apenas parênteses vazios). O valor padrão definido aparecerá ao ler o contexto, se nenhum outro for encontrado. Este valor pode ser de qualquer tipo:

MyContext.jsxexport const MyContext = createContext(null);

Na próxima lição, criaremos um aplicativo composto por vários componentes, localizados em arquivos separados. Se todos os componentes estivessem em um único arquivo, não criaríamos um arquivo separado para o contexto e nem o exportaríamos.

Agora vamos importar MyContext.js no componente vazio App - o componente do qual pretendemos transmitir dados:

App.jsximport { MyContext } from './MyContext.js';