andre06santos / bloco-de-notas

Projeto simples para treinar CRUD
1 stars 1 forks source link

Criar mini projeto Vite React TS #49

Closed andre06santos closed 1 day ago

andre06santos commented 6 days ago

Atenção: resolver este problema por último

Este mini projeto serve para entender como o contexto funciona no React.

Cada um desses componentes será uma div (o Avo conterá o Pai e o Pai conterá o Filho)

O esperado é que uma variável que existe apenas no provider.tsx seja acessada no componente Filho sem usar props

Obs.: o contexto resolve o problema da "perfuração das props" (Prop Drilling)

Thalis78 commented 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;