React Pattern: Centralized PropTypes

Article by Cory House

There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular. In real apps with large objects, this quickly leads to a lot of code. That's a problem, because in React, you’ll often pass the same object to multiple components. Repeating these details in multiple component files breaks the DRY principle (don't repeat yourself). Repeating yourself creates a maintenance problem. The solution? Centralize your PropTypes.


Related resources

A guide to React refs: useRef and createRef

As is the case with many other UI libraries, React offers a way to rethink a view as the result of a state of a component. Part of that benefit comes from creating the views with the abstraction mechanisms React and JSX expose instead of doing it through DOM spec methods. Still, the React team did [continue]

Article by Jeremias Menichelli

Compound React Components with Hooks + TypeScript

When writing React components, it always pays off to spend a little bit of time thinking about how another developer would use them. In this post, I'd like to dive a bit into Compound Components, a pattern for creating components that I've found to be a joy to use both as a creator and consumer. We'll [continue]

Tutorial by Martin Di Diego

How To Master Advanced React Design Patterns: Compound Components

To celebrate the official release of React 16.3, I have decided to share some techniques I have been using recently which have completely changed my approach to creating React components. Using these techniques I am able to design components that are completely reusable, and have the flexibility to use [continue]

Tutorial by Shaun David Hutch

How To Master Advanced React Design Patterns: Render Props

In this tutorial, we will discuss the 'render props' design pattern. This design pattern can be a bit of a head scratcher at first and in order to truly grasp how it exactly works, we need a in-depth understanding of the top level React API and how the JSX code we write is converted to javascript. So [continue]

Tutorial by Shaun David Hutch