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

Props Getters Pattern

PreviousControl Props PatternNextCustom hook pattern

Last updated 3 years ago

Was this helpful?

While this pattern gives you a lot of control, it's harder to integrate your components. Users have to deal with the many props of native hooks themselves and rewrite the logic themselves. The Props Getters pattern hides this complexity by providing a list of props getters instead of exposing the default props. A getter is a function that returns a bunch of props, and gives it a meaningful name so that users can easily connect to the correct JSX element.

Libraries that use this pattern

Advantages

Easy to use: Provides an easy way to integrate components and hides complexity. Users just need to connect the correct getter to the correct JSX element.

Flexibility: Users can override the props contained in the getter if needed for a specific use case.

Disadvantages

Lack of visibility: The abstraction provided by getters makes it easier to implement components, but can feel like a "magic box" with no visible insides. To redefine a component correctly, the user needs to know what the list of props exposed by the getter is and how changing one of them will affect the internal logic.

References and articles :

🔭
Examples: Basictannerlinsley
GitHub - downshift-js/downshift: 🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.GitHub
How to give rendering control to users with prop getterskentcdodds
A performance issue with the prop getters pattern in React
Logo
Logo
Logo
Logo