{
  "id": 4784206,
  "title": "One Prop Per State: Rethinking React's Controlled/Uncontrolled Boilerplate",
  "url": "https://urgent.news/2026/09/01/one-prop-per-state-rethinking-reacts-controlled-uncontrolled",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-01T04:23:11.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/wmzy/one-prop-per-state-rethinking-reacts-controlleduncontrolled-boilerplate-2gob"
  },
  "original_language": "en",
  "account": "Controlled and uncontrolled components in React often lead to boilerplate code and unnecessary complexity. The react-use-control hook offers a solution that simplifies state management by using a single source of truth without the need for synchronization effects or mode detection.\n\nThe core idea is to determine the state's origin by asking whether the parent already created it or not. If it exists, the component uses it; otherwise, it creates it locally. This approach eliminates the need for two separate sources of truth (controlled and uncontrolled) and reduces the amount of code required to manage state.\n\nRather than branching based on whether a component is controlled or uncontrolled, react-use-control offers a control object that allows the component to determine state ownership automatically. When a plain value is passed, the component operates in uncontrolled mode, using the provided value as the default. When a control is passed, the component operates in controlled mode, with the parent and child sharing the same source of truth.\n\nThis pattern simplifies the component's code by removing the need for branches and effects, improving performance and maintainability. The control object acts as a locator to the parent-created or newly-created state, enabling seamless sharing of state between components without the need for additional context or middleware.\n\nWhile react-use-control provides a streamlined approach to state management, it's important to note that it is not intended to replace existing state management solutions. In certain cases, such as when fields are managed by form libraries like react-hook-form or formik, using the form's API is recommended. However, react-use-control excels in scenarios where components require independent state management without the overhead of additional context or middleware.\n\nThe library is lightweight, with only 80 lines of code and no dependencies, making it easy to integrate into projects. It works seamlessly with React's standard setState flow, SSR, StrictMode, and concurrent rendering features, ensuring compatibility with modern React applications.",
  "summary": "If you've ever wrapped a <Select> , <DatePicker> , or <Dialog> , you've written this: function Select ({ value , defaultValue , onChange }) { const [ internal , setInternal ] = useState ( defaultValue ); const isControlled = value !== undefined ; // runtime mode check const current = isControlled ? value : internal ; // two sources of truth useEffect (() => { if ( isControlled ) setInternal (…",
  "key_points": [
    "React-use-control simplifies state management by using a single source of truth.",
    "Components determine state ownership automatically through control object.",
    "Lightweight library with 80 lines of code, no dependencies."
  ],
  "editors_take": "This development simplifies React state management by eliminating the need for separate controlled and uncontrolled component modes, allowing for more streamlined and efficient code.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}