React Patterns

Reusable patterns for building flexible, maintainable React interfaces.

🧩 Compound Components

Build components that talk to each other like best friends! 🤝 Compound Components let you create flexible, composable APIs where parent and children share state seamlessly through Context. It's like LEGO blocks for your UI! 🧱

🟠 Impact: HIGH — The secret sauce behind every great component library. Master this and you'll build APIs that developers actually enjoy using! 🎯

📋 In this section: Context-based state sharing • Composable sub-components • Flexible API design • Real-world Accordion example

Use them when you want consumers to combine, reorder, or customize UI parts without losing shared state (e.g. accordions, tabs, menus).

What to notice

Single component with all props; rigid structure.

tsx

// ❌ WRONG: Single component with all props - not flexible
const faqItems = [
  { question: "What is React?", answer: "A UI library for building interfaces." },
  { question: "Why use it?", answer: "Component-based, reusable, and declarative." },
];

function Accordion({ 
  items = [], 
  titleKey, 
  contentKey, 
  defaultOpen = 0 
}) {
  const [openIndex, setOpenIndex] = useState(defaultOpen);
  
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <button onClick={() => setOpenIndex(index)}>
            {item[titleKey]}
          </button>
          {openIndex === index && (
            <div>{item[contentKey]}</div>
          )}
        </div>
      ))}
    </div>
  );
}

// Usage - rigid structure (faqItems must match titleKey/contentKey)
function App() {
  return (
    <Accordion
      items={faqItems}
      titleKey="question"
      contentKey="answer"
      defaultOpen={0}
    />
  );
}
export default App;

// Problems:
// - Can't customize individual items easily
// - Can't rearrange header/content order
// - Hard to add custom styling per item
// - Limited flexibility for different use cases

Preview

Console

What to notice

Compound components with context; flexible structure.

tsx

// ✅ GOOD: Compound components - flexible and composable
import { createContext, useContext, useState } from 'react';

const AccordionContext = createContext<{
  openIndex: number;
  setOpenIndex: (index: number) => void;
} | null>(null);

function Accordion({ children, defaultOpen = 0 }) {
  const [openIndex, setOpenIndex] = useState(defaultOpen);
  
  return (
    <AccordionContext.Provider value={{ openIndex, setOpenIndex }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ index, children }) {
  const context = useContext(AccordionContext);
  if (!context) throw new Error('AccordionItem must be inside Accordion');
  
  const { openIndex, setOpenIndex } = context;
  const isOpen = openIndex === index;
  
  return (
    <div className="accordion-item">
      {React.Children.map(children, child => 
        React.cloneElement(child, { isOpen, onToggle: () => setOpenIndex(index) })
      )}
    </div>
  );
}

function AccordionHeader({ children, isOpen, onToggle }) {
  return (
    <button 
      onClick={onToggle}
      className={`accordion-header ${isOpen ? 'open' : ''}`}
    >
      {children}
    </button>
  );
}

function AccordionContent({ children, isOpen }) {
  if (!isOpen) return null;
  return <div className="accordion-content">{children}</div>;
}

Accordion.Item = AccordionItem;
Accordion.Header = AccordionHeader;
Accordion.Content = AccordionContent;

function Icon() { return <span>📌 </span>; }
function CustomComponent() { return <p>Custom content here</p>; }

function App() {
  return (
    <Accordion defaultOpen={0}>
      <Accordion.Item index={0}>
        <Accordion.Header>
          <Icon /> Custom Question with Icon
        </Accordion.Header>
        <Accordion.Content>
          <p>Answer with any content</p>
          <button>Learn More</button>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item index={1}>
        <Accordion.Header>Another Question</Accordion.Header>
        <Accordion.Content>
          <CustomComponent />
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
export default App;

// Benefits:
// ✅ Full control over structure
// ✅ Easy to customize each item
// ✅ State shared automatically via Context

Preview

Console

🪝 Hooks

Stop copy-pasting the same useState + useEffect combo everywhere! 🛑 Custom Hooks let you extract reusable logic into clean, testable functions. Write it once, use it everywhere — your future self will thank you! 🙏

🔴 Impact: CRITICAL — The #1 pattern every React developer must master. If you're duplicating logic across components, you're doing it wrong! 🚨

📋 In this section: Extracting reusable logic • useUser custom hook • Eliminating code duplication • Shared state patterns

Extract logic when you repeat it across components (data, auth, forms). One hook = single source of truth and simpler tests.

tsx

// ❌ WRONG: Logic duplicated in multiple components
// Mock API for demo (in real app this would be fetch)
const mockFetchUser = (id) => Promise.resolve({ name: 'Jane Doe', avatar: 'https://via.placeholder.com/48' });

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    mockFetchUser(userId)
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{user.name}</div>;
}

function UserAvatar({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    mockFetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);
  if (loading) return <div style={{ width: 48, height: 48, background: '#333', borderRadius: 24 }} />;
  return <span>{user?.name} (avatar)</span>;
}

function App() {
  return (
    <div>
      <UserProfile userId="1" />
      <UserAvatar userId="1" />
    </div>
  );
}
export default App;

// Problems: Code duplication, hard to maintain, logic not reusable

Preview

Console

tsx

// ✅ GOOD: Extract logic into custom hook
// Mock API for demo
const mockFetchUser = (id) => Promise.resolve({ name: 'Jane Doe', avatar: 'https://via.placeholder.com/48' });

function Skeleton() {
  return <div style={{ width: 48, height: 48, background: '#333', borderRadius: 24 }} />;
}

function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    setError(null);
    mockFetchUser(userId)
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);
  
  return { user, loading, error };
}

function UserProfile({ userId }) {
  const { user, loading, error } = useUser(userId);
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{user.name}</div>;
}

function UserAvatar({ userId }) {
  const { user, loading } = useUser(userId);
  if (loading) return <Skeleton />;
  return <span>{user?.name} (avatar)</span>;
}

function App() {
  return (
    <div>
      <UserProfile userId="1" />
      <UserAvatar userId="1" />
    </div>
  );
}
export default App;

Preview

Console

🎁 HOC

Wrap your components in superpowers! 🦸 HOCs are like gift wrapping — they take a component and return an enhanced version with extra abilities (auth, logging, theming). Think of them as component decorators! ✨

🔵 Impact: MEDIUM — A classic pattern that's still relevant for cross-cutting concerns like auth guards and analytics wrappers! 🔐

📋 In this section: Authentication HOC • Component enhancement • Cross-cutting concerns • withAuth pattern

Use them to add cross-cutting concerns (authentication, permissions, logging) without duplicating logic on every screen.

tsx

// ❌ WRONG: Authentication logic duplicated
const checkAuth = () => Promise.resolve({ name: 'Demo User' });
const redirect = () => {};

function Dashboard() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    checkAuth().then(u => {
      if (!u) { redirect('/login'); return; }
      setUser(u);
      setLoading(false);
    });
  }, []);
  if (loading) return <div>Loading...</div>;
  return <div>Dashboard Content</div>;
}

function Profile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    checkAuth().then(u => {
      if (!u) { redirect('/login'); return; }
      setUser(u);
      setLoading(false);
    });
  }, []);
  if (loading) return <div>Loading...</div>;
  return <div>Profile</div>;
}

function App() {
  return (
    <div>
      <Dashboard />
      <Profile />
    </div>
  );
}
export default App;

Preview

Console

tsx

// ✅ GOOD: Use HOC to add authentication
const checkAuth = () => Promise.resolve({ name: 'Demo User' });
const useRouter = () => ({ push: () => {} });

function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const router = useRouter();
    useEffect(() => {
      checkAuth()
        .then(u => {
          if (!u) { router.push('/login'); return; }
          setUser(u);
          setLoading(false);
        })
        .catch(() => router.push('/login'));
    }, []);
    if (loading) return <div>Loading...</div>;
    if (!user) return null;
    return <Component {...props} user={user} />;
  };
}

function Dashboard({ user }) {
  return <div>Dashboard: {user?.name}</div>;
}
function Profile({ user }) {
  return <div>Profile: {user?.name}</div>;
}
function Settings({ user }) {
  return <div>Settings: {user?.name}</div>;
}

const ProtectedDashboard = withAuth(Dashboard);
const ProtectedProfile = withAuth(Profile);
const ProtectedSettings = withAuth(Settings);

function App() {
  return (
    <div>
      <ProtectedDashboard />
      <ProtectedProfile />
      <ProtectedSettings />
    </div>
  );
}
export default App;

Preview

Console

🎨 Render Props

Pass a function as children and let the consumer decide what to render! 🖌️ Render Props give you maximum flexibility — the component handles the logic, and YOU choose the presentation. It's like a choose-your-own-adventure for UI! 📖

🔵 Impact: MEDIUM — The OG flexibility pattern! Still powerful for sharing behavior between components without coupling them together 🔗

📋 In this section: Function-as-children pattern • MouseTracker example • Decoupled rendering • Reusable behavior sharing

tsx

// ❌ WRONG: Tightly coupled, not reusable
function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);
  return (
    <div>
      <p>Mouse at: {position.x}, {position.y}</p>
    </div>
  );
}

function App() {
  return <MouseTracker />;
}
export default App;

Preview

Console

tsx

// ✅ GOOD: Render prop pattern - flexible and reusable
function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);
  return children(position);
}

function App() {
  return (
    <div>
      <MouseTracker>
        {({ x, y }) => <p>Mouse at: {x}, {y}</p>}
      </MouseTracker>
    </div>
  );
}
export default App;

Preview

Console

💧 Hydration

React 18 changed the game with Selective Hydration! 🎮 Instead of hydrating your entire app at once (blocking everything), React can now hydrate components in priority order. Users click a button? That component gets hydrated FIRST! It's like a VIP line for interactivity! 🎪

🟠 Impact: HIGH — This is how Netflix and Meta keep their apps feeling instant. Streaming SSR + selective hydration = blazing fast perceived performance! 🚀

📋 In this section: Traditional SSR waterfall • Streaming HTML • Suspense boundaries • Priority-based hydration

Wrap heavy or data-dependent components in Suspense so the rest of the page becomes interactive sooner.

Visualizing Selective Hydration Priority

tsx

// ❌ TRADITIONAL SSR: Blocking "Waterfall"
// server.js
import { renderToString } from 'react-dom/server';

// 1. Wait for ALL data to be ready
// 2. Render ENTIRE tree to HTML
const html = renderToString(<App />);

// 3. Send HTML to client
res.send(html);

// 4. Client waits for ALL JS to load
// 5. React hydrates ENTIRE tree at once
// 🛑 Result: Page is non-interactive until everything loads

Preview

Console

tsx

// ✅ SELECTIVE HYDRATION (React 18+)
// server.js
import { pipeToNodeWritable } from 'react-dom/server';

// 1. Start streaming HTML immediately
const { startWriting } = pipeToNodeWritable(
  <DataProvider data={data}>
    <App />
  </DataProvider>,
  res,
  {
    onReadyToStream() {
      res.setHeader('Content-type', 'text/html');
      res.write('<!DOCTYPE html>');
      startWriting();
    }
  }
);

// App.js
// 2. Wrap slow components in Suspense
<Suspense fallback={<Spinner />}>
  <Comments /> {/* Large data fetching component */}
</Suspense>
<Suspense fallback={<Spinner />}>
  <Sidebar />
</Suspense>

// 🎯 Result:
// - HTML streams in chunks
// - User sees content sooner (First Contentful Paint)
// - React hydrates interactive parts (like Sidebar) FIRST
// - "Heavy" parts (Comments) hydrate later without blocking

Preview

Console

BlogBack to Blog NextDesign Patterns

// ❌ WRONG: Single component with all props - not flexible

const faqItems = [

{ question: "What is React?", answer: "A UI library for building interfaces." },

{ question: "Why use it?", answer: "Component-based, reusable, and declarative." },

];

function Accordion({

items = [],

titleKey,

contentKey,

defaultOpen = 0

}) {

const [openIndex, setOpenIndex] = useState(defaultOpen);

return (

<div>

{items.map((item, index) => (

<button onClick={() => setOpenIndex(index)}>

{item[titleKey]}

</button>

{openIndex === index && (

<div>{item[contentKey]}</div>

)}

</div>

))}

</div>

);

}

// Usage - rigid structure (faqItems must match titleKey/contentKey)

function App() {

return (

<Accordion

items={faqItems}

titleKey="question"

contentKey="answer"

defaultOpen={0}

);

}

export default App;

// Problems:

// - Can't customize individual items easily

// - Can't rearrange header/content order

// - Hard to add custom styling per item

// - Limited flexibility for different use cases

// ✅ GOOD: Compound components - flexible and composable

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

const AccordionContext = createContext<{

openIndex: number;

setOpenIndex: (index: number) => void;

} | null>(null);

function Accordion({ children, defaultOpen = 0 }) {

const [openIndex, setOpenIndex] = useState(defaultOpen);

return (

<AccordionContext.Provider value={{ openIndex, setOpenIndex }}>

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

</AccordionContext.Provider>

);

}

function AccordionItem({ index, children }) {

const context = useContext(AccordionContext);

if (!context) throw new Error('AccordionItem must be inside Accordion');

const { openIndex, setOpenIndex } = context;

const isOpen = openIndex === index;

return (

{React.Children.map(children, child =>

React.cloneElement(child, { isOpen, onToggle: () => setOpenIndex(index) })

)}

</div>

);

}

function AccordionHeader({ children, isOpen, onToggle }) {

return (

<button

onClick={onToggle}

className={`accordion-header ${isOpen ? 'open' : ''}`}

{children}

</button>

);

}

function AccordionContent({ children, isOpen }) {

if (!isOpen) return null;

return <div className="accordion-content">{children}</div>;

}

Accordion.Item = AccordionItem;

Accordion.Header = AccordionHeader;

Accordion.Content = AccordionContent;

function Icon() { return <span>📌 </span>; }

function CustomComponent() { return <p>Custom content here</p>; }

function App() {

return (

<Accordion.Item index={0}>

<Accordion.Header>

<Icon /> Custom Question with Icon

</Accordion.Header>

<Accordion.Content>

<p>Answer with any content</p>

<button>Learn More</button>

</Accordion.Content>

</Accordion.Item>

<Accordion.Item index={1}>

<Accordion.Header>Another Question</Accordion.Header>

<Accordion.Content>

</Accordion.Content>

</Accordion.Item>

</Accordion>

);

}

export default App;

// Benefits:

// ✅ Full control over structure

// ✅ Easy to customize each item

// ✅ State shared automatically via Context

// ❌ WRONG: Logic duplicated in multiple components

// Mock API for demo (in real app this would be fetch)

const mockFetchUser = (id) => Promise.resolve({ name: 'Jane Doe', avatar: 'https://via.placeholder.com/48' });

function UserProfile({ userId }) {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

setLoading(true);

mockFetchUser(userId)

.then(data => { setUser(data); setLoading(false); })

.catch(err => { setError(err.message); setLoading(false); });

}, [userId]);

if (loading) return <div>Loading...</div>;

if (error) return <div>Error: {error}</div>;

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

}

function UserAvatar({ userId }) {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

mockFetchUser(userId).then(setUser).finally(() => setLoading(false));

}, [userId]);

if (loading) return <div style={{ width: 48, height: 48, background: '#333', borderRadius: 24 }} />;

return <span>{user?.name} (avatar)</span>;

}

function App() {

return (

<div>

</div>

);

}

export default App;

// Problems: Code duplication, hard to maintain, logic not reusable

// ✅ GOOD: Extract logic into custom hook

// Mock API for demo

const mockFetchUser = (id) => Promise.resolve({ name: 'Jane Doe', avatar: 'https://via.placeholder.com/48' });

function Skeleton() {

return <div style={{ width: 48, height: 48, background: '#333', borderRadius: 24 }} />;

}

function useUser(userId) {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

setLoading(true);

setError(null);

mockFetchUser(userId)

.then(data => { setUser(data); setLoading(false); })

.catch(err => { setError(err.message); setLoading(false); });

}, [userId]);

return { user, loading, error };

}

function UserProfile({ userId }) {

const { user, loading, error } = useUser(userId);

if (loading) return <div>Loading...</div>;

if (error) return <div>Error: {error}</div>;

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

}

function UserAvatar({ userId }) {

const { user, loading } = useUser(userId);

if (loading) return <Skeleton />;

return <span>{user?.name} (avatar)</span>;

}

function App() {

return (

<div>

</div>

);

}

export default App;

// ❌ WRONG: Authentication logic duplicated

const checkAuth = () => Promise.resolve({ name: 'Demo User' });

const redirect = () => {};

function Dashboard() {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

checkAuth().then(u => {

if (!u) { redirect('/login'); return; }

setUser(u);

setLoading(false);

});

}, []);

if (loading) return <div>Loading...</div>;

return <div>Dashboard Content</div>;

}

function Profile() {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

checkAuth().then(u => {

if (!u) { redirect('/login'); return; }

setUser(u);

setLoading(false);

});

}, []);

if (loading) return <div>Loading...</div>;

return <div>Profile</div>;

}

function App() {

return (

<div>

</div>

);

}

export default App;

// ✅ GOOD: Use HOC to add authentication

const checkAuth = () => Promise.resolve({ name: 'Demo User' });

const useRouter = () => ({ push: () => {} });

function withAuth(Component) {

return function AuthenticatedComponent(props) {

const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

const router = useRouter();

useEffect(() => {

checkAuth()

.then(u => {

if (!u) { router.push('/login'); return; }

setUser(u);

setLoading(false);

})

.catch(() => router.push('/login'));

}, []);

if (loading) return <div>Loading...</div>;

if (!user) return null;

return <Component {...props} user={user} />;

};

}

function Dashboard({ user }) {

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

}

function Profile({ user }) {

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

}

function Settings({ user }) {

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

}

const ProtectedDashboard = withAuth(Dashboard);

const ProtectedProfile = withAuth(Profile);

const ProtectedSettings = withAuth(Settings);

function App() {

return (

<div>

</div>

);

}

export default App;

// ❌ WRONG: Tightly coupled, not reusable

function MouseTracker() {

const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() => {

const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });

window.addEventListener('mousemove', handleMouseMove);

return () => window.removeEventListener('mousemove', handleMouseMove);

}, []);

return (

<div>

<p>Mouse at: {position.x}, {position.y}</p>

</div>

);

}

function App() {

return <MouseTracker />;

}

export default App;

// ✅ GOOD: Render prop pattern - flexible and reusable

function MouseTracker({ children }) {

const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() => {

const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });

window.addEventListener('mousemove', handleMouseMove);

return () => window.removeEventListener('mousemove', handleMouseMove);

}, []);

return children(position);

}

function App() {

return (

<div>

{({ x, y }) => <p>Mouse at: {x}, {y}</p>}

</MouseTracker>

</div>

);

}

export default App;

// ❌ TRADITIONAL SSR: Blocking "Waterfall"

// server.js

import { renderToString } from 'react-dom/server';

// 1. Wait for ALL data to be ready

// 2. Render ENTIRE tree to HTML

const html = renderToString(<App />);

// 3. Send HTML to client

res.send(html);

// 4. Client waits for ALL JS to load

// 5. React hydrates ENTIRE tree at once

// 🛑 Result: Page is non-interactive until everything loads

// ✅ SELECTIVE HYDRATION (React 18+)

// server.js

import { pipeToNodeWritable } from 'react-dom/server';

// 1. Start streaming HTML immediately

const { startWriting } = pipeToNodeWritable(

<App />

</DataProvider>,

res,

{

onReadyToStream() {

res.setHeader('Content-type', 'text/html');

res.write('<!DOCTYPE html>');

startWriting();

}

);

// App.js

// 2. Wrap slow components in Suspense

<Comments /> {/* Large data fetching component */}

</Suspense>

</Suspense>

// 🎯 Result:

// - HTML streams in chunks

// - User sees content sooner (First Contentful Paint)

// - React hydrates interactive parts (like Sidebar) FIRST

// - "Heavy" parts (Comments) hydrate later without blocking