Como atualizar o contexto em um componente filho em React JS

Neste artigo você aprenderá a atualizar o contexto em um componente filho, uma ação bem importante na Context API

Fala programador(a), beleza? Bora aprender mais sobre React JS!

No ecossistema do React, o Contexto é uma das ferramentas mais poderosas para gerenciar estados globais e passar dados entre componentes sem a necessidade de “prop drilling”.

No entanto, um desafio comum é entender como atualizar esse contexto de dentro de um componente filho.

Neste artigo, exploraremos como você pode efetivamente atualizar o contexto em um componente filho no React.

Entendendo o Contexto no React

O que é o Contexto?

O Contexto é uma API no React que permite compartilhar valores entre componentes sem ter que passar explicitamente uma prop através de todos os níveis do componente.

É útil quando você tem valores que precisam ser acessados por vários componentes em diferentes níveis da árvore.

Como funciona?

A API Context consiste principalmente em três partes: React.createContext, <Context.Provider> e <Context.Consumer> (ou useContext Hook).

React.createContext: Cria um novo objeto Context.

const MeuContexto = React.createContext(valorDefault);

<Context.Provider>: Um componente React que permite que os componentes consumidores se inscrevam nas mudanças de contexto.

<MeuContexto.Provider value={/* algum valor */}>

<Context.Consumer> ou useContext: Permite a um componente “consumir” o valor atual do contexto.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Atualizando o Contexto de um Componente Filho

Agora, vamos ao cerne deste artigo: como atualizar o contexto a partir de um componente filho.

Criando um Contexto com useState

Primeiro, crie um contexto que também fornece uma função para atualizar o valor desse contexto.

import React, { useState } from 'react';

const MeuContexto = React.createContext();

export const MeuProvider = ({ children }) => {
  const [valor, setValor] = useState("valor inicial");

  return (
    <MeuContexto.Provider value={{ valor, setValor }}>
      {children}
    </MeuContexto.Provider>
  );
};

Neste exemplo, o valor é o estado que queremos compartilhar, e setValor é a função que permite atualizar esse estado.

Consumindo o Contexto e Atualizando o Valor

Em qualquer componente filho, você pode consumir o contexto e usar a função setValor para atualizar o valor do contexto.

import React, { useContext } from 'react';
import { MeuContexto } from './path-to-context';

const ComponenteFilho = () => {
  const { valor, setValor } = useContext(MeuContexto);

  return (
    <div>
      <p>O valor atual é: {valor}</p>
      <button onClick={() => setValor("novo valor")}>
        Atualizar Valor
      </button>
    </div>
  );
};

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Ao trabalhar com Contexto em React, é crucial lembrar-se de encapsular a árvore de componentes com o <Context.Provider>. Sem isso, os componentes filho não terão acesso ao valor do contexto e às funções de atualização.

Utilizar o Contexto desta forma permite uma abordagem mais modular e limpa para gerenciar o estado global e as ações em aplicativos React.

Além disso, ao combinar o Contexto com outros hooks, como useReducer, você pode criar soluções de gerenciamento de estado ainda mais robustas e flexíveis.

Em resumo, a API Context do React é uma ferramenta poderosa que, quando usada corretamente, pode simplificar significativamente o fluxo de dados em aplicativos React de todos os tamanhos.

Ao fornecer funções de atualização junto com os valores do contexto, você permite que os componentes filhos interajam e modifiquem o contexto de maneira otimizada e moderna.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.

Exportando o contexto e criando um hook próprio:

Repara num detalhe que trava MUITA gente: o componente filho importa o MeuContexto, então ele precisa estar exportado lá no arquivo do contexto, e não só o Provider

E já que a gente está aqui, tem um jeito melhor de consumir isso: criar um hook próprio, que além de deixar o código mais limpo já te avisa quando você esqueceu o Provider

import React, { createContext, useContext, useState } from 'react'

export const MeuContexto = createContext(null)

export const MeuProvider = ({ children }) => {

return (
{children}
</MeuContexto.Provider>
)
}

export const useMeuContexto = () => {
const contexto = useContext(MeuContexto)

if (!contexto) {
throw new Error('useMeuContexto precisa estar dentro do MeuProvider')
}

return contexto
}

Aí no filho fica só isso:

const { valor, setValor } = useMeuContexto()

Parece firula, mas te salva do erro clássico de destructuring de undefined, que na real só quer dizer uma coisa: o componente está fora da árvore do Provider 🙂

Por que meu contexto não atualiza?

Esse é o ponto onde a maioria trava, então bora listar as causas mais comuns

O componente está fora do Provider

Se o filho não tem o <MeuContexto.Provider> acima dele na árvore, ele lê o valor default do createContext e nunca vê a atualização

O estado até muda, só que ninguém avisa aquele componente

Você mutou o valor em vez de criar um novo

Clássico com array e objeto:

// não funciona, o React não vê mudança
const adicionar = (item) => {
lista.push(item)
setLista(lista)
}

// funciona, referência nova
const adicionar = (item) => {
}

O Provider está sendo remontado

Se você declara o Provider dentro de um componente que remonta a cada navegação ou a cada render de um pai, o estado volta pro inicial e parece que "nada salva"

O Provider fica por fora, envolvendo a árvore, geralmente lá no topo da aplicação

Tome cuidado com isso, já me ferrei tentando entender por que o valor resetava sozinho haha

Contexto e re-render: o cuidado que quase ninguém toma

Tem um efeito colateral que o exemplo simples esconde: todo componente que consome o contexto renderiza de novo quando o valor muda

O ajuste é memorizar o valor:

import React, { createContext, useMemo, useState } from 'react'

export const MeuProvider = ({ children }) => {

return (
<MeuContexto.Provider value={contexto}>
{children}
</MeuContexto.Provider>
)
}

E tem uma segunda técnica bem massa quando a árvore cresce: separar em dois contextos, um só com o valor e outro só com a função de atualizar

Assim quem só dispara a atualização (um botão, por exemplo) não renderiza de novo toda vez que o valor muda

Se você conhece a ideia de separar leitura de escrita num banco, é o mesmo espírito aplicado no front =)

Atualizando o contexto com useReducer:

Quando as atualizações deixam de ser "troca esse valor" e viram várias ações diferentes, o useState começa a espalhar lógica pela aplicação inteira

Aí entra o useReducer, que centraliza as regras num lugar só e entrega uma função dispatch pro filho:

const reducer = (estado, acao) => {
switch (acao.tipo) {
case 'incrementar':
return { ...estado, total: estado.total + 1 }
case 'resetar':
return { ...estado, total: 0 }
default:
return estado
}
}

export const MeuProvider = ({ children }) => {
0 })

return (
{children}
</MeuContexto.Provider>
)
}

No filho, atualizar vira uma ação com nome:

const { estado, dispatch } = useContext(MeuContexto)

<button onClick={() => dispatch({ tipo: 'incrementar' })}>
Somar
</button>

A vantagem é que o filho não precisa saber COMO o estado muda, ele só diz o que aconteceu

Quando o Contexto NÃO é a melhor escolha:

Contexto é ótimo pra estado que muda pouco e é lido por muita gente: tema, usuário logado, idioma, carrinho

Agora, pra dado que vem de API, ele resolve só metade do problema

Contexto não faz cache, não deduplica requisição repetida, não sabe revalidar nada quando o dado fica velho

Se você está guardando resposta de API dentro de um contexto e escrevendo loading e erro na mão em todo lugar, provavelmente o caso pede uma solução de data fetching, não gerenciamento de estado global

E pra estado que muda muitas vezes por segundo (input controlado, animação, drag), contexto costuma ser tiro no pé pelo re-render em cascata

Saber a hora de NÃO usar vale tanto quanto saber usar, beleza?