Function Composition in React

Function composition is a fundamental concept in React that enables you to build complex UIs by combining smaller, focused functions and components. This approach leads to more maintainable, reusable, and testable code.

Core Principles of Function Composition

Small, focused functions: Each function should do one thing well
Reusability: Components should be designed for multiple use cases
Combinability: Functions should work together seamlessly
Data flow: Clear input/output relationships between functions

Basic Composition Patterns

1. Component Composition

// Simple composition
function PageLayout({ header, sidebar, content }) {
  return (
    <div className="page">
      <div className="header">{header}</div>
      <div className="sidebar">{sidebar}</div>
      <div className="content">{content}</div>
    </div>
  );
}

// Usage
<PageLayout
  header={<Header title="Dashboard" />}
  sidebar={<Navigation />}
  content={<DashboardContent />}
/>

2. Function Composition Utility

// Simple compose function
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);

// Usage with React components
const enhance = compose(
  withRouter,
  withAuth,
  withLoadingIndicator
);

const EnhancedComponent = enhance(BaseComponent);

Advanced Composition Techniques

1. Higher-Order Component Composition

function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    useEffect(() => {
      console.log('Component mounted:', WrappedComponent.name);
      return () => console.log('Component unmounted:', WrappedComponent.name);
    }, []);

    return <WrappedComponent {...props} />;
  };
}

function withAnalytics(WrappedComponent) {
  return function WithAnalytics(props) {
    const trackEvent = (eventName) => {
      // Send analytics event
    };

    return <WrappedComponent {...props} trackEvent={trackEvent} />;
  };
}

// Composed usage
const EnhancedComponent = withAnalytics(withLogging(MyComponent));

// Or using compose
const enhance = compose(withAnalytics, withLogging);
const EnhancedComponent = enhance(MyComponent);

2. Render Props Composition

function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ... mouse tracking logic
  return children(position);
}

function WindowSize({ children }) {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
  // ... resize logic
  return children(size);
}

// Composed usage
<MouseTracker>
  {({ x, y }) => (
    <WindowSize>
      {({ width, height }) => (
        <div>
          Mouse: {x}, {y} | Window: {width}x{height}
        </div>
      )}
    </WindowSize>
  )}
</MouseTracker>

3. Hook Composition

// Custom hooks
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ... mouse tracking logic
  return position;
}

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
  // ... resize logic
  return size;
}

// Composed usage in component
function TrackingComponent() {
  const { x, y } = useMousePosition();
  const { width, height } = useWindowSize();

  return (
    <div>
      Mouse: {x}, {y} | Window: {width}x{height}
    </div>
  );
}

Functional Utility Patterns

1. Pipeline Operator (Future JavaScript)

// Using the proposed pipeline operator
const processData = data =>
  data
    |> filterActiveItems
    |> sortByDate
    |> groupByCategory
    |> formatForDisplay;

// Usage in component
function DataDisplay() {
  const processedData = processData(rawData);
  return <DataView data={processedData} />;
}

2. Currying for Component Configuration

// Curried component factory
const createButton = (baseStyle) => (sizeStyle) => ({ children, onClick }) => (
  <button 
    style={{ ...baseStyle, ...sizeStyle }} 
    onClick={onClick}
  >
    {children}
  </button>
);

// Create button variants
const baseButtonStyle = { padding: '8px 16px', borderRadius: '4px' };
const smallButton = createButton(baseButtonStyle)({ fontSize: '12px' });
const largeButton = createButton(baseButtonStyle)({ fontSize: '18px', padding: '12px 24px' });

// Usage
<smallButton onClick={() => console.log('Clicked')}>Small</smallButton>
<largeButton onClick={() => console.log('Clicked')}>Large</largeButton>

Best Practices for Effective Composition

Single Responsibility: Each function/component should have one clear purpose
Pure Functions: Components should be pure when possible (same props → same output)
Clear Interfaces: Well-defined prop types and function signatures
Minimal Dependencies: Reduce coupling between composed functions
Type Safety: Use TypeScript/PropTypes to ensure composition works as expected

Composition with Context API

// Create context providers that can be composed
function composeProviders(...providers) {
  return ({ children }) => 
    providers.reduceRight(
      (child, Provider) => <Provider>{child}</Provider>,
      children
    );
}

// Individual providers
const ThemeProvider = ({ children }) => (
  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
);

const AuthProvider = ({ children }) => (
  <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
);

// Composed root provider
const AppProviders = composeProviders(ThemeProvider, AuthProvider);

// Usage
function App() {
  return (
    <AppProviders>
      <MainApp />
    </AppProviders>
  );
}

Performance Considerations

Memoization: Use React.memo, useMemo, and useCallback to prevent unnecessary re-renders
Component Splitting: Break down components to optimize updates
Lazy Evaluation: Compose functions that delay computation until needed
Virtualization: For large lists, compose with windowing techniques

// Optimized composition example
const ExpensiveComponent = React.memo(function({ data }) {
  // Expensive rendering
});

function ParentComponent() {
  const processedData = useMemo(() => 
    compose(transformA, transformB, transformC)(rawData),
    [rawData]
  );

  return <ExpensiveComponent data={processedData} />;
}

Real-World Composition Examples

1. Form Handling Composition

// Form field validator
const validateField = (rules) => (value) => 
  rules.reduce((errors, rule) => {
    if (!rule.validator(value)) errors.push(rule.message);
    return errors;
  }, []);

// Form processor
const processFormData = (validators) => (formData) =>
  Object.entries(formData).reduce((acc, [field, value]) => {
    acc[field] = {
      value,
      errors: validators[field] ? validators[field](value) : []
    };
    return acc;
  }, {});

// Usage in component
function MyForm() {
  const [formData, setFormData] = useState({ username: '', password: '' });

  const validators = {
    username: validateField([
      { validator: val => val.length >= 3, message: 'Too short' }
    ]),
    password: validateField([
      { validator: val => val.length >= 8, message: 'Minimum 8 characters' }
    ])
  };

  const processed = processFormData(validators)(formData);

  // ... render form
}

2. API Request Composition

// Request builder
const withBaseUrl = (baseUrl) => (endpoint) => `${baseUrl}${endpoint}`;
const withAuth = (token) => (request) => ({
  ...request,
  headers: { ...request.headers, Authorization: `Bearer ${token}` }
});

// Composed API client
const createApiClient = (config) => {
  const baseRequest = {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  };

  const apiUrl = withBaseUrl(config.baseUrl);
  const authedRequest = withAuth(config.token);

  return {
    get: (endpoint) => 
      fetch(apiUrl(endpoint), authedRequest(baseRequest))
        .then(res => res.json())
  };
};

// Usage
const api = createApiClient({
  baseUrl: 'https://api.example.com',
  token: 'user-token'
});

// In component
useEffect(() => {
  api.get('/user/123').then(data => setUser(data));
}, []);

Function composition in React leads to more declarative, maintainable code by building complex functionality from simple, reusable pieces. This approach aligns perfectly with React’s component-based architecture and functional programming principles.