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.
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.
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
This section is about getting started with React. I hope to expand this section with more introductory articles.
- 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
defaultPropsto make your code clearer.
propTypesto ensure components receive what they expect.
- Controlled, uncontrolled, and somewhere in between
- The component lifecycle describes the methods available on a class component, how they're invoked and what they're good at.
- Use the best
setStatestyle for the job when updating your component's state.
Notes on the various hooks available in React.
- 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.
propertypattern 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
- Higher-Order Components
- Render props
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.
- An introduction to performance
- Making things simpler and faster with memoization
- Preventing useless updates with
- Pure component caveats shows you some scenarios where you're better off not using
why-did-you-updateis your new best friend that lets you know when your components are updating uselessly.
- DOM Frugality:
React.Fragmentand returning arrays
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:
- React Tutorial: A Comprehensive Guide to learning React.js in 2018 by Tyler McGinnis
- Writing good component API by Siddharth Kshetrapal