Advanced React.js: Context API, Performance Optimization, and Global Architecture (Part 3)

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

// 1. Instantiate the global context broadcast channel
const CoreAppContext = createContext();

// 2. Build a high-level wrapper Provider component to hold global state
export function AppContextProvider({ children }) {
  const [currentUser, setCurrentUser] = useState({
    name: "Puneet Tiwari",
    role: "Full Stack Engineer",
    isAuthenticated: true
  });
  const [systemTheme, setSystemTheme] = useState("dark-mode");

  function toggleGlobalTheme() {
    setSystemTheme(prev => prev === "dark-mode" ? "light-mode" : "dark-mode");
  }

  return (
    // Exposing values and methods globally to the entire child tree
    <CoreAppContext.Provider value={{ currentUser, systemTheme, toggleGlobalTheme }}>
      {children}
    </CoreAppContext.Provider>
  );
}

// 3. Create a clean custom hook for consumers to safely tap into values
export function useGlobalApp() {
  const contextValue = useContext(CoreAppContext);
  if (!contextValue) {
    throw new Error("useGlobalApp must be safely wrapped inside an AppContextProvider");
  }
  return contextValue;
}

import React from 'react';
import { useGlobalApp } from './AppContext';

function DeepNestedSidebar() {
  // Smoothly extract exactly what we need without single line of prop drilling
  const { currentUser, systemTheme, toggleGlobalTheme } = useGlobalApp();

  return (
    <aside className={`sidebar-panel ${systemTheme}`}>
      <div className="user-profile-badge">
        <h4>Operator: {currentUser.name}</h4>
        <small>Clearance Level: {currentUser.role}</small>
      </div>
      
      <button className="theme-toggle-action" onClick={toggleGlobalTheme}>
        Switch to {systemTheme === "dark-mode" ? "Light View" : "Dark View"}
      </button>
    </aside>
  );
}

import React, { useState, useMemo, useCallback } from 'react';
import DataDisplayGrid from './DataDisplayGrid'; // Wrapped in React.memo internally

function HeavyAnalyticsEngine() {
  const [dataRecords, setDataRecords] = useState([120, 450, 890, 230, 670, 990, 410]);
  const [searchQuery, setSearchQuery] = useState("");

  // useMemo caches the computational result of heavy array math operations
  const calculatedMaxPeak = useMemo(() => {
    console.log("Running intensive data analysis calculation... ");
    return Math.max(...dataRecords);
  }, [dataRecords]); // Recalculates ONLY if the underlying dataRecords array changes

  // useCallback caches the function reference instance, preventing recreation
  const handleRecordPurge = useCallback((targetIndex) => {
    setDataRecords(prevRecords => prevRecords.filter((_, idx) => idx !== targetIndex));
  }, []); // Empty dependencies mean this reference instance stays perfectly static

  return (
    <div className="analytics-dashboard">
      <h3>Enterprise Processing Matrix</h3>
      <p>Calculated Peak Metric: <strong>{calculatedMaxPeak}</strong></p>
      
      <input 
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Filter layout view..."
      />
      
      {/* DataDisplayGrid will NOT re-render when user types in the input box */}
      <DataDisplayGrid items={dataRecords} onPurge={handleRecordPurge} />
    </div>
  );
}

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { AppContextProvider, useGlobalApp } from './AppContext';

function LabResourceControlCenter() {
  const { systemTheme } = useGlobalApp();
  const [hardwareNodes, setHardwareNodes] = useState([]);
  const [systemAlerts, setSystemAlerts] = useState(0);

  // Asynchronous resource loading engine using clean fetch patterns inside lifecycles
  useEffect(() => {
    async function establishClusterConnection() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error("Network connection disrupted");
        const networkPayload = await response.json();
        setHardwareNodes(networkPayload);
      } catch (err) {
        console.error("Cluster orchestration error:", err.message);
      }
    }
    establishClusterConnection();
  }, []);

  // Optimizing node metadata aggregation mapping via useMemo
  const processedClusterHealth = useMemo(() => {
    console.log("Recalculating node health diagnostics...");
    return hardwareNodes.map(node => ({
      nodeId: node.id,
      coreIdentity: node.username,
      networkStatus: node.id % 3 === 0 ? "⚠️ Warning" : "🟢 Operational"
    }));
  }, [hardwareNodes]);

  // Callback memoization for interactive control switches sent down lists
  const toggleNodeIntervention = useCallback((id) => {
    setSystemAlerts(count => count + 1);
    console.log(`Dispatched system override sequence to terminal node index: ${id}`);
  }, []);

  return (
    <div className={`control-grid-wrapper ${systemTheme}`}>
      <header className="control-header">
        <h2>Active Server Rack Topology</h2>
        <div className="status-pill">Active Interventions Flagged: {systemAlerts}</div>
      </header>

      <div className="topology-layout">
        {processedClusterHealth.map((clusterNode) => (
          <div className="node-row-strip" key={clusterNode.nodeId}>
            <span>Terminal: {clusterNode.coreIdentity}</span>
            <span className="health-tag">{clusterNode.networkStatus}</span>
            <button onClick={() => toggleNodeIntervention(clusterNode.nodeId)}>
              Trigger Diagnostic Override
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

// Final architectural shell routing export wrapping providers securely
export default function MainApplicationShell() {
  return (
    <AppContextProvider>
      <main className="production-app-container">
        <LabResourceControlCenter />
      </main>
    </AppContextProvider>
  );
}