React Render Props Pattern

Render props share code between components using a function prop. Here's how to use the pattern effectively.

Basic Render Props#

// Component with render prop
interface MousePosition {
  x: number;
  y: number;
}

interface MouseTrackerProps {
  render: (position: MousePosition) => React.ReactNode;
}

function MouseTracker({ render }: MouseTrackerProps) {
  const [position, setPosition] = useState({ 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 <>{render(position)}</>;
}

// Usage
function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <div>
          Mouse position: {x}, {y}
        </div>
      )}
    />
  );
}

// Children as render prop (common pattern)
interface MouseTrackerChildrenProps {
  children: (position: MousePosition) => React.ReactNode;
}

function MouseTrackerChildren({ children }: MouseTrackerChildrenProps) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ... same logic
  return <>{children(position)}</>;
}

// Usage
<MouseTrackerChildren>
  {({ x, y }) => <div>Position: {x}, {y}</div>}
</MouseTrackerChildren>

Data Fetching with Render Props#

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

interface FetchProps<T> {
  url: string;
  children: (state: FetchState<T>) => React.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 = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Fetch failed');
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err as Error);
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return <>{children({ data, loading, error, refetch: fetchData })}</>;
}

// Usage
function UserProfile({ userId }: { userId: string }) {
  return (
    <Fetch<User> url={`/api/users/${userId}`}>
      {({ data, loading, error, refetch }) => {
        if (loading) return <Spinner />;
        if (error) return <Error message={error.message} onRetry={refetch} />;
        if (!data) return null;

        return (
          <div>
            <h1>{data.name}</h1>
            <p>{data.email}</p>
          </div>
        );
      }}
    </Fetch>
  );
}

Toggle Component#

interface ToggleState {
  on: boolean;
  toggle: () => void;
  setOn: () => void;
  setOff: () => void;
}

interface ToggleProps {
  initialOn?: boolean;
  children: (state: ToggleState) => React.ReactNode;
}

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

  const state: ToggleState = {
    on,
    toggle: () => setOn(prev => !prev),
    setOn: () => setOn(true),
    setOff: () => setOn(false),
  };

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

// Usage
function App() {
  return (
    <Toggle initialOn={false}>
      {({ on, toggle }) => (
        <div>
          <p>Toggle is {on ? 'ON' : 'OFF'}</p>
          <button onClick={toggle}>Toggle</button>
        </div>
      )}
    </Toggle>
  );
}

// Multiple toggles
function Settings() {
  return (
    <Toggle>
      {({ on: darkMode, toggle: toggleDark }) => (
        <Toggle>
          {({ on: notifications, toggle: toggleNotifications }) => (
            <div>
              <label>
                <input
                  type="checkbox"
                  checked={darkMode}
                  onChange={toggleDark}
                />
                Dark Mode
              </label>
              <label>
                <input
                  type="checkbox"
                  checked={notifications}
                  onChange={toggleNotifications}
                />
                Notifications
              </label>
            </div>
          )}
        </Toggle>
      )}
    </Toggle>
  );
}

Form Handling#

interface FormState<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  handleChange: (name: keyof T, value: any) => void;
  handleBlur: (name: keyof T) => void;
  handleSubmit: (e: React.FormEvent) => void;
  isValid: boolean;
  isSubmitting: boolean;
}

interface FormProps<T> {
  initialValues: T;
  validate?: (values: T) => Partial<Record<keyof T, string>>;
  onSubmit: (values: T) => Promise<void> | void;
  children: (state: FormState<T>) => React.ReactNode;
}

function Form<T extends Record<string, any>>({
  initialValues,
  validate,
  onSubmit,
  children,
}: FormProps<T>) {
  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (name: keyof T, value: any) => {
    setValues(prev => ({ ...prev, [name]: value }));
  };

  const handleBlur = (name: keyof T) => {
    setTouched(prev => ({ ...prev, [name]: true }));
    if (validate) {
      setErrors(validate(values));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
      if (Object.keys(validationErrors).length > 0) return;
    }

    setIsSubmitting(true);
    try {
      await onSubmit(values);
    } finally {
      setIsSubmitting(false);
    }
  };

  const isValid = Object.keys(errors).length === 0;

  return (
    <form onSubmit={handleSubmit}>
      {children({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isValid,
        isSubmitting,
      })}
    </form>
  );
}

// Usage
interface LoginValues {
  email: string;
  password: string;
}

function LoginForm() {
  return (
    <Form<LoginValues>
      initialValues={{ email: '', password: '' }}
      validate={(values) => {
        const errors: Partial<Record<keyof LoginValues, string>> = {};
        if (!values.email) errors.email = 'Required';
        if (!values.password) errors.password = 'Required';
        return errors;
      }}
      onSubmit={async (values) => {
        await login(values);
      }}
    >
      {({ values, errors, touched, handleChange, handleBlur, isSubmitting }) => (
        <>
          <input
            value={values.email}
            onChange={e => handleChange('email', e.target.value)}
            onBlur={() => handleBlur('email')}
          />
          {touched.email && errors.email && <span>{errors.email}</span>}

          <input
            type="password"
            value={values.password}
            onChange={e => handleChange('password', e.target.value)}
            onBlur={() => handleBlur('password')}
          />
          {touched.password && errors.password && <span>{errors.password}</span>}

          <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? 'Logging in...' : 'Login'}
          </button>
        </>
      )}
    </Form>
  );
}

Scroll Position#

interface ScrollState {
  x: number;
  y: number;
  direction: 'up' | 'down' | null;
  isAtTop: boolean;
  isAtBottom: boolean;
}

interface ScrollTrackerProps {
  children: (state: ScrollState) => React.ReactNode;
}

function ScrollTracker({ children }: ScrollTrackerProps) {
  const [state, setState] = useState<ScrollState>({
    x: 0,
    y: 0,
    direction: null,
    isAtTop: true,
    isAtBottom: false,
  });

  useEffect(() => {
    let lastY = window.scrollY;

    const handleScroll = () => {
      const y = window.scrollY;
      const x = window.scrollX;
      const direction = y > lastY ? 'down' : y < lastY ? 'up' : null;
      const isAtTop = y === 0;
      const isAtBottom =
        y + window.innerHeight >= document.documentElement.scrollHeight;

      setState({ x, y, direction, isAtTop, isAtBottom });
      lastY = y;
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

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

// Usage: Hide header on scroll down
function App() {
  return (
    <ScrollTracker>
      {({ direction, isAtTop }) => (
        <header
          style={{
            position: 'fixed',
            transform: direction === 'down' && !isAtTop
              ? 'translateY(-100%)'
              : 'translateY(0)',
            transition: 'transform 0.3s',
          }}
        >
          Navigation
        </header>
      )}
    </ScrollTracker>
  );
}

Window Size#

interface WindowSize {
  width: number;
  height: number;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
}

interface WindowSizeProps {
  children: (size: WindowSize) => React.ReactNode;
}

function WindowSize({ children }: WindowSizeProps) {
  const [size, setSize] = useState<WindowSize>({
    width: window.innerWidth,
    height: window.innerHeight,
    isMobile: window.innerWidth < 768,
    isTablet: window.innerWidth >= 768 && window.innerWidth < 1024,
    isDesktop: window.innerWidth >= 1024,
  });

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;

      setSize({
        width,
        height,
        isMobile: width < 768,
        isTablet: width >= 768 && width < 1024,
        isDesktop: width >= 1024,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

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

// Usage
<WindowSize>
  {({ isMobile, isDesktop }) => (
    isMobile ? <MobileNav /> : <DesktopNav />
  )}
</WindowSize>

Render Props vs Hooks#

// Render prop version
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ... event listeners
  return render(position);
}

// Hook version (usually preferred)
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ... event listeners
  return position;
}

// Usage comparison
// Render props
<MouseTracker render={({ x, y }) => <div>{x}, {y}</div>} />

// Hooks
function Component() {
  const { x, y } = useMousePosition();
  return <div>{x}, {y}</div>;
}

// When render props are still useful:
// 1. Rendering multiple children
// 2. Third-party library integration
// 3. Backwards compatibility

Best Practices#

Design:
✓ Use children as function when possible
✓ Provide TypeScript generics
✓ Keep render prop focused
✓ Consider hooks as alternative

Performance:
✓ Memoize render functions
✓ Avoid creating functions in render
✓ Use useCallback for handlers
✓ Extract static JSX

Naming:
✓ Use 'render' or 'children' for prop name
✓ Document expected function signature
✓ Return descriptive state objects
✓ Include helper functions in state

Render props enable flexible code sharing between components. While hooks have replaced many render prop use cases, the pattern remains valuable for complex rendering logic and backwards compatibility. Use TypeScript for type safety and memoization for performance.