Ce este useContext în React?

useContext este un hook în React care permite componentelor funcționale să se aboneze la modificările contextului. Oferă o modalitate de a transmite date prin arborele de componente fără a fi nevoie să pasezi explicit props la fiecare nivel.

Principiul de funcționare:

1. Crearea contextului: Se folosește React.createContext() pentru a crea un obiect de context. Acest obiect conține un Provider și un Consumer (sau se folosește useContext în componentele funcționale).
2. Furnizarea valorii: Componenta Provider a contextului înfășoară arborele de componente care trebuie să aibă acces la valoare. Prin prop-ul value se transmite valoarea care va fi disponibilă pentru toate componentele abonate.
3. Obținerea valorii: useContext(MyContext) este apelat în interiorul unei componente funcționale, unde MyContext este contextul creat anterior. Hook-ul returnează valoarea curentă a contextului. Când această valoare se schimbă, componenta care folosește useContext se re-renderizează automat.

Avantaje:

• Ușurința în transmiterea datelor: Elimină necesitatea "prop drilling" prin multiple componente intermediare.
• Stare globală: Este util pentru gestionarea stării globale a aplicației (de exemplu, tema, autentificarea, localizarea).
• Performanță: React optimizează re-renderizarea componentelor care folosesc useContext, re-renderizând doar cele abonate la schimbările contextului.

Dezavantaje:

• Dificultate în depanare: Poate fi mai dificil să urmărești de unde provine valoarea contextului comparativ cu props-urile.
• Performanță cu actualizări frecvente: Dacă valoarea contextului se actualizează foarte des, poate duce la re-render-uri frecvente ale tuturor componentelor abonate.

Exemplu:

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

// 1. Crearea contextului
const ThemeContext = createContext('light');

// Componenta provider
function ThemeProvider({ children }) {
  const theme = 'dark'; // Valoare exemplu
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Componenta care utilizează contextul
function ThemedComponent() {
  // 3. Obținerea valorii din context
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Aplicație
function App() {
  return (
    <ThemeProvider> {/* 2. Furnizarea valorii */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;