DEV Community

Cover image for You Need to Try These 10 NPM Packages as a React Developer

You Need to Try These 10 NPM Packages as a React Developer

Nitin Ranganath on February 26, 2021

As web developers, we tend to make use of several NPM packages on a daily basis for different reasons, from simple ones like adding colors to the c...
Collapse
 
graemegrant profile image
Graeme Grant

Brilliant article took notes of all your recommendations, thank you

Collapse
 
nassimmiled profile image
nassimmiled

Why do we use axios when we have fetch?

Collapse
 
itsnitinr profile image
Nitin Ranganath • Edited

Mostly because it is simpler to work with. Here's an example considering that I want to fetch from todos from a sample API:

With fetch:

const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const todos = await response.json();
console.log(todos);
Enter fullscreen mode Exit fullscreen mode

With axios:

const todos = await axios.get('https://jsonplaceholder.typicode.com/todos')
console.log(todos)
Enter fullscreen mode Exit fullscreen mode

Notice how we didn't have to manually convert the response manually to JSON. It's because axios does that automatically for us. This is just one of the features. So yeah, it saves us some time and lines of code.

Collapse
 
clydegrey profile image
Clyde

You used then for one example and async/await for the other. It's better if you want to show a like for like comparison that you stick to the same approach so that you can highlight just the differences between then two. This makes fetch seem more verbose and more difficult to read when most of that is due to await being more concise.

Thread Thread
 
itsnitinr profile image
Nitin Ranganath

You're right. Edited the example to use async-await in both cases. Thanks for notifying.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
kacperturon profile image
Kacper Turon

well it's not exactly the same, axios comes with backwards compatibility, and polyfills in old browsers, it will work almost everywhere

Collapse
 
geobrodas profile image
Georgey • Edited

Axios comes in handy if you're a Rest-API fan

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

As some have already said it clmes with better browser support and syntax, but it's biggest advantage is having extra features likr timeout request and others

Collapse
 
laszab profile image
Bart

Reselect is already re-exported in Redux Toolkit so there is no need to add this as separate dependency but if you don't use Redux Toolkit which I highly recommend then it's good to use Reselect. Good article :)

Collapse
 
itsnitinr profile image
Nitin Ranganath

You're very welcome! I hope you find react-google-login worthy. Personally, I've used it everytime I had to implement the Google OAuth button and it works perfectly. You can try out the demo whose link can be found on their NPM page :)

Collapse
 
ash_bergs profile image
Ash

I've used most of these and agree, 10 amazing and useful packages. Thanks for the write up!

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you for reading! :)

Collapse
 
dannemanne profile image
Daniel Viklund

Nice summary, thanks!

Regarding the highlight of formik, have you hade any personal experience with react-hook-forms and if so, how do you think those two packages compare two each other?

Collapse
 
itsnitinr profile image
Nitin Ranganath

Sorry, I've not used react-hook-form so I can't really compare them myself. However, I did visit their website and it seems pretty awesome. Their landing page has some comparison with Formik and I think you'll be interested in that. Here's a screenshot for your reference:
Comparison

Collapse
 
ducdev profile image
Duc Le

Please separate form usage from redux, it would be an unnecessary mess in redux history.

Collapse
 
dannemanne profile image
Daniel Viklund

No argument here. Neither of us were talking about redux

Collapse
 
ghadersalehi profile image
ghader-Salehi

good job , useful article

 
clydegrey profile image
Clyde

You said axios is more synchronous-looking than fetch. I was curious how.

Collapse
 
oskarsezerins profile image
Oskars Ezerins

Great post, cheers.

Collapse
 
akh47 profile image
Akhil Kala

Great work! Please do more

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you so much! I'll sure try to make it into a series of sorts if I find more interesting packages.

Collapse
 
tranduclinh197 profile image
Trần Đức Lĩnh

Thanks.

Collapse
 
itsnitinr profile image
Nitin Ranganath

You're welcome!

Collapse
 
clydegrey profile image
Clyde

Not sure I understand why axios would be easier to read than fetch. Can you provide an example?

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you for reading!