React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Libraries that use this pattern
  • Advantages
  • Disadvantages
  • References and articles :

Was this helpful?

Edit on GitHub
  1. Concepts
  2. Advanced Patterns

Control Props Pattern

PreviousCompound Components PatternNextProps Getters Pattern

Last updated 3 years ago

Was this helpful?

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

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 Rating component - MUIMUI_hq
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
Logo
Logo
Logo
Logo
Logo