React has been our frontend team's weapon of choice for over 5 years now. Occasionally we need to onboard someone new to the framework. This week we're sharing a list we'd share with them: articles that align with our values and principles building a React app. This list is geared towards developers with at least some React or frontend framework experience. It's not a getting started from scratch guide, but a collection of deeper principles and advanced patterns that affect how we write and structure components.
Not a React dev? You still might want to skim through these—a lot of the advice applies to any component based framework.
First some guiding principles:
With React, we try to avoid React as much possible to avoid ending up with component spaghetti:
-
Avoid state: we reach for controlled components by default, but considering uncontrolled components might reduce the amount of state you have to manage. And less state === less bugs.
-
Avoid effects:
useEffect can introduce a lot of accidental complexity and hard-to-track bugs. Know when you might not need an effect and use the infamous hook as sparingly as possible.
-
Avoid memoization: consider other patterns before you memo().
Patterns to keep in mind when building your application's component library:
Finally, some library recommendations:
Radix Primitives is our go-to component library for dropdowns, modals…
clsx is a small but mighty utility to conditionally apply CSS classes.
react-hook-form is our favorite form library.
When our state management needs go beyond useState we install Jotai.
TanStack Query is great to fetch and cache data from an API.
In the rare cases we need a standalone client-side router, we'll use TanStack Router.
