DEV Community

Cover image for What are your Favourite Tools in React, and why?

What are your Favourite Tools in React, and why?

Paul C. Ishaili on March 09, 2022

Mine are: React Router DOM (V6) - For Page routing and views switching. React Hooks - UseState, UseContext, UseRef, forwardRef React Spring -...
Collapse
 
lemokami profile image
Jesswin W Varghese • Edited
  1. Framer motion, easy React component animations
  2. Zustand, state management has never been this easy
  3. React query, easy server state management
  4. Emotionjs, styled components but better ans framework agnostic
  5. Storybook, really helpful to present your components
Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Great list, @lemokami. Do share your thoughts on them

👉 lists.forEach(item) => shareYourOpinion, 🙂

Collapse
 
lemokami profile image
Jesswin W Varghese

console.log("done")

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili

--eslint -- '1 bug found!' -- line 4:42

😊

Collapse
 
hacker4world profile image
hacker4world

React-query for managing data coming from a server

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Very insightful @hacker4world . How well is your proficiency on this?

Collapse
 
anishde12020 profile image
Anish De

Radix UI, Headless UI, Next.js, Tailwind CSS (not React specific but it is awesome), some more small libraries here and there

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Sight you, @danwalsh 👋

Collapse
 
danwalsh profile image
Dan Walsh • Edited

Cheers, @mrpaulishaili! 👋

This is a great list, keen to check out React Spring and UUID when time permits!

My fav tools would have to be:

React specific:

  • Hooks—don't know how I dev'd without them before!
  • Context—because passing props down through the tree is painful

Non-React specific:

  • TailwindCSS—loving abstracting my UI components into reusable React components with atomic classes.
  • TypeScript—helping me write more robust, logical and error-free code
  • eslint—because I can't find all the errors on my own 😅
Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Wow! Well elaborative, professionally specific 🙂!

Collapse
 
1saifj profile image
Saif Aljanahi

Formik, Without any doubts!

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Formik! Tell us more about Formik!

Collapse
 
connectaryal profile image
Shiva Aryal

For me, React Hook Form is also an best alternative for form handling.
For more - react-hook-form.com/

Thread Thread
 
1saifj profile image
Saif Aljanahi

Nice

Collapse
 
1saifj profile image
Saif Aljanahi

Its Form Mangament Library, it will take care of all your inputfields and forms with ease, do validation out of the box!

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili

Wow! I should definitely check that out! Thank you @1saifj

Collapse
 
flyingcrp profile image
flyingCrp

Ok... does anyone use only state and hooks without using any third-party libraries for state management in a commercial project?

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Yes, possible @flyingcrp , third-party libraries however speed things up easier for developers

Collapse
 
flyingcrp profile image
flyingCrp

ok,In our application, all functions are independent, except for the global login status, and after hooks, I can't think of any reason to use a third-party library to manage the state , maybe the application type is different?
No need for deep props passing,No need for share lots of state ,in fact , sometime we can use context to resolve some special case

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Wow! What a great list, @harshhhdev.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Too many to list but shout out to Storybook. A front-end design system for developers.

Collapse
 
resetnak profile image
Alexandr Rešetňak

React query for fetching the data ❤️ -> react-query.tanstack.com

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Wow! Came across this just today and I was like 'what would this be for?'

Thank you @resetnak

WhatsYourFavouriteReactTools

Collapse
 
m0nm profile image
m0nm
  • framer motion: animations made easy
  • zustand: state management made easy
  • react icons Plus typescript: well because it's typescript
Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

You are sighted @jesuscarlos 👋

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

I see you @pfcodes!

Collapse
 
webdevel profile image
web-devel

Check out React Buddy plugin for WebStorm: plugins.jetbrains.com/plugin/17467...

I develop it, so in case of any issues contact me directly :).

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

You are sighted @silencezeng

What'sYourFavouriteToolsInReact?

Collapse
 
vincedaniel08 profile image
Vince Daniel De Leon

UI - Material UI
State - Redux

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

WhatsYourFavouriteReactTools

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

I sight you, @adhirajbhatia ! 🙂

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

@tm_vnthanh_bf930e4e704 What's your thought on this?

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

WhatsYourFavouriteReactTools

Collapse
 
alpharime profile image
Adejori Eniola

React-hook-forms-form handling
Yup- validation
Styled-components: if I need to mutate the CSS a lot based on the props
Tailwindcss: simple and fast CSS
React-router-dom: navigation
React-redux and redux-toolkik,
Framer motion for animation,
Uuid,
Moment,