React Context - Compartilhamento de estado entre componentes sem prop drilling

[Romeusorionaet]

Exemplo de Compartilhamento de Estado com React Context

O React Context é utilizado para compartilhar estado entre componentes, evitando a necessidade de passar props manualmente através de muitos níveis de componentes ("prop drilling"). O exemplo abaixo demonstra como criar e utilizar um contexto para buscar e gerenciar dados de perfis e issues do GitHub.

1. Interfaces e Tipos

• GithubContextType: Define a forma do contexto, incluindo erros, estados de carregamento, dados do GitHub e uma função para buscar issues.

interface GithubContextType {
  errGithubDataProfile: Error | null;
  errGithubDataIssues: Error | null;
  isLoadingProfile: boolean;
  isLoadingIssues: boolean;
  githubDataProfile: GithubDataProps;
  githubDataIssues: GithubDataIssueProps[];
  fetchGithubSearchIssues: (search: string) => Promise<void>;
}

interface GithubContextProviderProps {
  children: ReactNode;
}

2. Criação do Contexto

• GithubContext: Contexto criado com um valor inicial vazio tipado como GithubContextType.

export const GithubContext = createContext({} as GithubContextType);

3. Provider do Contexto

O GithubContextProvider encapsula os componentes filhos e fornece o estado e as funções definidas no contexto.

export function GithubContextProvider({ children }: GithubContextProviderProps) {
  const [search, setSearch] = useState('');

  const {
    data: githubDataProfile,
    isLoading: isLoadingProfile,
    error: errGithubDataProfile,
  } = useQuery({
    queryKey: ['profile-github'],
    queryFn: async () =>
      apiGithub.get(`/users/Romeusorionaet`).then((response) => response.data),
    staleTime: 86400000, // 24 horas
  });

  const {
    data: githubDataIssues = [],
    isLoading: isLoadingIssues,
    error: errGithubDataIssues,
    refetch,
  } = useQuery({
    queryKey: [`issues-github`, search],
    queryFn: () =>
      apiGithub
        .get(
          `/search/issues?q=${search}%20repo:Romeusorionaet/${nameRepoOfIssue.myPortfolio}`,
        )
        .then((response) => response.data.items),
    staleTime: 86400000, // 24 horas
  });

  const fetchGithubSearchIssues = async (searchTerm: string) => {
    if (searchTerm.trim()) {
      setSearch(searchTerm);
      await refetch();
    }
  };

  return (
    <GithubContext.Provider
      value={{
        errGithubDataProfile,
        errGithubDataIssues,
        isLoadingProfile,
        isLoadingIssues,
        githubDataProfile,
        githubDataIssues,
        fetchGithubSearchIssues,
      }}
    >
      {children}
    </GithubContext.Provider>
  );
}

4. Uso do Contexto

Os componentes filhos podem acessar o estado e as funções fornecidas pelo contexto usando o hook useContext.

import { useContext } from 'react';
import { GithubContext } from './GithubContext';

function SomeComponent() {
  const {
    githubDataProfile,
    githubDataIssues,
    isLoadingProfile,
    isLoadingIssues,
    fetchGithubSearchIssues,
  } = useContext(GithubContext);

  // Use os dados e funções do contexto aqui
}

FIle

Resumo

Neste exemplo, o React Context é usado para fornecer um estado global que pode ser acessado por qualquer componente filho do GithubContextProvider. Ele gerencia os estados de carregamento, erros, dados de perfil do GitHub e issues, além de uma função para buscar issues, evitando a passagem manual de props através de múltiplos níveis de componentes. Isso simplifica o gerenciamento de estado em aplicativos React complexos.