react-patterns

name

react-patterns

description

Complete React component patterns system. PROACTIVELY activate for: (1) Compound components with context, (2) Render props pattern, (3) Higher-Order Components (HOC), (4) Custom hooks as patterns, (5) Provider pattern with reducer, (6) Controlled vs uncontrolled components, (7) Prop getter pattern, (8) State reducer pattern. Provides: Pattern implementations, composition strategies, reusable component APIs, flexible state control. Ensures clean, maintainable component architecture.

Quick Reference

Pattern	Use Case	Example
Compound Components	Related components sharing state	<Tabs><Tab /><Panel /></Tabs>
Render Props	Dynamic rendering with shared logic	<Mouse>{({x,y}) => ...}</Mouse>
HOC	Cross-cutting concerns	withAuth(Component)
Custom Hooks	Stateful logic reuse	useToggle(), useDebounce()
Provider Pattern	Global/shared state	<CartProvider>...</CartProvider>
Controlled/Uncontrolled	Form input flexibility	value vs defaultValue
Prop Getters	Accessible component APIs	getButtonProps()
State Reducer	Customizable state logic	useReducer(customReducer)

When to Use This Skill

Use for React component architecture:

• Building flexible, reusable component APIs
• Implementing compound component patterns
• Creating render props for dynamic content
• Developing custom hooks for logic reuse
• Managing controlled vs uncontrolled inputs
• Designing accessible component interfaces

For state management: see react-state-management

---

React Component Patterns

Compound Components

Basic Compound Component

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

// Context for sharing state
interface TabsContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabsContext = createContext<TabsContextType | null>(null);

function useTabsContext() {
  const context = useContext(TabsContext);
  if (!context) {
    throw new Error('Tabs components must be used within a Tabs provider');
  }
  return context;
}

// Parent component
interface TabsProps {
  defaultTab: string;
  children: ReactNode;
}

function Tabs({ defaultTab, children }: TabsProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ ,  }}>
      {children}
    
  );
}


 () {
   ;
}


  {
  : ;
  : ;
}

 () {
   { activeTab, setActiveTab } = ();

   (
    
  );
}


  {
  : ;
  : ;
}

 () {
   { activeTab } = ();

   (activeTab !== value)  ;

   (
    
  );
}


. = ;
. = ;
. = ;

 {  };


 () {
   (
    
  );
}

Flexible Compound Component with Slot Pattern

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

interface AccordionContextType {
  openItems: Set<string>;
  toggleItem: (id: string) => void;
  allowMultiple: boolean;
}

const AccordionContext = createContext<AccordionContextType | null>(null);

interface AccordionProps {
  children: ReactNode;
  allowMultiple?: boolean;
  defaultOpen?: string[];
}

function Accordion({ children, allowMultiple = false, defaultOpen = [] }: AccordionProps) {
  const [openItems, setOpenItems] = useState<Set<string>>(new Set(defaultOpen));

  const toggleItem = (id: string) => {
    setOpenItems((prev) => {
      const next = new (prev);
       (next.(id)) {
        next.(id);
      }  {
         (!allowMultiple) next.();
        next.(id);
      }
       next;
    });
  };

   (
    
  );
}

  {
  : ;
  : ;
}

 () {
   context = ();
   (!context)   ();

   isOpen = context..(id);

   (
    
  );
}

  {
  : ;
  ?: ;
  ?: ;
}

 () {
   context = ();
   (!context || !itemId)  ;

   (
    
  );
}

  {
  : ;
  ?: ;
}

 () {
   (!isOpen)  ;

   ;
}

. = ;
. = ;
. = ;

 {  };

Render Props Pattern

Basic Render Props

import { useState, ReactNode } from 'react';

interface ToggleRenderProps {
  on: boolean;
  toggle: () => void;
  setOn: (value: boolean) => void;
}

interface ToggleProps {
  defaultOn?: boolean;
  children: (props: ToggleRenderProps) => ReactNode;
}

function Toggle({ defaultOn = false, children }: ToggleProps) {
  const [on, setOn] = useState(defaultOn);

  const toggle = () => setOn((prev) => !prev);

  return <>{children({ on, toggle, setOn })}</>;
}

// Usage
function App() {
  return (
    <Toggle defaultOn={false}>
      {({ on, toggle }) => (
        <>
          The toggle is {on ? 'ON' : 'OFF'}
          Toggle
        
      )}
    
  );
}

Mouse Position Tracker

import { useState, useEffect, ReactNode } from 'react';

interface MousePosition {
  x: number;
  y: number;
}

interface MouseTrackerProps {
  children: (position: MousePosition) => ReactNode;
}

function MouseTracker({ children }: MouseTrackerProps) {
  const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });

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

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return <>{children(position)}</>;
}


 () {
   (
    
  );
}

Data Fetching Render Props

import { useState, useEffect, ReactNode } from 'react';

interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

interface FetchProps<T> {
  url: string;
  children: (state: FetchState<T>) => ReactNode;
}

function Fetch<T>({ url, children }: FetchProps<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url);
      if (!response.)   ();
       result =  response.();
      (result);
    }  (err) {
      (err   ? err :  ());
    }  {
      ();
    }
  };

  ( {
    ();
  }, [url]);

   ;
}


 () {
   (
    <<[]> url=>
      { {
         (loading)  ;
         (error)  ;

         (
          
        );
      }}
    </>
  );
}

Higher-Order Components (HOC)

Basic HOC

import { ComponentType } from 'react';

interface WithLoadingProps {
  isLoading: boolean;
}

function withLoading<P extends object>(
  WrappedComponent: ComponentType<P>
) {
  return function WithLoadingComponent(props: P & WithLoadingProps) {
    const { isLoading, ...rest } = props;

    if (isLoading) {
      return <div className="loading-spinner">Loading...</div>;
    }

    return <WrappedComponent {...(rest as P)} />;
  };
}

// Usage
interface UserListProps {
  users: User[];
}

function UserList({ users }: UserListProps) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</>
      ))}
    
  );
}

  = ();

HOC with Injected Props

import { ComponentType, useEffect, useState } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface WithUserProps {
  user: User | null;
  userLoading: boolean;
}

function withUser<P extends WithUserProps>(
  WrappedComponent: ComponentType<P>
) {
  return function WithUserComponent(
    props: Omit<P, keyof WithUserProps>
  ) {
    const [user, setUser] = useState<User | null>(null);
    const [userLoading, setUserLoading] = useState(true);

    useEffect(() => {
      fetch('/api/me')
        .then((res) => res.json())
        .then((data) => {
          setUser(data);
          setUserLoading();
        })
        .( ());
    }, []);

     (
      
    );
  };
}


    {
  ?: ;
}

 () {
   (userLoading)  ;
   (!user)  ;

   (
    
  );
}

  = ();

Composing Multiple HOCs

import { ComponentType } from 'react';

// Utility for composing HOCs
function compose<P>(...hocs: Array<(c: ComponentType<any>) => ComponentType<any>>) {
  return (Component: ComponentType<P>) =>
    hocs.reduceRight((acc, hoc) => hoc(acc), Component);
}

// Usage
const EnhancedComponent = compose(
  withLoading,
  withUser,
  withTheme
)(BaseComponent);

Custom Hooks as Patterns

useToggle

import { useState, useCallback } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => setValue((v) => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);

  return { value, toggle, setTrue, setFalse, setValue };
}

// Usage
function Modal() {
  const { value: isOpen, toggle, setFalse: close } = useToggle();

  return (
    <>
      <button onClick={toggle}>Open Modal</button>
      {isOpen && (
        <div className="modal">
          <button onClick={close}>Close</button>
        
      )}
    
  );
}

useDisclosure

import { useState, useCallback } from 'react';

interface UseDisclosureReturn {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
  onToggle: () => void;
  getDisclosureProps: () => { 'aria-expanded': boolean; 'aria-controls': string };
  getContentProps: () => { id: string; hidden: boolean };
}

function useDisclosure(
  id: string,
  { defaultOpen = false }: { defaultOpen?: boolean } = {}
): UseDisclosureReturn {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  const onOpen = useCallback(() => setIsOpen(true), []);
  const onClose = useCallback(() => setIsOpen(false), []);
  const onToggle = useCallback(() => setIsOpen( !prev), []);

   getDisclosureProps = (
     ({
      : isOpen,
      : ,
    }),
    [isOpen, id]
  );

   getContentProps = (
     ({
      : ,
      : !isOpen,
    }),
    [isOpen, id]
  );

   {
    isOpen,
    onOpen,
    onClose,
    onToggle,
    getDisclosureProps,
    getContentProps,
  };
}

useClickOutside

import { useEffect, useRef, RefObject } from 'react';

function useClickOutside<T extends HTMLElement>(
  handler: () => void,
  events: Array<'mousedown' | 'mouseup' | 'touchstart' | 'touchend'> = ['mousedown', 'touchstart']
): RefObject<T> {
  const ref = useRef<T>(null);

  useEffect(() => {
    const listener = (event: Event) => {
      const target = event.target as Node;
      if (!ref.current || ref.current.contains(target)) {
        return;
      }
      handler();
    };

    events.forEach((event) => document.addEventListener(event, listener));

    return () => {
      events.forEach((event) => document.removeEventListener(event, listener));
    };
  }, [handler, events]);

   ref;
}


 () {
   [isOpen, setIsOpen] = ();
   ref = useClickOutside<>( ());

   (
    
  );
}

Provider Pattern

Context with Reducer

import { createContext, useContext, useReducer, ReactNode, Dispatch } from 'react';

// Types
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  total: number;
}

type CartAction =
  | { type: 'ADD_ITEM'; payload: Omit<CartItem, 'quantity'> }
  | { type: 'REMOVE_ITEM'; payload: string }
  | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
  | { type: 'CLEAR_CART' };

// Reducer
function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
     : {
       existingItem = state..( item. === action..);

       (existingItem) {
         items = state..(
          item. === action..
            ? { ...item, : item. +  }
            : item
        );
         { items, : (items) };
      }

       items = [...state., { ...action., :  }];
       { items, : (items) };
    }
     : {
       items = state..( item. !== action.);
       { items, : (items) };
    }
     : {
       items = state..(
        item. === action..
          ? { ...item, : action.. }
          : item
      );
       { items, : (items) };
    }
     :
       { : [], :  };
    :
       state;
  }
}

 ():  {
   items.( sum + item. * item., );
}


  {
  : ;
  : <>;
  :  ;
  :  ;
  :  ;
  :  ;
}

  = createContext< | >();


 () {
   [state, dispatch] = (cartReducer, { : [], :  });

    = () => {
    ({ : , : item });
  };

    = () => {
    ({ : , : id });
  };

    = () => {
    ({ : , : { id, quantity } });
  };

    = () => {
    ({ :  });
  };

   (
    
  );
}


 () {
   context = ();
   (!context) {
      ();
  }
   context;
}

 { , useCart };

Controlled vs Uncontrolled Components

Controlled Input

import { useState, ChangeEvent } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="Controlled input"
    />
  );
}

Uncontrolled Input

import { useRef, FormEvent } from 'react';

function UncontrolledInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    console.log('Value:', inputRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" defaultValue="" />
      <button type="submit">Submit</button>
    </form>
  );
}

Hybrid Controlled/Uncontrolled Component

import { useState, useCallback, ChangeEvent } from 'react';

interface InputProps {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}

function Input({ value: controlledValue, defaultValue = '', onChange }: InputProps) {
  const [internalValue, setInternalValue] = useState(defaultValue);

  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;

  const handleChange = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;

      if (!isControlled) {
        setInternalValue(newValue);
      }

      onChange?.(newValue);
    },
    [isControlled, onChange]
  );

  return <input type="text" value={value} onChange={handleChange} />;
}

// Usage - Controlled
function () {
   [value, setValue] = ();
   ;
}


 () {
   ;
}

Prop Getter Pattern

import { useState, useCallback, HTMLAttributes, InputHTMLAttributes } from 'react';

interface UseSelectReturn<T> {
  selectedItem: T | null;
  isOpen: boolean;
  highlightedIndex: number;
  getToggleButtonProps: () => HTMLAttributes<HTMLButtonElement>;
  getMenuProps: () => HTMLAttributes<HTMLUListElement>;
  getItemProps: (options: { item: T; index: number }) => HTMLAttributes<HTMLLIElement>;
  getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
}

function useSelect<T extends { id: string; label: string }>(
  items: T[]
): UseSelectReturn<T> {
  const [selectedItem, setSelectedItem] = useState<T | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [highlightedIndex, setHighlightedIndex] = useState(-1);

  const getToggleButtonProps = (
     ({
      :  ( !prev),
      :   ,
      : isOpen,
    }),
    [isOpen]
  );

   getMenuProps = (
     ({
      :   ,
      : highlightedIndex >=  ? items[highlightedIndex]?. : ,
      : !isOpen,
    }),
    [isOpen, highlightedIndex, items]
  );

   getItemProps = (
     ({
      :   ,
      : item.,
      : selectedItem?. === item.,
      :  {
        (item);
        ();
      },
      :  (index),
    }),
    [selectedItem]
  );

   getInputProps = (
     ({
      : selectedItem?. || ,
      : ,
      :  (),
    }),
    [selectedItem]
  );

   {
    selectedItem,
    isOpen,
    highlightedIndex,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    getInputProps,
  };
}


 () {
   {
    selectedItem,
    isOpen,
    highlightedIndex,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    getInputProps,
  } = (items);

   (
    
  );
}

State Reducer Pattern

import { useReducer, Reducer } from 'react';

// Types
type ToggleState = { on: boolean };
type ToggleAction = { type: 'toggle' } | { type: 'reset'; initialState: ToggleState };

// Default reducer
function toggleReducer(state: ToggleState, action: ToggleAction): ToggleState {
  switch (action.type) {
    case 'toggle':
      return { on: !state.on };
    case 'reset':
      return action.initialState;
    default:
      return state;
  }
}

interface UseToggleOptions {
  initialOn?: boolean;
  reducer?: Reducer<ToggleState, ToggleAction>;
}

function useToggleWithReducer({
  initialOn = false,
  reducer = toggleReducer,
}: UseToggleOptions = {}) {
   initialState = { : initialOn };
   [state, dispatch] = (reducer, initialState);

    = () => ({ :  });
    = () => ({ : , initialState });

   { ...state, toggle, reset, dispatch };
}


 () {
   : <, > =  {
    
     (action. ===  && state.) {
      
       state;
    }
     (state, action);
  };

   { on, toggle } = ({ : customReducer });

   (
    
  );
}

Best Practices Summary

Pattern	Use Case
Compound Components	Related components sharing implicit state
Render Props	Dynamic rendering with shared logic
HOC	Cross-cutting concerns, code reuse
Custom Hooks	Stateful logic reuse
Provider Pattern	Global/shared state management
Controlled/Uncontrolled	Form input flexibility
Prop Getters	Accessible component APIs
State Reducer	Customizable state logic