React Context: como, onde, quando?

o que é context?

o context é um lugar onde você pode colocar dados que vão ser usados dentro de uma certa parte da sua aplicação


          const themes = {
            light: {
              foreground: "#000000",
              background: "#eeeeee"
            },
            dark: {
              foreground: "#ffffff",
              background: "#222222"
            }
          };

          const ThemeContext = React.createContext(themes.light);
        

pra que o context serve?

evitar vazamento/replicação de props (prop drilling)

tornar um grupo de componentes mais flexível

criação de bibliotecas de componentes/design systems (usamos no confetti!)

conjuga bem com a estratégia de compound components (composição de componentes)/custom hooks

React.createContext

retorna um contexto:

const MeuContexto = React.createContext(valorInicial);

contém dois componentes: MeuContexto.Provider e MeuContexto.Consumer

o Provider é obrigatório, mas temos várias formas de consumir os dados

MeuContexto.Provider

delimita a fronteira com os componentes que vão poder consumir o dado do contexto

é um componente que recebe uma prop value

atualizando o valor da prop, o contexto é atualizado, e quem consome, rerenderiza


          
        

pode ser consumido de três formas:

ComponenteSemHooks.contextType

MeuContexto.Consumer

useContext

contextType


          class ComponenteSemHooks extends React.Component {
            componentDidMount() {
              const value = this.context;
              /* side-effect na montagem utilizando o valor de MyContext */
            }
            render() {
              const value = this.context;
              /* renderiza algo com base no valor de MyContext */
            }
          }
          // depois de definir o componente, declaramos qual o contexto
          ComponenteSemHooks.contextType = MeuContexto;
        

contextType: prós e contras

facilita o uso em componentes de classe

limita o uso a apenas um contexto

MeuContexto.Consumer


          
        

MeuContexto.Consumer: prós e contras

não precisa usar o contextType

podemos usar múltiplos contextos em um só componente

deixa a sintaxe BEM feia, já que a função interna é necessária

useContext


          
        

useContext: prós e contras

é de longe a forma mais limpa de consumir contextos

podemos usar múltiplos contextos em um só componente

limitado a componentes funcionais

dito isso, quando usar?

praticamente nunca :B

cai bem para bibliotecas de componentes, ou componentes 100% reutilizáveis (Tabs, Modais, etc.)

pode ser usado para gerência de temas

quando dados dependem de onde estão sendo usados

quando não usar?

não use para dados globais, prefira algo como o redux/recoil/jotai

não use para evitar prop-drillings leves: compor os componentes ou replicar as props pode ser mais desejável

Referências

API do createContext

API do useContext

Obrigado! :]

Animação de uma festa, com uma zebra dançando

ratamero.com