Como Funciona a Context API

Em React Native/Expo, a Context API é uma maneira eficiente de compartilhar dados entre vários componentes sem precisar passar props manualmente de um componente pai para seus filhos, o que pode ser especialmente útil em aplicações com estruturas de componentes complexas. A função getContext em React Native não existe diretamente; o correto é usar React.createContext() e os hooks como useContext() para acessar dados de um contexto globalmente.

Como Funciona a Context API

1. Criação do Contexto:
   Você primeiro cria um contexto com React.createContext(). Esse contexto pode conter qualquer valor que você deseja compartilhar, como um objeto de estado ou funções.
2. Provider:
   O Provider é um componente que “envolve” seus componentes filhos e fornece o valor do contexto para eles. Qualquer componente dentro da árvore que for envolvido por esse Provider pode acessar os dados fornecidos.
3. useContext Hook:
   Para acessar os dados fornecidos pelo contexto, os componentes filhos usam o hook useContext(). Esse hook permite ler o valor do contexto diretamente, sem a necessidade de prop drilling (passar dados por múltiplos níveis de componentes).

Exemplo de Uso Completo do Context

Aqui está um exemplo detalhado de como usar o Context API para passar dados em um aplicativo React Native/Expo.

1. Criação do Contexto e Provider

import React, { createContext, useState } from 'react';
import { View, Text, Button } from 'react-native';

// Cria o contexto
const UserContext = createContext();

// Componente Provider que vai fornecer o contexto
const UserProvider = ({ children }) => {
  const [user, setUser] = useState("John Doe");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

// Componente principal da aplicação
export default function App() {
  return (
    <UserProvider>
      <View>
        <Text>App Component</Text>
        <UserDisplay />
        <UserChange />
      </View>
    </UserProvider>
  );
}

2. Usando o Contexto com useContext

Agora que o UserProvider está fornecendo o valor do contexto, podemos acessar esse valor em qualquer componente filho usando o hook useContext.

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { UserContext } from './path_to_context_file';

// Componente que exibe o nome do usuário
const UserDisplay = () => {
  const { user } = useContext(UserContext); // Acessa o valor do contexto
  return (
    <View>
      <Text>Usuário Atual: {user}</Text>
    </View>
  );
};

// Componente que permite alterar o nome do usuário
const UserChange = () => {
  const { setUser } = useContext(UserContext); // Acessa a função setUser do contexto
  return (
    <View>
      <Button title="Trocar Usuário" onPress={() => setUser("Jane Doe")} />
    </View>
  );
};

Explicação Passo a Passo:

1. Criação do Contexto:

• Criamos o UserContext usando createContext(). Este contexto vai armazenar o nome do usuário e uma função para alterá-lo.

1. UserProvider:

• O UserProvider é o componente que envolve a árvore de componentes. Ele contém o estado user e a função setUser. Esses valores são passados para o UserContext.Provider, o que permite que qualquer componente “filho” que esteja dentro de UserProvider acesse esses valores.

1. useContext:

• Nos componentes UserDisplay e UserChange, usamos o hook useContext(UserContext) para acessar diretamente o user e a função setUser. O useContext facilita o acesso aos dados do contexto sem precisar passar props manualmente por todos os componentes.

Benefícios do Context API:

• Reduz o Prop Drilling: Com o Context API, não é necessário passar dados manualmente por cada nível de componentes, o que simplifica muito o código em aplicações com estruturas complexas.
• Reutilização de Dados: O mesmo contexto pode ser usado em múltiplos componentes, tornando-o fácil de compartilhar dados globalmente pela aplicação.
• Flexibilidade: Você pode armazenar no contexto qualquer tipo de dados, como objetos de estado, funções ou valores simples.

Como Passar Dados Sem Context API

Se você preferir não usar a Context API, pode passar dados diretamente entre componentes usando props ou usar bibliotecas externas de gerenciamento de estado, como Redux. Porém, essas abordagens podem complicar o código quando muitos componentes precisam compartilhar o mesmo estado, especialmente em grandes aplicativos.

Quando Usar o Context API?

A Context API é ideal quando:

• Múltiplos componentes precisam acessar os mesmos dados.
• Você deseja evitar o “prop drilling”, onde os dados são passados através de muitos níveis de componentes.
• Sua aplicação tem um estado global que deve ser acessível em várias partes da interface.