DEV Community

Mohammad Faisal
Mohammad Faisal

Posted on • Updated on • Originally published at

45 NPM Packages to Solve 16 React Problems

To read more articles like this, visit my blog

Note: This article is from 2 years ago. So, some of the technologies are outdated.

React is simply great. It’s popular and performant. But an important aspect of React is that it doesn’t come with all of the solutions packed in.

That’s why we need to search for additional libraries, which can be both good and bad. If you are a beginner, you must spend considerable time searching for the best solution to a problem.

Today, we will have a comparative discussion to learn more about the alternative solutions to different problems in react.

1. Global State Management

Sharing state between components is mandatory in 99% of the applications. And there are some good solutions — both native and external.


If you ask me for one solution, I will say Redux. Not because it’s the best but because it’s the most practical one. Many companies already use it, and you will have to use it at some point.

Also the ecosystem is great as well. You can find a solution to almost any problem. Some great libraries that go with redux are:


  • jotai -> Excellent to handle almost all scenarios.

  • context -> Built in to React. Good for simple use. Not good for performance. Especially if you have huge changing data.

  • recoil -> Designed to solve a specific problem. Not good for all use cases. Understand it first! You can learn more about it here.

  • mobx -> Follows observer pattern. Good for reactive programming. Shouldn’t be used in any new project.

2. Server State Management

If your application heavily relies on some external data source, then managing that data (caching, pre-fetching, etc) can be crucial for performance.


I am personally a huge fan of react-query and there are many others like me. It just works like magic.

It handles caching stale data, and many more things out of the box. It’s simple, powerful, and configurable!


There is another player in the game named SWR. This is a similar library to React Query.

The main benefit of this library is that it is built by Vercel. They are the same people who created NextJS. So you can expect better performance when using NextJS.

3. Scaffolding

Creating a React app from scratch is complex. Setting up Webpack, Bable, etc can be daunting!


NextJS is the choice for me when creating a React application from scratch. It is called the full-stack React framework.

In the documentation, it says,

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

The most important feature of this is its out-of-the-box SEO support. Which is great! You can do SEO in React as well. But it’s not straightforward like Next.


If you are starting with React or building some basic project, then you have other options.

  • create-react-app -> Building a single-page application. Good for beginners.

  • gatsby -> Building static content-oriented website. Not good for other use-cases.
    Update: Gatsby is now outdated. You can take a look at Astro now.

4. Form Handling

90% of web applications have some kind of form. And handling form inputs is a great pain. But we have some good news!


React hook form is the latest and greatest (according to me :P ) library for form handling. It’s really performant and flexible.

It has some good support with some external design libraries like material-ui and ant-design as well.

How to Use React Hook Form with TypeScript
*Build Performant and Clean Forms for Your Application*


There are some good alternatives for this field.

  • Formik -> Formik comes with battle-tested solutions for input validation, formatting, masking, arrays, and error handling.

  • redux-form -> Don’t use it. It can really hurt the performance.

5. HTTP Call

In the modern world, almost all websites rely on some external data source. So making HTTP calls are very trivial.


Fetch is the recommended way to make HTTP calls.

It has limited but powerful features. It can support 95% of your workload.


Axios is an improvement over fetch. It’s very popular.

It has some nice features like built-in XSRF protection and automatic JSON conversion and the ability to intercept HTTP calls. If you need that, you should go for it.

6. Styling

You are going to need styling. There is no doubt about that. There are multiple ways to style your application.


Many may not agree with me. But I think styled-components are the best choice when it comes to styling in React applications.

It helps to create clean components with a clear separation of concerns. Also, it’s easily manageable and configurable through props.

Also my new favorite now is Tailwind CSS


However, as I said, there are other great alternatives!

  • plain old css -> Supported out-of-the-box. It should be fine for smaller projects.

  • sass -> An improvement over CSS. It provides nice features for managing CSS. Good for mid-sized or even larger projects.

  • styled-jsx -> A library with a lot of similar features like styled-components. Has some extra features here and there.

7. UI Library

In many cases, designing all the components by hand may not be a good idea. In those cases, using some kind of UI library might be a good idea.


The most versatile and configurable UI library for me is the Material UI.

It’s very popular and used by many companies. It's highly configurable, which is why it’s so powerful.


There are some good alternatives to check out as well.

8. Documentation

Good documentation can save 100s of hours in the future. So be proactive and adopt a documentation library very early in the project.


The recommended way to create documentation is React StyleGuidist.

It's easy to use and really powerful.
Document Your React Applications The Right Way
*Step by Step Introduction Guide*


There are some other alternatives, too.

  • js-docs -> General documentation tool for javascript.

  • react-docz -> Very easy to use documentation guide. Worth a shot.

9. Multi-Language Support

If you are building a product on a global scale, then you would probably like to add multiple language support in your React application.


React i18next is the de-facto option for implementing multi-language support in React applications.


There are some other good alternatives as well.

This also has support for other libraries like VueJS and Angular as well.

Implement multi-language Support in React
*In 6 easy steps*

10. Animation

Animations bring your application to life. There are some good options to use animation in React.


Plain CSS is the best way to animate a React application. It’s simple and fast. Also, this is more performant.


If you want something that is ready-to-use then here are some recommendations for you

11. Long List Render

Rendering a long list can hurt the performance of an application really badly. Using a library in this scenario can be a good idea.


If you have some kind of infinite-scrolling application then you should consider React Window


If you don’t need an infinite scrolling list then you can just paginate the data

How To Improve Rendering Performance in a 1,000-Item React List
*Let’s ensure that our web apps scroll efficiently*

12. Code Quality Tool

Linters can find any error in your code statically. It’s a good idea to use some kind of linter.


The go-to solution is Eslint


  • jshint -> Old library

  • tslint -> Linter for typescript. Not recommended now.

How to Add Linting and Formatting for your React App
*Get this right, otherwise your code will have problems*

13. Formatting

Having consistent visual styling is very important for any application and code-formatter can do that job for you!


This is the greatest solution for you. You don’t need anything else!

14. Analytics

Data is the future. Most businesses today are data-driven. So having a good analytics tool for your application is very very important!


The most popular and powerful tool for the job is React Ga.

I don’t think you will need anything else.

How to Setup and Add Google Analytics to your React App
*Google has made it really easy to gain insights into your web application*

15. Testing

I don’t need to reiterate how important testing is for any application. So here you go.


The recommended way to go is React Testing Library

It is very easy to use and designed to follow real-life use.


  • jest -> For unit tests

  • cypress -> For end-to-end test

Everything You Need to Get Started With Testing in React
*A gentle introduction for beginners*

16. Building sharable components

If you are in a large team then sharing components easily can become a great concern!


Storybook is the way to go if you are looking for the most complete solution

That’s it. I think now you have a pretty good understanding of which library to choose when. Let me know if you have any different opinions.

Have something to say? Get in touch with me via LinkedIn or Personal Website

Top comments (21)

adaptive-shield-matrix profile image
Adaptive Shield Matrix

Is this list generated by OpenAI from from 2018? The entire list is outdated.
Everything listed here was true maybe 5 years ago. Now everything has changed.

tslint and jslint -> are dead/abandoned.

Formic - causes horrible performance / re-render problems.

State management -> jotai does everything, all in one, with ease and without having to maintain a global app state, you can just use the depending atom-variables directly.
The use of Redux is discouraged by its own authors (redux toolkit is recommended instead). Redux got so much bad flag because of its verbosity. Having to use it is not a requirement/given at all, more like an indication of historic, old (or less charitable legacy) code.

All of your listed styling options are no longer recommended, because their design causes extra re-renders in SSR (Server Side Rendering).
Styling is best done by tailwind, it completely beats down any other competition (all css-in-js) in ease of use.
People vastly underestimate how productive you can be if you can just copy the html from many other tailwind components, templates or even complete websites.

UI Libraries -> shadcn practically beats any other in popularity rise and ease of styling. Alternative radix themes.

MUI (I used and migrated from it) -> is horrible if you want to style the components yourself. It may be okay if you are a backend engineer never to customize how things look but its unacceptable if you are a frontend developer who wants to decide how the UI elements look.

Styleguidist - is questionable as well. Every new framework/build-tool like Next.js/Vite can render MDX (markdown with react components inside).

brense profile image
Rense Bakker

100% agree, except on the part that MUI is difficult to customize. They include many examples of how to completely override the default material styling. At the core you're just left with the material semantics and even those you can override now, without losing strong typing. Thats said, I'm hoping that all these styling technologies will be surpassed by PandaCSS (tailwind has some really big drawbacks as well).

adaptive-shield-matrix profile image
Adaptive Shield Matrix

That are the big drawbacks of Tailwind CSS, except the package size?

Thread Thread
brense profile image
Rense Bakker • Edited

It is really bad at doing dynamic stuff, even with jit and safelist and applying conditional styling based on component props turns into a gigantic mess. CVA solves all those problems.

Thread Thread
adaptive-shield-matrix profile image
Adaptive Shield Matrix

So you mean to say it only has big drawbacks if you do not use the most common ecosystem tools like tailwind-merge and CVA?

I use it daily and have not encountered any issues with tailwind itself.

I love how you can just grab and copy the html code from any other tailwind component you can find on the web and it just looks completely the same. No other styling solution can do that.

Thread Thread
adaptive-shield-matrix profile image
Adaptive Shield Matrix

Honestly, I would not count something a big drawback if there is an easy and clean solution (to the problem of applying conditional styling -> tailwind-merge and class-variance-authority).

A big drawback for me is if there are absolutely no solutions and you have to debug, fix and solve it yourself.

Thread Thread
brense profile image
Rense Bakker

Tailwind merge doesn't solve the problems with dynamic class names and you still have to write a lot of conditionals inside your components with tw merge. Yes you can use CVA with tailwind to solve this. Have a look at PandaCSS...

barrymichaeldoyle profile image
Barry Michael Doyle


barrymichaeldoyle profile image
Barry Michael Doyle

I can agree with many of the comments that this looks like a very out dated list generated by ChatGPT. These tools all sound great if you were talking to me 5 years ago. But in these days, a lot of these tools are not the first choice go to for developing react applications.

I mean literally, the link to react-query points to v3. We are currently on v5.

I'd recommend deleting this post because it is misleading.

eidellev profile image
Lev Eidelman Nagar

Excellent post!
A small suggestion, if I may:
I personally had a very bad experience working with gatsby (granted, it was some years ago and things probably improved since). A couple of better alternatives to Next.js IMHO are and a react SPA using Vite.

adaptive-shield-matrix profile image
Adaptive Shield Matrix

Gatsby is dead (or you can call it in support mode if you are more charitable), abandoned by its own creators.
Using Vite, Next.js, Remix -> is 100% better, easier and more recommended.

mickmister profile image
Michael Kochell

I recommend using Playwright over Cypress these days. It's a way better developer experience and uses modern js conventions.

sloan profile image
Sloan the DEV Moderator

Hey, this article appears to have been generated with the assistance of ChatGPT or possibly some other AI tool.

We allow our community members to use AI assistance when writing articles as long as they abide by our guidelines. Please review the guidelines and edit your post to add a disclaimer.

Failure to follow these guidelines could result in DEV admin lowering the score of your post, making it less visible to the rest of the community. Or, if upon review we find this post to be particularly harmful, we may decide to unpublish it completely.

We hope you understand and take care to follow our guidelines going forward!

mohammadfaisal profile image
Mohammad Faisal

Hello Sloan. Sorry for the confusion.

Just to clarify, this article is not generated by any AI tool.

I republished this post. The original post is from 2021.

You can check it here

Also, You will see that is also my article, so I am not stealing it from anywhere as well.

I appreciate you taking a look at it. I hope my explanation clears everything.

Please let me know if you need any details.

neeket profile image


If it is copied/outdated just delete this. It will pass wrong information to learners/beginners.

Image description

mohammadfaisal profile image
Mohammad Faisal

90% of the article is still relevant.
Why would this be copied?

neeket profile image

Adding a 2 years old article regarding information technology especially (programming) when you are mentioning 45 packages doesn't make sense. I confirmed what @adaptive-shield-matrix @barrymichaeldoyle mentioned in comment.

The main concern is many people might read your article and they will have wrong information and knowledge regarding libraries (in present context). Even if you want to post old article make sure you go through it properly and make necessary updates. Wayback machine shows you made updates in article which is fine but by the time you made updates, many users had already read article who now have wrong information.

Medium and articles are powerful. Use wisely.
With great power comes, great responsibility.

Apologies if I have gotten all wrong.

giannifed profile image
Gianni Feduzi

Thank you. Amazing post.

I suggest:

State Management
Easy Peasy: (abstraction of Redux)

Create T3


seandinan profile image
Sean Dinan

Thank you for pulling together such a thorough list!

Already using several of these, but now I've got some good new ones to check out as well :)

shubham-kumar-sinha profile image
Shubham Kumar Sinha

Excellent post!

proweb profile image
Sergey Mochalov

solve javascript library problem with javascript =) funny