Τι είναι το useContext στο React;

Το useContext είναι ένα hook στο React που επιτρέπει σε λειτουργικά συστατικά να εγγραφούν στις αλλαγές του context. Παρέχει έναν τρόπο μετάδοσης δεδομένων μέσω του δέντρου των συστατικών χωρίς να χρειάζεται να περνάτε ρητά props σε κάθε επίπεδο.

Αρχή λειτουργίας:

1. Δημιουργία context: Χρησιμοποιείται το React.createContext() για τη δημιουργία ενός αντικειμένου context. Αυτό το αντικείμενο περιέχει έναν Provider και έναν Consumer (ή χρησιμοποιεί το useContext σε λειτουργικά συστατικά).
2. Παροχή τιμής: Το component Provider του context περικλείει το δέντρο των συστατικών που χρειάζονται πρόσβαση στην τιμή. Μέσω της prop value περνάει η τιμή που θα είναι διαθέσιμη σε όλα τα συνδρομημένα components.
3. Λήψη τιμής: Το useContext(MyContext) καλείται μέσα σε ένα λειτουργικό συστατικό, όπου το MyContext είναι το προηγουμένως δημιουργημένο context. Το hook επιστρέφει την τρέχουσα τιμή του context. Όταν η τιμή του context αλλάζει, το component που χρησιμοποιεί το useContext ανανεώνεται αυτόματα.

Πλεονεκτήματα:

• Εύκολη μετάδοση δεδομένων: Απομακρύνει την ανάγκη "prop drilling" μέσω πολλαπλών ενδιάμεσων components.
• Παγκόσμια κατάσταση: Χρησιμοποιείται για τη διαχείριση της παγκόσμιας κατάστασης της εφαρμογής (π.χ. θέμα, αυθεντικοποίηση, τοπικοποίηση).
• Απόδοση: Το React βελτιστοποιεί την ανανέωση των components που χρησιμοποιούν το useContext, ανανεώνοντας μόνο αυτά που είναι συνδρομημένα στις αλλαγές του context.

Μειονεκτήματα:

• Δυσκολία αποσφαλμάτωσης: Μπορεί να είναι πιο δύσκολο να εντοπίσετε από πού προέρχεται η τιμή του context σε σύγκριση με τα props.
• Απόδοση με συχνές ενημερώσεις: Αν η τιμή του context ενημερώνεται πολύ συχνά, αυτό μπορεί να οδηγήσει σε συχνές ανανεώσεις όλων των components που είναι συνδρομημένα.

Παράδειγμα:

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

// 1. Δημιουργία context
const ThemeContext = createContext('light');

// Component παροχής
function ThemeProvider({ children }) {
  const theme = 'dark'; // Παράδειγμα τιμής
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Component που χρησιμοποιεί το context
function ThemedComponent() {
  // 3. Λήψη της τιμής του context
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Θέμα: {theme}</div>;
}

// Εφαρμογή
function App() {
  return (
    <ThemeProvider> {/* 2. Παροχή τιμής */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;