How to fix Too many component layers with prop drilling in React

// Create the context
const ThemeContext = React.createContext<Theme | undefined>(undefined);

// Create a provider component
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = React.useState<Theme>("light");
  
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

// Use the context anywhere without prop drilling
export function useTheme() {
  const context = React.useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be used within ThemeProvider");
  return context;
}

// In deeply nested components
function DeepComponent() {
  const theme = useTheme(); // No props needed
  return <div style={{ background: theme === "dark" ? "#000" : "#fff" }} />;
}

// BEFORE: State at root, drilled through many layers
function App() {
  const [isOpen, setIsOpen] = useState(false);
  return <Level1 isOpen={isOpen} setIsOpen={setIsOpen} />;
}

function Level1({ isOpen, setIsOpen }) {
  return <Level2 isOpen={isOpen} setIsOpen={setIsOpen} />;
}

function Level2({ isOpen, setIsOpen }) {
  return <Modal isOpen={isOpen} setIsOpen={setIsOpen} />;
}

// AFTER: State moved to where it is used
function App() {
  return <ModalSection />;
}

function ModalSection() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  );
}

// BEFORE: Data drilled through intermediate component
function Page({ userData }) {
  return <UserSection userData={userData} />;
}

function UserSection({ userData }) {
  return <UserCard userData={userData} />;
}

function UserCard({ userData }) {
  return <div>{userData.name}</div>;
}

// AFTER: Composition pattern, no drilling needed
function Page({ userData }) {
  return (
    <UserSection>
      <UserCard name={userData.name} />
    </UserSection>
  );
}

function UserSection({ children }) {
  return <div className="section">{children}</div>;
}

// Using Zustand (lightweight and simple)
import { create } from "zustand";

const useAuthStore = create((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

// Use in any component without drilling
function Profile() {
  const { user, logout } = useAuthStore();
  return (
    <div>
      {user?.name}
      <button onClick={logout}>Logout</button>
    </div>
  );
}

// HOC pattern
function withTheme(Component) {
  return function ThemedComponent(props) {
    const theme = useTheme();
    return <Component {...props} theme={theme} />;
  };
}

const ThemedButton = withTheme(Button);

// Custom Hook pattern (preferred in modern React)
function useThemeProps() {
  return { theme: useTheme() };
}

function Button() {
  const { theme } = useThemeProps();
  return <button style={{ color: theme.color }} />;
}

// BEFORE: Too many component layers
function App() {
  const [count, setCount] = useState(0);
  return <Container count={count} setCount={setCount} />;
}

function Container({ count, setCount }) {
  return <Content count={count} setCount={setCount} />;
}

function Content({ count, setCount }) {
  return <Counter count={count} setCount={setCount} />;
}

// AFTER: Combine when the hierarchy is unnecessary
function App() {
  const [count, setCount] = useState(0);
  return (
    <Container>
      <Counter count={count} onIncrement={() => setCount(count + 1)} />
    </Container>
  );
}