Context API

O Context API é um recurso do React, uma biblioteca popular de JavaScript para construir interfaces de usuário. Ele fornece uma maneira de passar dados pela árvore de componentes sem ter que passar props manualmente em cada nível.

O Context permite que você defina um estado "global" que pode ser acessado e atualizado por qualquer componente na árvore. Isso pode ser útil para compartilhar dados como o status de autenticação do usuário atual, preferências de tema ou configurações de idioma.

Para usar o Context API, você primeiro cria um objeto Context usando a função createContext(). Esse objeto tem dois componentes: um Provider e um Consumer. O Provider é usado para envolver os componentes que precisam de acesso ao contexto, e o Consumer é usado para acessar os dados no contexto de dentro desses componentes.

Aqui está um exemplo:

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

  const ThemeContext = createContext();
  
  function App() {
    const [theme, setTheme] = useState('light');
    
    return (
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <div className={`App ${theme}`}>
          ...
        </div>
      </ThemeContext.Provider>
    );
  }
  
  function ChildComponent() {
    return (
      <ThemeContext.Consumer>
        {({ theme, setTheme }) => (
          <button onClick={() => setTheme('dark')}>
            {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
          </button>
        )}
      </ThemeContext.Consumer>
    );
  }

Neste exemplo, o estado theme e a função setTheme são passados através do objeto value do Provider. Em seguida, o componente ChildComponent usa o Consumer para acessar o theme e a setTheme e renderiza um botão que alterna o tema entre claro e escuro.