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 using this pattern
  • Advantages
  • Disadvantages
  • References and articles :

Was this helpful?

Edit on GitHub
  1. Concepts
  2. Advanced Patterns

State Reducer

PreviousContext ModuleNextReact Under the hood

Last updated 3 years ago

Was this helpful?

The state reducer pattern gives even more control to the consumer than the render props patterns. Whereas the render props pattern allows consumers to be in control over the UI based on state, the state reducer pattern allows the consumer to add logic to state changes themselves, while also rendering any content they would like.

You may wonder why use render props at all if state reducer can do everything render props can do and more but I would argue that you don’t always want to use state reducer and render props just because you can. If you don’t need to make your component super reusable then don’t do it. These patterns are great but making your components reusable comes at a cost. They will make your components more complex than they need to be, its often better to make your components simple first, and then refactor into these patterns as needed.

In this example, we used the State reducer pattern and the Custom hook pattern together, but you can also use it with the Compound components pattern to pass the reducer directly to the main component Counter .

Libraries using this pattern

Advantages

Granting more control: Even in the most complex cases, using state reducers is the best way to hand over control to the user. All internal component operations are now externally accessible and can be overridden.

Disadvantages

Implementation complexity: This pattern is certainly the most difficult implementation for both component developers and users.

Lack of visibility: The behavior of reducers can change, requiring a deep understanding of the component's internal logic.

References and articles :

πŸ”­
GitHub - downshift-js/downshift: 🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.GitHub
The State Reducer Pattern with React Hookskentcdodds
The state reducer pattern βš›οΈ 🏎kentcdodds
React’s State Reducer PatternMedium
Logo
Logo
Logo
Logo