DEV Community

loading...
Cover image for My go-to React libraries for 2021
SFEIR

My go-to React libraries for 2021

julienhery profile image Julien Hery Updated on ・7 min read

I’ve been working on React apps for more than 3 years now and I’ve used tons of libraries to build various applications. The last months have been very rich for the React ecosystem ! We’ve seen many different tools slowly replacing old libraries that hundreds of developers used to build their apps for many years. I started a new project for my client this year and had the opportunity to test out these new tools and choose my new stack for 2021 and beyond.

State Management

I’ve used Redux for many projects, it is (was ?) a great solution to centralize the data of your application. But some things just felt over-complicated and developers have been complaining about this for a long time. For example, learning the Flux pattern can be quite difficult for some people. Then someone tells you that you need to use a middleware to handle your side effects. Great ! Let’s use Redux Thunk. But wait, now someone tells you that there is a better solution : Redux Saga. Nice ! Even more complexity to handle.

But 2020 changed that and new challengers appeared. You might have heard of Recoil, Jotai, Zustand or just React Context API. But the one that made me drop Redux is :

react-query

For those who already know it, you might say that it’s not like Redux. It doesn’t do the same thing. React Query is a data fetching library, it makes fetching, caching, synchronizing and updating server state easy.

All the projects I worked on were using Redux to store data coming from the server. That’s also why middleware like Thunk or Saga appeared.
What if I tell you that there is a library to do that without bothering with actions, action creators, reducers, etc… ? With React Query you’ll be able to easily fetch the data from your server and cache it. Later on you’ll be able to invalidate the data and everything will be re-fetched automatically and stored again. The only part you need to worry about is how you fetch the data. And of course it gives you the isLoading boolean (and tons of other information) you’re tired of handling yourself.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <FirstComponent />
      <SecondComponent />
    </QueryClientProvider>
  )
}

function FirstComponent() {
  // fetch some data
  const { isLoading, error, data } = useQuery('myData', fetchData)

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  )
}


function SecondComponent() {
  const queryClient = useQueryClient()

  const invalidateData = () => {
    // invalidate data, will trigger a refetch in FirstComponent
    queryClient.invalidateQueries('myData')
  }

  return (
    <div>
      <button onClick={invalidateData}>
        Click me to refetch data !
      </button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

If you still need to handle complex local state (i.e. not coming from your server) then I have something for you !

zustand

Zustand is a small and fast state-management solution. I’m not a big fan of context-based libraries like Redux. It always felt like dark magic to me : you don’t really know how it works, but it does the trick 🤷‍♂️. I’m not saying that context-based state management is bad, I’m just saying that the whole Provider/Consumer thing doesn’t feel natural to me even if it’s a React feature.

What I love about Zustand is that it’s just objects ! You create a state from an object, it can contain properties like strings, numbers, boolean or whatever, just as you would do with Redux. But you can also put functions to update your state or even fetch data if you want to handle it yourself (try React Query please. You won’t be disappointed).
Zustand also gives you a hook that you can use in your components to access the data. But the cool thing is : you can also access it outside of a component ! As you may know hooks cannot be used if you’re not in a component, but Zustand gives you the ability to access your state object and every other thing you could do with the hook. This can be very useful for testing, you can just manage your state before rendering your component and you don’t have to wrap everything with a context.

import create from 'zustand'

const useStore = create(set => ({
  bears: [],
  fetchBears: async () => {
    const response = await fetch('/bears')
    set({ bears: await response.json() })
  }
}))

export default function App() {
  const bears = useStore(state => state.bears)

  return <h1>{bears.length} bears around here ...</h1>
}

// You can also use your store outside of components

// Getting non-reactive fresh state
const bears = useStore.getState().bears
// Listening to selected changes, in this case when "bears" changes
const unsub = useStore.subscribe(console.log, state => state.bears)
// Updating state, will trigger listeners
useStore.setState({ bears: [{ name: 'zustand' }] })
// Unsubscribe listeners
unsub()
// Destroying the store (removing all listeners)
useStore.destroy()
Enter fullscreen mode Exit fullscreen mode

I haven’t tried other alternatives like Recoil or Jotai but Zustand is the one that felt the most easy and natural to me by reading its documentation and so far I’m not disappointed.

UI Components

When you don’t have strong styling directives to follow, you’ll probably end up using a component library to have components that already fit well together. Most of the time they also provide you additional features and remove a lot of boilerplate code.

I’ve started React with Reactstrap (Bootstrap for React) and then switched to Material UI. I dropped Reactstrap because Bootstrap was not the cool thing anymore and Material was. But all I felt using Material UI was frustration. To me the components are not always intuitive or flexible enough and I lost too much time searching simple things in the documentation. Material UI was not the right choice for me. So I searched for an alternative and found :

antd

Ant Design is a design system for enterprise-level products. It comes with all the components you need. Every time I wonder “Can I do this with component ?” I can do it.
The documentation is very good and contains a lot of examples. You can feel by reading it that peoples have thought a long time about what features could be useful.

There’s still some things I don’t like about Ant Design. Its style is written using LESS and I’m more of a SASS user (and it’s supported by default by create-react-app). If you want to customize Ant Design theme you need to use LESS or a tool to change LESS variables during your build. To me it feels a little too much to just update color variables.
Another thing to note is that Ant Design is a design system. It is meant to be opinionated. It gives you a set of rules to follow when using components and doesn’t make it very easy when you want to use components outside of these use cases. Overall, it is a pleasure to use compared to Material UI and I can do everything I need very easily without any frustration.

Testing

I was introduced to testing React applications with Enzyme. Back in the day it was probably the best solution. But time has passed and a very strong alternative has appeared :

Capture d’écran 2021-05-10 à 19.15.36

Testing Library has been around for quite some time now and has slowly replaced Enzyme everywhere.
This tool provides simple and complete testing utilities that encourage good testing practices. Unlike Enzyme, it is closer to how a user would interact with your application and gives you more confidence about the way you test your application.

The thing that shocked me the most was the readability of my tests. You can tell exactly what it does by just looking at the code. It may sound stupid, but it wasn’t always the case with Enzyme.

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import MyComponent from './MyComponent'

test('display "Hello dev.to"', () => {
  const { getByText } = render(<MyComponent />)

  expect(getByText('Hello dev.to')).toBeInTheDocument()
})

test('display "Clicked !" after clicking on button', () => {
  const {getByText, queryByText} = render(<MyComponent />)

  expect(queryByText('Clicked !')).not.toBeInTheDocument()

  fireEvent.click(screen.getByText('Click me'))

  expect(getByText('Clicked !')).toBeInTheDocument()
})
Enter fullscreen mode Exit fullscreen mode

Testing library is not only for React, it has implementations for all frameworks and also provides utilities for tools like Cypress. Nothing much to say about it, you can’t start a React application in 2021 without using Testing Library.

Bonus : Form library

If you do not use a component library (that usually has some components to manage forms) you may need something to handle your forms.

In the past few years, we’ve seen many libraries trying to provide an easy way to handle forms. You may have heard of Redux Form (please, no), Formsy or Formik. I’ve tried them all but the one that convinced me was :

Capture d’écran 2021-05-10 à 19.18.27

React Hook Form is a very simple, hook based library with easy data validation. According to their benchmark it is much faster than other alternatives. By using hooks, React Hook Form feels very natural, it also uses refs (i.e. uncontrolled inputs) to get value from your fields so it’s basically standard javascript.
Formik is another great alternative but feels more complicated to me.

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    // "handleSubmit" will validate your inputs before invoking "onSubmit"
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />

      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

What about you ?

Have you recently used new libraries or are you still using the good old ones ? Let me know in the comments ! I'd love to see if I missed some great tools 😄

Discussion (40)

Collapse
bartrobel profile image
Salim Korkmaz

-State Management

-> for Network -> SWR (but RQ is same)
-> for UI -> (Redux Toolkit but Zustand seems easier)
-UI -> Material Design (Chakra or Ant is ok but no more bootstrap)
-Forms -> React Hook Form
-Framework -> Next.js
-Deploy -> Vercel
-Bonus -> yup (validation) , date-fns (date things) , classnames (html class helper)

Collapse
csulit profile image
Christian Angelo M Sulit

Do you have sample project for nextjs and ant?

Collapse
bartrobel profile image
Collapse
rexebin profile image
Rex

Love React Query, best library ever.
With React Query managing data for me, I find myself not wanting any third-party state management library. React's own state management is more than enough!

Coming from the same author as React Query, @tannerlinsley , React Table is a headless table library, loving it too, making tables has never been so easy.

Form: React Hook Form with yup, yes, love it.

Tooling/Building: Nrwl/Nx, love it.

UI: Material UI, love it.

Editor: TinyMCE, so easy to work with, coupled with React Hook Form, template-based document editing is so easy to build.

For importing Excel: xlsx, love it

Data table: Ag-Grid

Collapse
dthomason profile image
David

We recently migrated from MOBX to SWR, interested in trying out react query now. MUI for sure, I prefer react form hook over formik any day, yup yup. We built our own data table hook but it’s gotten bloated and causing perf issues. Diggin reacts provided tools, they seem to keep it logical without any waving hands in the way.

Collapse
lewiskori profile image
Lewis kori • Edited

I'm to new react, been using vue for a long time.
I'm curious how SWR is interchangeable with mobx.

Isn't SWR for data fetching? while mobx acts as a global store?

is there something I'm missing here with SWR so I can completely get rid of mobx.

no hate for mobx though. I love it and it's more or less similar to vuex if you've used vue.js

Thread Thread
dthomason profile image
David

You are correct, One wasn’t intended to replace the other per say, it has more to do with the type of app it is. It’s a teacher student math tool with focus on live interactions between them. So we’re making frequent api calls, as well as web sockets coming in for every problem answered. This causes an already taxing state management system to get triggered unnecessarily. And with SWR fetching the most recent data whether it be from ws or http it’s just not necessary to be storing all that in state. Miss MOBX tho, used the console getStore all the time. Now I’m stuck either drilling through REACTdevtools component section or simply console logging. Learning exactly how and when to use, useRef, useState, useMemo, useEffect, or context has been beneficial, personal skill wise.

I haven’t used Vue. Some redux and been curious about Sustand, but for now it’s classic State management for me.

😂😂

Thread Thread
lewiskori profile image
Lewis kori

Got you 😂

that sounds like a lot of work my friend. All the best lol.

Collapse
buriti97 profile image
buridev

React Query is awesome

Collapse
psiho profile image
Mirko Vukušić

MobX is my love at first sight. Never got that Redux hype after doing a few projects with MobX. With it since then.
UI... Mine is a weird choice (for business apps not planned to run on mobile)... Evergreen-UI.

Collapse
arnelenero profile image
Arnel Enero

Some time back when I was performance testing a library I was writing, I did some performance tests and saw a surprising perf difference between MobX and Redux. Guess which one was faster? MobX by a wide margin. Must be because of the reactive thing.

Collapse
julienhery profile image
Julien Hery Author

Never tried MobX but I have heard of it multiple times. When I started React I just followed the hype and used Redux. Maybe I will give it a try someday 😃
There's just too many UI libraries 😂 Tried AntD and loved it but I'm sure there's plenty of other cool libraries !

Collapse
dthomason profile image
David

I loved MOBX when we had it, but it’s heavy on the clients, been using SWR with standard out of the box react state management.

Collapse
zzoukk profile image
zZouKk • Edited

React Hook Form + Yup is great for handling forms!

Collapse
arnelenero profile image
Arnel Enero

I'm fond of using Material UI. I like its overall structure, the wide variety of pre-built components and the theming system. Apart from that, I use my own stuff, especially for state management and routing (well it's just a wrapper for React Router anyway), because I like the simplest approach. I usually don't use specialized libraries, and only if they're absolutely needed in the project. And I use the simplest patterns and architecture appropriate for the specific project. All these are to keep onboarding time to minimum for whenever we have new team members, as well as to keep existing team members happy.

Collapse
bennodev19 profile image
BennoDev • Edited

'Have you recently used new libraries or are you still using the good old ones ?'

To be honest, I built my own solutions for most of the libraries mentioned above.

  • For State Management, I use AgileTs, which is a more flexible approach of State Management where you basically create States like global variables [github.com/agile-ts/agile]
  • For 'Form Management', I built another library called 'Multieditor' which serves as an extension of the State Manager I've created. [github.com/agile-ts/agile/tree/mas...]
  • For 'Testing' I use Jest and Testing Library

The libraries mentioned in the blog post are great too..
but they didn't fit my needs ;D

Collapse
recruiterkasey profile image
Kasey Wickens

Hi Julian
I am looking for React developers who know their libraries. If you can recommend anyone you mentor in the States, feel free to pass my info on to them.
Kasey.Wickens@OdysseyIS.com

Collapse
agathambrose profile image
Agatha Ambrose

I'm not in the states, but I could be of use to you since I'm a React Developer and I'm a fan of libraries for faster web app development

Collapse
manlikecliff profile image
ManLikeCliff

Not only does it feel good to see a fellow Nigerian here but also a female dev 🙂, Hello Agatha? I hope Kasey considers you really.

Thread Thread
agathambrose profile image
Agatha Ambrose

Hello Cliff! Fingers crossed!

Thread Thread
manlikecliff profile image
ManLikeCliff

Do follow back, anything yet?

Collapse
millergregor profile image
Greg Miller

+1 for zustand. Easy and powerful at the same time.

Collapse
rizkyrajitha profile image
Rajitha Gunathilake

+1 for React Hook Form .
it's awesome

Collapse
abazieudochukwu profile image
abazieudochukwu

Good post thanks

Collapse
big78113828 profile image
Big

state management --> mobx
UI --> plain ol' html and css (from a Figma mockup)
Forms --> plain ol' react/html
framework --> Create-React-App
async fetch --> axios

Collapse
pffigueiredo profile image
pffigueiredo

I do prefer *day.js * for dates management after trying both (day.js and date-fns).

But this list, absolutely rocks, well played man!

Collapse
sagnikb7 profile image
Sagnik B

I think Formik along with the yup integration is worth mentioning. It is my favourite form library

Collapse
diogo405 profile image
Diogo Goncalves

SWR, Recoil, styled-components, RTL, Cypress & react-router-dom ✌️

Collapse
dthomason profile image
David

YES Cypress FTW

Collapse
imjituchauhan profile image
Jitu Chauhan

Awesome libraries. I m also working on my Geeks UI.
Its build with Bootstrap 5.
Thank you

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited

Atomic state managers like jotai and recoil are the future and give you everything you need. They can do client and server state so basically replace redux and react-query

Collapse
rubender profile image
Ruslan

my zen stuck
preact github.com/preactjs/preact
state manager redoor github.com/rubender/redoor
expressjs
mongodb
:-)

Collapse
funky12 profile image
Attitude king

good. it's really useful for my post Dosti Status.

Collapse
dastasoft profile image
dastasoft

I use the same libraries as you but changed Ant design to Chakra UI for the same styling reasons.

Collapse
rakeshv07018495 profile image
Collapse
npongracic profile image
Nebojša Pongračić

If you're using Antd, you don't need another lib to handle forms, Antd has this built in. :)
Also Redux-toolkit looks like a good way to use Redux but without the overhead.

Collapse
rakeshv07018495 profile image
Rakesh verma

good. it's really useful for my post diksha singh boyfriend name.

Collapse
salvoravida profile image
Salvatore Ravidà

github.com/salvoravida/recoil-toolkit
Helpers for Recoil, the next generation state management library.

Collapse
fires3as0n profile image
fires3as0n • Edited

If you have problems with understanding on how something as simple as Redux works, I have a bad news for you.

Collapse
julienhery profile image
Julien Hery Author

I never said I had trouble understanding it 🙂 My point is that it can be complicated when you're starting React and IMO you need to write too much things to do a simple task
But I've used it many many many times and felt very satisfied with it ! But I think there's easier and lighter alternatives today 🙂

Forem Open with the Forem app