Control Props and Inversion of Control Pattern0%

Control Props and Inversion of Control Pattern

Beginner12 min read•Updated: Jul 11, 2026

Control Props and Inversion of Control Pattern

1. The Component Autonomy Dilemma

When engineering reusable UI primitives (e.g. toggles, dropdowns, pagination controls, or date pickers), component authors face a fundamental dilemma:

Should the component be uncontrolled (managing its own internal state automatically for developer convenience)?
Or should it be controlled (allowing the parent to dictate state and receive change notifications)?

If you only support uncontrolled behavior, consumers cannot synchronize the component with external state or URL parameters. If you only support controlled behavior, consumers must write tedious value and onChange boilerplate for even trivial use cases.

The Control Props Pattern (popularized by Kent C. Dodds and used in libraries like Downshift and Material UI) solves this dilemma through Inversion of Control (IoC):

The component maintains internal state by default, but if the consumer provides a controlled prop (like value or on), the component cedes control to the consumer!

Output

1Controlled Check:
2Is `value !== undefined` passed by consumer?
3 ├─ YES ──► Controlled Mode: Display `props.value`, call `props.onChange(next)`
4 └─ NO  ──► Uncontrolled Mode: Display internal `state`, update internal `setState`

2. Implementing a Robust Toggle with Control Props

Let's build an enterprise Toggle component:

JSX

1import React, { useState } from 'react';
2 
3export default function Toggle({
on: controlledOn,      // Controlled prop (optional)
onChange,              // Callback when state wants to change
defaultOn = false,     // Initial state for uncontrolled mode
children
8}) {
// 1. Internal state used in uncontrolled mode
const [internalOn, setInternalOn] = useState(defaultOn);
11 
// 2. Determine whether the component is currently controlled
const isControlled = controlledOn !== undefined;
14 
// 3. Resolve the active state value
const on = isControlled ? controlledOn : internalOn;
17 
// 4. Unified toggle handler
const handleToggle = () => {
  const nextOn = !on;
21 
  // If uncontrolled, update internal state
  if (!isControlled) {
    setInternalOn(nextOn);
  }
26 
  // Always notify caller if callback is supplied
  if (onChange) {
    onChange(nextOn);
  }
};
32 
return (
  <button
    type="button"
    role="switch"
    aria-checked={on}
    className={`toggle-switch ${on ? 'toggle-on' : 'toggle-off'}`}
    onClick={handleToggle}
  >
    <span className="toggle-handle" />
    {children}
  </button>
);
45}

3. Comparing Consumer Modes

Mode 1: Fully Uncontrolled (Zero Boilerplate)

JSX

1// Manages its own state automatically!
2<Toggle defaultOn={false} onChange={(val) => console.log('Toggled:', val)}>
3  Enable Push Notifications
4</Toggle>

Mode 2: Fully Controlled (Parent in Command)

JSX

1function SettingsScreen() {
const [autoSync, setAutoSync] = useState(true);
3 
return (
  // Parent dictates the state via 'on' prop!
  <Toggle on={autoSync} onChange={setAutoSync}>
    Automatic Cloud Sync
  </Toggle>
);
10}

4. Warning Against Switching Modes in Runtime

A component should never transition between uncontrolled and controlled modes during its lifecycle. React will log a warning:

"A component is changing an uncontrolled input to be controlled."

To prevent this:

Always ensure controlledOn defaults to undefined, or explicitly check isControlledRef.current = controlledOn !== undefined on initial mount to warn developers if they accidentally change modes at runtime.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is the primary purpose of the Control Props pattern in React?

Question 2

How does a component detect whether it is currently operating in controlled mode?

Question 3

What happens in uncontrolled mode when a user clicks the component?

Question 4

Why does React warn against "changing an uncontrolled input to be controlled"?

Question 5

Which popular open-source design libraries make extensive use of the Control Props pattern?

Next Lesson

State Reducer Pattern in Advanced React

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
None	State Reducer Pattern in Advanced React

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousPrevNext