Control Props Pattern

Normally, you would control the state of a component from within its internal state. But there are a few instances where you want to be able to override the internal state of a component and control the state from the parent component such as updating content when something happens outside the component. This is easily achieved with the controlled props pattern. For example, you have a dropdown that keeps track of its own open state internally. But we want the parent component to be able to update the state of the component based on some other logic.

This pattern transforms a component into a Controlled Component . External state serves as a "single source of truth" that allows users to insert custom logic to change the default behavior of a component.

Libraries that use this pattern

React Rating component - MUIMUI_hq

Advantages

Giving more control: Because the main state is exposed outside the component, the user has direct control over that component.

import React, { useState } from "react";
import { Counter } from "./Counter";

const Component = () => {
  const [count, setCount] = useState(0);

  const handleChangeCounter = (newCount) => {
    setCount(newCount);
  };
  return (
    <Counter value={count} onChange={handleChangeCounter}>
      <Counter.Decrement icon={"minus"} />
      <Counter.Label>Counter</Counter.Label>
      <Counter.Count max={10} />
      <Counter.Increment icon={"plus"} />
    </Counter>
  );
}

export { Component };

Disadvantages

Implementation complexity: Component behavior was previously possible by implementing it in one place ( JSX ) , but now requires implementation in 3 different places ( JSX / useState / handleChange ) .

References and articles :

React controlled props patternDEV Community

When to use Control Props or State Reducerskentcdodds

Controlled and uncontrolled component design pattern in ReactMedium

Render props in the Age of Hooks