React Recipes

Status: The introduction of Hooks has fundamentally changed how we write React. The official documentation is currently being reorganized around a hooks-first approach, and these articles need to similarly shift focus.

Introduction

This repository 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.

Finally, but most importantly, these articles reflect my current understanding of how React works. While I strive to give the clearest picture possible, some aspects may still be inaccurate, out of date, or just plain Bad Ideas. Sorry in advance, I'm trying my best! If you spot any errors or dubious claims, please let me know by filing an issue or a pull request.

Table of contents

First steps

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

Mental models

Life inside a component

This section is about how to build strong React components.

Class components

Function components

Hooks

Notes on the various hooks available in React.

Built-in hooks
Custom hooks

The component and the outside world

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

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.

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.

Special-purpose components

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

Performance

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:

Finally, some assorted articles from around the web: