Closed andre06santos closed 1 day ago
Resumo geral sobre o que eu entendi sobre Prop Drilling (Perfuração das Props):
Basicamente, o Prop Drilling consiste em passar props (dados) de um componente para outro. Ou seja, esses dados são "perfurados" através de vários intermediários até o componente de destino. Às vezes, o uso desse processo se torna inviável, pois acaba tornando o código difícil de manter e até de entender, especialmente quando a árvore de componentes é bastante profunda.
Por isso, surgiu uma alternativa no React para resolver esse problema, permitindo que os dados sejam passados por debaixo dos panos, sem a necessidade de transmiti-los através de vários componentes que não vão utilizá-los. A solução é o Contexto, que resolve o problema do Prop Drilling, permitindo que os dados sejam acessados diretamente por qualquer componente, independentemente da sua posição na "árvore de componentes".
Sua utilização garante:
Ex: (Utilizando o Props):
import React from "react";
interface Props {
nome: string;
}
const Filho = (props: Props) => {
return <h1>Olá, {props.nome}!</h1>;
};
const Pai = () => {
return <Filho nome="André Santos" />;
};
export default Pai;
Ex: (Usando context):
import React, { createContext, useContext } from "react";
interface ContextProps {
nome: string;
}
const NomeContext = createContext<ContextProps | undefined>(undefined);
const Filho = () => {
const context = useContext(NomeContext);
if (!context) {
throw new Error("Filho deve ser usado dentro de um Provedor de NomeContext");
}
return <h1>Olá, {context.nome}!</h1>;
};
const Pai = () => {
return (
<NomeContext.Provider value={{ nome: "André Santos" }}>
<Filho />
</NomeContext.Provider>
);
};
export default Pai;
Atenção: resolver este problema por último
Este mini projeto serve para entender como o contexto funciona no React.
<Avo />
,<Pai />
e<Filho />
(em diretórios separados)Cada um desses componentes será uma
div
(oAvo
conterá oPai
e oPai
conterá oFilho
)provider.tsx
que será o componente que envolverá oApp
O esperado é que uma variável que existe apenas no
provider.tsx
seja acessada no componenteFilho
sem usar propsObs.: o contexto resolve o problema da "perfuração das props" (Prop Drilling)