O que é Contexto no React?

Mar 09 2023

Props vs Contexto Olá, Mundo! Ao desenvolver um aplicativo, podemos precisar passar dados de um componente para outro. Às vezes, o cenário seria um pouco complexo, onde precisamos passar dados de n-ésimos filhos do componente X para m-ésimos filhos do componente Y.

Adereços vs Contexto

Olá Mundo!

Ao desenvolver um aplicativo, podemos precisar passar dados de um componente para outro. Às vezes, o cenário seria um pouco complexo, onde precisamos passar dados de n-ésimos filhos do componente X para m-ésimos filhos do componente Y.

Usar “Props” é uma das maneiras de fazer isso. No entanto, é um componente aninhado, então teremos que encadear vários props até chegarmos ao nosso componente desejado.

Vejamos um exemplo:

No diagrama acima, vamos considerar se queremos passar o valor da valvariável do componente Xpara o componente c, que é o terceiro filho do componente Y. Se estivermos passando pelos props, seria assim: estaremos passando o val de Xpara Y, depois Ypara a, depois apara be finalmente de bpara c. Este é um longo encadeamento de props de Xa c. Mas, e se tivermos 100 filhos para o componente Y e tivermos que passar o valor para o 100º componente de Y. Não podemos escrever 100 props em uma cadeia. Para este cenário, podemos usar a ContextAPI de reação.

Context é uma API integrada no react, introduzida na v16.3. O contexto nos permite passar valor de um componente para outro diretamente, sem passar pela árvore de componentes. O contexto armazena os valores separadamente, para que os dados estejam disponíveis universalmente em todo o aplicativo.

É assim que o Contexto funcionaria logicamente:

Como implementá-lo?

É muito simples criar um contexto. Podemos criar um contexto como este:

import { createContext } from "react";
export const NameOfContext = createContext('initial value')

import {NameOfContext} from './path/to/context'
export default function App() {
    return (
        // Here the "val" is the context value and "setVal" is the function used to change the context value
        <ThemeContext.Provider value={{val, setVal}}>
            <div className="main-container">
                .
                .
                .
                .
            </div>
        </ThemeContext.Provider>

import {NameOfContext} from './path/to/context'

const Component = () => {
    // destructing the value and function with useContext hook
    const {val, setVal} = useContext(NameOfContext)
    return (
        <div>
            <!-- Assuming the val is 0 and on clicking the button, we are incrementing by 1 -->
            <button onClick={() => setVal(val+1)}>{val}</button>
        </div>
    )
}

export default Component

Eu usei o Contexto em um dos casos de uso em meu site. Eu estava implementando um tema escuro para meu site, onde o tema deveria alternar entre escuro e claro ao clicar em um botão.

Para implementar isso, criei um ThemeContext, que armazena o valor do tema, seja ele 'dark'ou 'light'. Estarei definindo o valor de contexto no componente que contém o botão de alternância. Para o restante dos componentes, obterei o valor de contexto e aplicarei classes CSS com base no valor de contexto.

Abaixo estão algumas implementações no meu site:

Criei ThemeContext.jsum arquivo, onde criei e inicializei o contexto com 'light'.

No App.jsarquivo, coloquei coisas dentro <ThemeContext.Provider>de tag.

No header.jsx, o arquivo que contém o botão de alternância, estou usando o themepara definir os estilos dos temas e setThemepara atualizar o contexto quando o botão é clicado.

O que é Contexto no React?

Adereços vs Contexto

Como implementá-lo?

Prós e contras

Prós