Advanced React Concepts

Senior-level documentation focusing on the why (architecture/trade-offs) rather than just the how (syntax). These patterns solve real production problems: Flexibility, Performance, and Maintainability.

🧱 Module 1: The "Element Prop" Pattern

Stop passing booleans and strings to control what renders! 🛑 The Element Prop pattern flips the script — instead of telling a component WHAT to render, you hand it the actual JSX. It's like giving someone a painting instead of paint-by-numbers instructions! 🎨🖼️

🟠 Impact: HIGH — Used extensively in Material UI, Ant Design, and Radix. This is how the pros build flexible component APIs! 💪

📋 In this section: Element props vs boolean props • Slot-based rendering • Decoupled component APIs • Performance benefits

💡 Benefits: Decoupling: The component doesn't need to import child components or know about their props. Performance: The passed elements are instantiated by the parent, so they don't necessarily re-render just because the parent re-renders (if they are memoized or static). 🚀

tsx

// ❌ Rigid & Hard to Maintain
// Card needs to know about Button, Icon, etc. - limited flexibility
const Button = ({ variant, children }) => <button className={variant}>{children}</button>;
const Icon = ({ name }) => <span>[{name}]</span>;
const UserProfile = () => <div>User content</div>;

type CardProps = {
  title: string;
  showEditButton?: boolean;
  showIcon?: boolean;
  iconName?: string;
  footerText?: string;
};

const Card = ({ title, showEditButton, showIcon, iconName, footerText, children }) => (
  <div className="card">
    <div className="header">
      <h1>{title}</h1>
      {showIcon && iconName && <Icon name={iconName} />}
      {showEditButton && <Button variant="ghost">Edit</Button>}
    </div>
    <div className="content">{children}</div>
    {footerText && <div className="footer">{footerText}</div>}
  </div>
);

function App() {
  return (
    <Card
      title="Profile"
      showEditButton={true}
      showIcon={false}
      iconName="user"
      footerText="Last updated: Today"
    >
      <UserProfile />
    </Card>
  );
}
export default App;

Preview

Console

tsx

// ✅ Flexible & Composable - Card doesn't care what you pass
import { ReactNode } from 'react';

const Button = ({ variant, children }) => <button className={variant}>{children}</button>;
const Link = ({ href, children }) => <a href={href}>{children}</a>;
const UserProfile = () => <div>User content</div>;

type CardProps = {
  title: string;
  headerAction?: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
};

const Card = ({ title, headerAction, footer, children }: CardProps) => (
  <div className="card">
    <div className="header">
      <h1>{title}</h1>
      <div className="actions">{headerAction}</div>
    </div>
    <div className="content">{children}</div>
    {footer && <div className="footer">{footer}</div>}
  </div>
);

function App() {
  return (
    <Card
      title="Profile"
      headerAction={<Button variant="ghost">Edit</Button>}
      footer={<span className="text-sm">Last updated: Today</span>}
    >
      <UserProfile />
    </Card>
  );
}
export default App;

Preview

Console

⚡ Module 2: Optimizing Context API (Split Context Pattern)

Your Context is probably causing more re-renders than you think! 😬 Every time ANY part of your context changes, EVERY consumer re-renders — even if they only use a tiny piece. The Split Context Pattern is like giving each consumer their own VIP subscription! 🎟️✨

🔴 Impact: CRITICAL — The #1 performance killer in large React apps. Fix this and watch your re-renders drop dramatically! 📉🔥

📋 In this section: Re-render blast radius • Context splitting • useMemo for stable references • Custom consumer hooks

💡 Benefits: Performance: Components that only need to trigger an action (like a LogoutButton) utilize the actions context. They will never re-render when the state changes. 🎯 Scalability: Prevents the "Context Hell" performance bottleneck in large apps. 🏗️

tsx

// ❌ The "God Object" - Any component using 'login' will re-render when 'user' changes
import { createContext, useContext, useState, ReactNode } from 'react';

type User = { id: string; name: string; email: string };

type AuthContextValue = {
  user: User | null;
  login: () => Promise<void>;
  logout: () => void;
};

const AuthContext = createContext<AuthContextValue | null>(null);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);
  
  const login = async () => {
    // ... login logic
    setUser({ id: '1', name: 'John', email: 'john@example.com' });
  };

  const logout = () => {
    setUser(null);
  };

  // 🛑 PROBLEM: If 'user' updates, this entire object reference changes
  // Every component using this context will re-render, even if they only
  // use the 'login' function and don't care about 'user' changes
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) throw new Error('useAuth must be used within AuthProvider');
  return context;
};

const LogoutButton = () => {
  const { logout } = useAuth();
  return <button onClick={logout}>Logout</button>;
};

function App() {
  return (
    <AuthProvider>
      <LogoutButton />
      <UserProfile />
    </AuthProvider>
  );
}
export default App;

Preview

Console

tsx

// ✅ Context Splitting - Separate state and actions
import { createContext, useContext, useState, useMemo, ReactNode } from 'react';

type User = { id: string; name: string; email: string };

// ✅ 1. Create two separate contexts
const AuthStateContext = createContext<User | null>(null);
const AuthActionsContext = createContext<{
  login: () => Promise<void>;
  logout: () => void;
} | null>(null);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);

  // ✅ 2. Memoize the actions so they are referentially stable
  // This object NEVER changes, so consumers of this context NEVER re-render.
  const actions = useMemo(() => ({
    login: async () => {
      // ... login logic
      setUser({ id: '1', name: 'John', email: 'john@example.com' });
    },
    logout: () => setUser(null)
  }), []); // Empty deps = stable reference forever

  return (
    <AuthActionsContext.Provider value={actions}>
      <AuthStateContext.Provider value={user}>
        {children}
      </AuthStateContext.Provider>
    </AuthActionsContext.Provider>
  );
};

// ✅ Custom Hooks for consumption
export const useUser = () => {
  const context = useContext(AuthStateContext);
  if (context === undefined) {
    throw new Error('useUser must be used within AuthProvider');
  }
  return context;
};

export const useAuthActions = () => {
  const context = useContext(AuthActionsContext);
  if (!context) {
    throw new Error('useAuthActions must be used within AuthProvider');
  }
  return context;
};

// Usage - LogoutButton NEVER re-renders when user changes!
const LogoutButton = () => {
  const { logout } = useAuthActions(); // ✅ Only subscribes to actions context
  return <button onClick={logout}>Logout</button>;
};

const UserProfile = () => {
  const user = useUser();
  return <div>{user?.name}</div>;
};

function App() {
  return (
    <AuthProvider>
      <LogoutButton />
      <UserProfile />
    </AuthProvider>
  );
}
export default App;

Preview

Console

🧮 Module 3: Less UseEffects (Derived State)

Stop putting EVERYTHING in useEffect! 🛑 It's the most overused hook in React and the source of countless race conditions, infinite loops, and mystery re-renders. If you can calculate it during render, DO IT during render. Your components will be simpler, faster, and bug-free! 🐛➡️✨

🔴 Impact: CRITICAL — useEffect abuse is the #1 source of bugs in React apps. Learn derived state and eliminate an entire category of bugs! 🎯

📋 In this section: useEffect overuse • Derived state with useMemo • Single vs double renders • When to actually use effects

💡 Why this matters: Derived state eliminates unnecessary re-renders, prevents race conditions, and makes the code more predictable. Effects should be reserved for synchronization with external systems (like connecting to a socket or observing DOM changes), not for transforming data. 🔌

tsx

// ❌ Bad: Double Render - effect syncs state (two renders)
import { useState, useEffect } from 'react';

type Item = { id: string; category: string; name: string };

const ProductList = ({ items, filter }) => {
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    setFilteredItems(items.filter(i => i.category === filter));
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const MOCK_ITEMS = [
  { id: '1', category: 'A', name: 'Item 1' },
  { id: '2', category: 'B', name: 'Item 2' },
  { id: '3', category: 'A', name: 'Item 3' },
];

function App() {
  const [filter, setFilter] = useState('A');
  return (
    <div>
      <button onClick={() => setFilter('A')}>Category A</button>
      <button onClick={() => setFilter('B')}>Category B</button>
      <ProductList items={MOCK_ITEMS} filter={filter} />
    </div>
  );
}
export default App;

Preview

Console

tsx

// ✅ Good: Single render - derive during render
import { useMemo, useState } from 'react';

type Item = { id: string; category: string; name: string };

const ProductList = ({ items, filter }) => {
  const filteredItems = useMemo(
    () => items.filter(i => i.category === filter),
    [items, filter]
  );

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const MOCK_ITEMS = [
  { id: '1', category: 'A', name: 'Item 1' },
  { id: '2', category: 'B', name: 'Item 2' },
  { id: '3', category: 'A', name: 'Item 3' },
];

function App() {
  const [filter, setFilter] = useState('A');
  return (
    <div>
      <button onClick={() => setFilter('A')}>Category A</button>
      <button onClick={() => setFilter('B')}>Category B</button>
      <ProductList items={MOCK_ITEMS} filter={filter} />
    </div>
  );
}
export default App;

Preview

Console

📌 When to Use useEffect

OK so when SHOULD you use useEffect? 🤔 Think of it as a bridge to the outside world — use it ONLY when you need to sync with something React doesn't control. Here's the definitive list! 📝

🔵 Impact: MEDIUM — Knowing when NOT to use useEffect is just as important as knowing when to use it. Master this mental model! 🧠

📋 In this section: Valid useEffect use cases • External system sync • Event listeners • Cleanup patterns

✅ Valid useEffect Use Cases:
• 🔌 Connecting to external APIs (WebSockets, REST subscriptions)
• 👂 Setting up event listeners (window resize, keyboard shortcuts)
• 📊 Integrating with third-party libraries (charts, maps)
• 🧹 Cleaning up resources (unsubscribing, removing listeners)
• 💾 Synchronizing with browser APIs (localStorage, history)

tsx

// ❌ Don't use useEffect for transforming data or user events
import { useState, useEffect } from 'react';

function App() {
  const [items] = useState([{ id: '1', category: 'A', name: 'Item 1' }]);
  const [filter] = useState('A');
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    setFilteredItems(items.filter(i => i.category === filter));
  }, [items, filter]);

  return (
    <div>
      <p>Anti-pattern: effect syncing state (causes extra render)</p>
      <ul>{filteredItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}
export default App;

Preview

Console

tsx

// ✅ Use useEffect for sync with external systems (e.g. resize)
import { useState, useEffect } from 'react';

function App() {
  const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>Window width: {width}px (resize to see)</div>;
}
export default App;

Preview

Console

BlogBack to Blog NextAdvanced React Hooks

// ❌ Rigid & Hard to Maintain

// Card needs to know about Button, Icon, etc. - limited flexibility

const Button = ({ variant, children }) => <button className={variant}>{children}</button>;

const Icon = ({ name }) => <span>[{name}]</span>;

const UserProfile = () => <div>User content</div>;

type CardProps = {

title: string;

showEditButton?: boolean;

showIcon?: boolean;

iconName?: string;

footerText?: string;

};

const Card = ({ title, showEditButton, showIcon, iconName, footerText, children }) => (

<h1>{title}</h1>

{showIcon && iconName && <Icon name={iconName} />}

{showEditButton && <Button variant="ghost">Edit</Button>}

</div>

<div className="content">{children}</div>

{footerText && <div className="footer">{footerText}</div>}

</div>

);

function App() {

return (

<Card

title="Profile"

showEditButton={true}

showIcon={false}

iconName="user"

footerText="Last updated: Today"

</Card>

);

}

export default App;

// ✅ Flexible & Composable - Card doesn't care what you pass

import { ReactNode } from 'react';

const Button = ({ variant, children }) => <button className={variant}>{children}</button>;

const Link = ({ href, children }) => <a href={href}>{children}</a>;

const UserProfile = () => <div>User content</div>;

type CardProps = {

title: string;

headerAction?: ReactNode;

footer?: ReactNode;

children: ReactNode;

};

const Card = ({ title, headerAction, footer, children }: CardProps) => (

<h1>{title}</h1>

<div className="actions">{headerAction}</div>

</div>

<div className="content">{children}</div>

{footer && <div className="footer">{footer}</div>}

</div>

);

function App() {

return (

<Card

title="Profile"

headerAction={<Button variant="ghost">Edit</Button>}

footer={<span className="text-sm">Last updated: Today</span>}

</Card>

);

}

export default App;

// ❌ The "God Object" - Any component using 'login' will re-render when 'user' changes

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

type User = { id: string; name: string; email: string };

type AuthContextValue = {

user: User | null;

logout: () => void;

};

const AuthContext = createContext<AuthContextValue | null>(null);

export const AuthProvider = ({ children }: { children: ReactNode }) => {

const [user, setUser] = useState<User | null>(null);

const login = async () => {

// ... login logic

setUser({ id: '1', name: 'John', email: 'john@example.com' });

};

const logout = () => {

setUser(null);

};

// 🛑 PROBLEM: If 'user' updates, this entire object reference changes

// Every component using this context will re-render, even if they only

// use the 'login' function and don't care about 'user' changes

return (

<AuthContext.Provider value={{ user, login, logout }}>

{children}

</AuthContext.Provider>

);

};

export const useAuth = () => {

const context = useContext(AuthContext);

if (!context) throw new Error('useAuth must be used within AuthProvider');

return context;

};

const LogoutButton = () => {

const { logout } = useAuth();

return <button onClick={logout}>Logout</button>;

};

function App() {

return (

</AuthProvider>

);

}

export default App;

// ✅ Context Splitting - Separate state and actions

import { createContext, useContext, useState, useMemo, ReactNode } from 'react';

type User = { id: string; name: string; email: string };

// ✅ 1. Create two separate contexts

const AuthStateContext = createContext<User | null>(null);

const AuthActionsContext = createContext<{

logout: () => void;

} | null>(null);

export const AuthProvider = ({ children }: { children: ReactNode }) => {

const [user, setUser] = useState<User | null>(null);

// ✅ 2. Memoize the actions so they are referentially stable

// This object NEVER changes, so consumers of this context NEVER re-render.

const actions = useMemo(() => ({

// ... login logic

setUser({ id: '1', name: 'John', email: 'john@example.com' });

logout: () => setUser(null)

}), []); // Empty deps = stable reference forever

return (

<AuthActionsContext.Provider value={actions}>

<AuthStateContext.Provider value={user}>

{children}

</AuthStateContext.Provider>

</AuthActionsContext.Provider>

);

};

// ✅ Custom Hooks for consumption

export const useUser = () => {

const context = useContext(AuthStateContext);

if (context === undefined) {

throw new Error('useUser must be used within AuthProvider');

}

return context;

};

export const useAuthActions = () => {

const context = useContext(AuthActionsContext);

if (!context) {

throw new Error('useAuthActions must be used within AuthProvider');

}

return context;

};

// Usage - LogoutButton NEVER re-renders when user changes!

const LogoutButton = () => {

const { logout } = useAuthActions(); // ✅ Only subscribes to actions context

return <button onClick={logout}>Logout</button>;

};

const UserProfile = () => {

const user = useUser();

return <div>{user?.name}</div>;

};

function App() {

return (

</AuthProvider>

);

}

export default App;

// ❌ Bad: Double Render - effect syncs state (two renders)

import { useState, useEffect } from 'react';

type Item = { id: string; category: string; name: string };

const ProductList = ({ items, filter }) => {

const [filteredItems, setFilteredItems] = useState([]);

useEffect(() => {

setFilteredItems(items.filter(i => i.category === filter));

}, [items, filter]);

return (

<ul>

{filteredItems.map(item => (

))}

</ul>

);

};

const MOCK_ITEMS = [

{ id: '1', category: 'A', name: 'Item 1' },

{ id: '2', category: 'B', name: 'Item 2' },

{ id: '3', category: 'A', name: 'Item 3' },

];

function App() {

const [filter, setFilter] = useState('A');

return (

<div>

<button onClick={() => setFilter('A')}>Category A</button>

<button onClick={() => setFilter('B')}>Category B</button>

</div>

);

}

export default App;

// ✅ Good: Single render - derive during render

import { useMemo, useState } from 'react';

type Item = { id: string; category: string; name: string };

const ProductList = ({ items, filter }) => {

const filteredItems = useMemo(

() => items.filter(i => i.category === filter),

[items, filter]

);

return (

<ul>

{filteredItems.map(item => (

))}

</ul>

);

};

const MOCK_ITEMS = [

{ id: '1', category: 'A', name: 'Item 1' },

{ id: '2', category: 'B', name: 'Item 2' },

{ id: '3', category: 'A', name: 'Item 3' },

];

function App() {

const [filter, setFilter] = useState('A');

return (

<div>

<button onClick={() => setFilter('A')}>Category A</button>

<button onClick={() => setFilter('B')}>Category B</button>

</div>

);

}

export default App;

// ❌ Don't use useEffect for transforming data or user events

import { useState, useEffect } from 'react';

function App() {

const [items] = useState([{ id: '1', category: 'A', name: 'Item 1' }]);

const [filter] = useState('A');

const [filteredItems, setFilteredItems] = useState([]);

useEffect(() => {

setFilteredItems(items.filter(i => i.category === filter));

}, [items, filter]);

return (

<div>

<p>Anti-pattern: effect syncing state (causes extra render)</p>

<ul>{filteredItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>

</div>

);

}

export default App;

// ✅ Use useEffect for sync with external systems (e.g. resize)

import { useState, useEffect } from 'react';

function App() {

const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);

useEffect(() => {

const handleResize = () => setWidth(window.innerWidth);

window.addEventListener('resize', handleResize);

return () => window.removeEventListener('resize', handleResize);

}, []);

return <div>Window width: {width}px (resize to see)</div>;

}

export default App;