O que é useContext no React?

useContext é um hook no React que permite aos componentes funcionais subscreverem-se às alterações de contexto. Ele fornece uma forma de passar dados através da árvore de componentes sem precisar passar explicitamente props em cada nível.

Princípio de funcionamento:

1. Criação do contexto: Usa-se React.createContext() para criar um objeto de contexto. Este objeto contém um Provider e um Consumer (ou usa-se useContext em componentes funcionais).
2. Fornecer valor: O componente Provider do contexto envolve a árvore de componentes que precisam de acesso ao valor. O valor é passado através da prop value e estará disponível para todos os componentes subscritos.
3. Obter valor: useContext(MyContext) é chamado dentro de um componente funcional, onde MyContext é o contexto criado anteriormente. O hook devolve o valor atual do contexto. Quando esse valor muda, o componente que usa useContext é re-renderizado automaticamente.

Vantagens:

• Facilidade na passagem de dados: Elimina a necessidade de "prop drilling" através de múltiplos componentes intermediários.
• Estado global: Útil para gerir o estado global da aplicação (por exemplo, tema, autenticação, localização).
• Performance: React otimiza o re-render de componentes que usam useContext, re-renderizando apenas aqueles que estão subscritos às mudanças.

Desvantagens:

• Dificuldade na depuração: Pode ser mais difícil rastrear de onde vem o valor do contexto em comparação com os props.
• Performance com atualizações frequentes: Se o valor do contexto for atualizado com muita frequência, pode levar a re-renderizações frequentes de todos os componentes subscritos.

Exemplo:

import React, { createContext, useContext } from 'react';

// 1. Criação do contexto
const ThemeContext = createContext('light');

// Componente provedor
function ThemeProvider({ children }) {
  const theme = 'dark'; // Valor de exemplo
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Componente que usa o contexto
function ThemedComponent() {
  // 3. Obter o valor do contexto
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Aplicação
function App() {
  return (
    <ThemeProvider> {/* 2. Fornecer valor */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;