My Favourite React Stack

From setting up a new project to state management and more, this is what I use

Tom Buyse
Tom Buyse
Jan 22 · 4 min read
Photo by Esther Jiao on Unsplash

If you’re familiar to the React landscape, you might know how challenging it can be to figure out which libraries to use. Since React isn’t a full-fledged JS framework like Angular, we need additional libraries to build large projects. However, this is no easy task because in each category there are multiple options to choose from.

In this piece, I’ll explain my favourite libraries to use in combination with React. This is my perspective and, of course, subjective. Feel free to leave any comments if you have a different perspective about certain parts.


Bootstrapping a New Project

Basically, I always go for either one of these options:

  • NextJS
  • Gatsby

A few months ago, I’d have chosen Create React App for building dynamic React apps. However, NextJS has quickly caught on and seems to be an overall better choice, in my opinion. It supports both static and server-side pages (hybrid) and focuses more on performance in general.

Gatsby is the framework I prefer to go for when building a full public-facing site. I like the focus on SEO and performance out of the box, as well as the great ecosystem. There are quite a few plugins available for easily integrating functionality like analytics, a CMS, and lazy loading images.

So in general: If it’s a public-facing site, I prefer Gatsby. If I’m building a dynamic (large) React application, I would use NextJS.


State Management

  • Redux
  • MobX

A year ago, I’d have always preferred MobX because of the massive boilerplate Redux brought to the table. This, however, changed recently since the creators behind Redux introduced Redux Toolkit. This makes sure boilerplate is kept at a minimum while still enjoying the structure this library brings.

Since this adjustment, the choice is a bit harder. From where I stand, Redux is more suitable for larger projects where more structure is necessary and where the dev tools can become a great asset. MobX is my favourite choice when the project is rather small- or medium-sized.

MobX is best used with Mobx-react-lite. The hooks approach plays better with functional components.


Styling

A downside to styled components is the amount of boilerplate theming required. Below is an example:

That’s one of the reasons why I like to use xstyled in combination with styled components. This makes sure we can translate the previous snippet to:

All those magic numbers? They are converted to theme values. margin: 0 3; can turn into margin 0px 16px, for example.


Navigation

Despite it being the favourite, I’ve been tempted to experiment with Reach. Its setup is quite similar, and it supports accessibility out of the box. Gatsby has been using this since v2.

There’s more at this link if you want to know about the accessibility features of the Reach router.


Forms

  • React Hook Form
  • Formik

The most popular of the two is Formik — with about 20k stars on GitHub. However, this one can be quite daunting to use. it can be described as an extensive toolbox for forms. I like to use it when building a large application containing a lot of different forms.

My personal favourite is React Hook Form. It fully embraces the new React hook system and is easy to set up and work with. For most forms, this will do just fine. However, when having to write complex forms, it can be an option to also look at Formik.


Final remarks

This is by no means the perfect stack, but it’s worked for me when building various types of applications.

Thanks for reading.

Better Programming

Advice for programmers.

Tom Buyse

Written by

Tom Buyse

Passionate about front-end development

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade