React Recipes

Note: Some of these articles are from the class-based component era of React.js development. The introduction of Hooks has radically changed how one writes React code, and the official React documentation has been reorganized around a hooks-first approach. I haven’t had the chance to update all of the content.

Introduction

This guide contains some tried-and-tested ways to work with React that I picked up along the way, and in-depth explanations of how certain aspects of the library work.

The articles assume you have a bit of experience with React, and that you've set it up to use JSX and modern JavaScript features, such as classes and modules. These require a bit of initial setup and although they're not 100% necessary, forgoing JSX and ES6 modules makes for a less-than-stellar development experience. Check out Setting up shop for a quick way to get started on a React project with all the goodness baked in.

I mostly discuss the plain React API. Some articles do however point to useful libraries and tools when they're easy to pick up and don't introduce too many new concepts. The articles rarely touch on aspects of React style, such as naming, indentation, using arrow functions, et cetera. You can enforce a consistent style in your project with Prettier, and supplement it with the Airbnb React/JSX Style Guide.

Table of contents

First steps

This section is about getting started with React. I hope to expand this section with more introductory articles.

• Setting up shop walks you through setting up a React project with JSX and modern JavaScript without losing your soul in the process.

Mental models

• Reading JSX as if it were JavaScript to get a clearer picture of how React works.
• Why immutability is important explains why you want to keep your data immutable when working with React.
• When does React re-render?, by Josh W. Comeau

Life inside a component

This section is about how to build strong React components.

• Ways to define components walks you through the pros and cons of functional vs. class-based React components.
• Ways to use defaultProps to make your code clearer.
• Using propTypes to ensure components receive what they expect.
• Controlled, uncontrolled, and somewhere in between

Class components

• The component lifecycle describes the methods available on a class component, how they're invoked and what they're good at.
• Use the best setState style for the job when updating your component's state.

Function components

Hooks

Notes on the various hooks available in React.

• Hooks: an overview

Built-in hooks

• useState
• useEffect

Custom hooks

• Writing custom hooks
• usePrevious — keep references to the previous value of thigs
• useBounds — a few ways to measure DOM elements
• useInitialRender — distinguish between the initial render and subsequent renders

The component and the outside world

This section discusses how our component can interact with things outside its boundaries.

• Handling events outside the component the React way with the help of a small library.
• Rendering things outside the component with Portals.
• Embedding React components in an existing app shows how to turn some parts of your app over to React.

How components talk to each other

In this section we explore some patterns of communication between components, and how to combine them like Lego bricks to build up our app.

• How components talk to each other is an intro to how React components compose.
• The property pattern for callbacks helps you handle events more elegantly.
• Passing React components via props outlines some component composition strategies.

Passing data to children

Passing children to components is one of the basic ways to compose our application's element tree. A component that receives children it knows little about may want to share information with them nonetheless. The React API affords a few related methods to do that.

• Passing data to children: an overview
• Extending children with React.Children and React.cloneElement
• Higher-Order Components
• Render props

Special-purpose components

The React API allows us to write some useful generic components for our app.

• Error Boundaries will stop a component that crashed from breaking your whole app.

Performance

• An introduction to performance
• Making things simpler and faster with memoization
• Preventing useless updates with React.PureComponent and React.memo
• The useMemo hook
• Pure component caveats shows you some scenarios where you're better off not using PureComponent.
• why-did-you-update is your new best friend that lets you know when your components are updating uselessly.
• DOM Frugality: React.Fragment and returning arrays

Further reading

The official React website has comprehensive guides, tutorials, and links to useful tools. React has one of the best documentations around. Spend a fortnight reading the guides cover to cover and you'll get a much firmer grasp on how to use React efficiently.

On his Overreacted blog, Dan Abramov goes on interesting deep-dives into how React works under the hood.

Then there are other React pattern repositories you might find interesting:

• reactpatterns.com
• react-in-patterns
• react-playbook
• react-bits

Finally, some assorted articles from around the web:

• Writing good component API by Siddharth Kshetrapal