React design patterns

It's no secret that React is a very flexible, but still opinionated library which comes with its own best practices and design patterns. In this topic you will learn about some of the most used patterns like higher order components (HOC), the provider pattern, etc.

10 resources available

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

React in patterns

A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more. [continue]

Book by Krasimir Tsonev

Single Responsibility Components: Object-Oriented Design in React

The Functional Programming (FP) aspects of React are fairly prominent, but components themselves are an example of Object-Oriented (OO) programming. In this episode, we'll look at how one idea from OO—The Single Responsibility Principle—can help us design and extract more readable, reusable, and maintainable [continue]

Video by Front End Center

React Pattern: Centralized PropTypes

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 [continue]

Article by Cory House

Evolving Patterns in React

Let's take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability. In order to understand these patterns you need a basic understanding of the React concepts and its ecosystem. [continue]

Article by Alex Moldovan

Simple React Patterns

I've been writing React applications for a few years now, and I've noticed that some patterns tend to repeat themselves. In this post, I'll review these patterns which will summarize about 99% of the React code I write every day. [continue]

Article by Lucas Reis

React.js in patterns

Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say 'I found it'. And like every thing that I use a lot I started seeing some [continue]

Article by Krasimir Tsonev

React composition patterns / React communication patterns / React provider pattern / Event switch / React higher order components (HOC) / React HOC decorator / React component context / Container component / Controlled input / Destructuring arguments / Array as children / Container presentational pattern