My Top 5 React Libraries for 2023
Vložit
- čas přidán 28. 06. 2024
- With 100000000 libraries to choose from, which ones actually improve your code? Which ones really save you time? Here's 5 NPM libraries I've worked with a LOT and I thought it would be irresponsible to not share 'em.
-- my links
My GitHub: github.com/joschan21
Discord: / discord - Věda a technologie
1) Zod
2) Tanstack react-query
3) Shadcn
4) react hook forms
5) cn
I can attest that these are top-tier libraries.
Is zod better then joi?
@@dankos_8022 yes
How about Yup?
shad"cdn" haha
@@nicholascostadev We dont get why you're laughing. You even hit the like button on your own comment. Lol. Sociopath
0:26 - ZOD
1:26 - Tanstack React-Query
2:20 - Shadcn UI
3:11 - React Hook Forms
3:56 - Cn
Can we have a comparison video like zod vs yup, react-query vs swr, react-hook-form vs formik, shadcnui vs any other ui library. ??
I'd love to see a comparison as well. Personally, I've been using AJV, SWR and RHF in almost every project and they've been treating me well. However, I see a lot of buzz for react-query and zod. Not sure if I should be switching some libraries.
Yeah I use yup usually, but would like to understand all this zod hype in the last 6-12 months. I tried to use both just to evaluate personally and it looked to me zod is a bit better with Typescript in general, but yup handled few cases better when it comes to working with forms with react-hook-form. I remember not being able to provide custom error messages in certain cases with zod for certain type errors, but cannot remember what else I had issues with when using zod in that forms case. I just know I stuck with using yup after that, but I'm kinda reconsidering my evaluation because I've seen zod mentioned so much so I'm thinking I missed something :)
very good idea
I just started a new project using all 5 of these! Great list. I would love to see you run through a video using the shadcn components with react-hook-form. They mostly work nicely together but where I've struggled a bit is refactoring the form inputs as re-usable components with Typescript. I've ended up with some crazy type juggling and there must be a better way.
Thanks for these. Very useful for knowing up to date tech out there for web dev.
Thanks Josh. Last one gonna be very helpful
Whenever Josh uploads a video I know I will either know something useful or it will enrich the vibe! THANKS FOR THE CONSISTENCY MAN :)
Appreciate ya man
Mad respect for your choices, I am using them as well.
Cheers dude
The funny thing is I am using all these libararies currently for my current project and absolutely adore them too.
From performance to DX, all bases are covered in these
As always amazing vid ❤️🔥
Love your consistency, keep it up🎉
Cheers man
thank you Josh
I really appreciate your content
i appreciate you
Class Variance Authority (CVA) is also good. Especially if you're working your reusable atomic components from scratch.
totally agree on that, cva has blown my mind
it looks so declarative and easy to use and it gives so much profit
I might be wrong but ui/shadcn uses CVA under the hood
@@reubence_ Yes it does, all the more to use Shadcn and perhaps style them with CVA if you can 😃
he has a video on them too
@@DiegoDoumecqthey serve slightly different use cases and can be used in combination like how shadcn/ui uses it on their ui components
I 100% agree with your choice and have been using exactly the same for months or even years.
Really helpful! Thanks 😉
Yup is a good library for client side validation, also Joi can use in the serverside validation too.
Thanks, Josh. Love the channel. What would you recommend this year for data visualization in a NextJS application?
I heart lots of good about tremor, might be worth looking into. Havent tried it myself yet tho
Josh, your list of libraries is excellent!
I've had a bad experience with tailwind-merge because it removes text-sm if it is added before text-blue-100. Since one class modifies the font size and the other class modifies the color, tailwind-merge removes one of them based on their order of appearance.
That shouldn't happen as far as I know. tailwind-merge should only remove/merge "same" classes. Maybe you just ran into a bug or you did something and thought it was tailwind-merge issue.
I had the same problem. I didn't test it with default classes, but I was thinking that the reason may be the custom classes that I added to Tailwind's configuration file.
@@rand0mtv660 this was happening with extended font and colors, haven't tried with default classes
@@aliarslanansari oh for those I think you need to set up additional things for Tailwind merge so that it knows how to merge your custom classes. It cannot just assume things properly out of the box
That's an odd bug, you sure it was because of tw-merge? If so, opening an issue on github might be a good idea
Thanks for the info man.
Out of all of them, I appreciate you added Zod at the top. It is by far the best schema validation library in TS.
Super simple to use and so useful at the same time. Cheers man
@@joshtriedcoding agreed
top tier libs! i have used all of them, except for shadcn, but i'll give it a try in my next project.
let me know what you think about it. I found it super useful
Any recommendations for state management lib? I am eyeing on Jotai but curious what you use. Thanks!
Hey josh. I always love how you simplify hard topics. can you make a video for Next JS and Planetscale? and How to add google adsense to next JS 13.4 ? beginner friendly.
Appreciate it man. I just did a video on Next + Planetscale using Drizzle a few days ago with a starter kit to get set up within seconds: czcams.com/video/8met6WTk0mQ/video.html
@@joshtriedcoding I've seen that tutorial, it was amazing as always. but if you create a full detailed video by building a real project it would be great.but i know you are busy, so whenever you have free time and want to create a content this could be it. again You are amazing MAN
Nice video Josh!
What about state management libraries? Those aren't talked about so frequently in the Next ecosystem. Would love to see your take on that
I'd say Jotai
Came to second Jotai
Hey josh really appreciate your hard work. Can you prepare a tutorial on any project use all these libraries?
Love From Nepal ❤ 🇳🇵
haina hola
Thanks!
Thanks for your awesome videos
Cheers man
Another thing you could add on the backend side is Class Validator to re-enforce the validation, alongside Zod or Yup
Class validator along with NestJs is a deadly combo
@@botprogrammer8216 yeah you're damm right
I was hoping for shadcn and wasn’t disappointed
I've been working on all those Libraries and it's worth it
my fav react lib is solid
Hi, just curious but have u tried rtk-query with redux toolkit? I haven't seen anyone talk about this library and I think it deserves more praise
Using RTKQuery with tags has made my life so much easier. People are just afraid to recommend something “redux” in its name
Nothing beats the combo react-query + zustand
Angular out-of-the-box equivalents:
* useForm -> Angular Forms with ValidatorFns.
* conditional class names -> ngClass
Ohhh, so that's what cn() is doing! I saw shadecn's Taxonomy project using it and I was a bit puzzled what this was doing but the idea is super simple and effective. Great list!
Cheers
Thanx for the good content.
you mentioned you did Freelancing using, React, Nextjs.. and all of these technologies, can you make a video about that: the experience, the market,..etc,
appreciate your suggestion man
doesv Tailwind Autocomplete work with the conditional class names hack?
In the chapter names Zod is called Zot.
the best thing about your channel is that you are uploading videos day after day
appreciate you man
Awesome!!!
How to use react-query with server actions?
Hi Josh, are we going to get any upcoming Next JS project | tutorial any time soon? BTW, thanks for all your hard work. ❤
oh yeah
Does zod works with vite react js or only with ts
thanks
does tanstack query work for server components?
as for your number 5th hack, there's already a slick library called `tailwind-variants` which aids in that conditional styling
ah nice never heard of that before
is it worth it adding a library for that tho?
@@leonardojaques6586 for people who are making design systems: yes very much.
For the more casual devs, not really
I too saw the Reddit thread that inspired this video.
I have a problem when trying to validate a user password (with a letter, Uppercase, and letter) with Zod using shema. Can someone help me ??
1 - zod
2 - react-query
3 - shadcn-ui
4 - react-hook-form
5 - clsx, tailwind-merge
Awesome thanks 🎉
The last one is basically the same as the classnames library, in case you dont want to have those 3 extra lines in your project :)
classnames alone doesn't replace that three line function. That last example also merges Tailwind classes using tailwind-merge so that you can override them from outside of the component. He basically copied this example from shadcn/ui setup guide.
So instead of adding props on your component for every little thing you might want the user to override, you can just merge classes using this and let user render your component with different padding, color, margin or whatever else by just allowing them to pass class names that they want.
That last example isn't just about merging class names together, it's about merging class names intelligently when using Tailwind. If you don't use Tailwind then yeah, classnames package will do the job.
I would say these libraries solve different, although related, problems. Tailwind-merge was created to deal with the issue of overriding a class already present on an element. When applying multiple contradicting classes to one element (e.g., two text colors), the one that 'wins' is the one defined later in the tailwind stylesheet, which might or might not be what you want.
twMerge has tailwind class application logic for conflicting styles
You're right, i didn't realize that. Thanks for pointing that out :)
how can i use shadcn ui in reactjs application without using typescript make a separate video sir we are waiting for your response give it is as soon as possible
Thank you
❤❤❤
When Josh mentions everything in your current stack..😎
Impressive, very nice. Let's see Paul Allen's top libraries.
oh my god
Not the best description of tanstack-query, it doesn’t replace fetch at all. In fact it’s not even a data fetching library. I think the best way to describe it is that it’s a library for managing async state.
👍
I use formik + yup :)
Other than that, a good list for anyone who's out of touch
Isn't the last function the same as using: function classNames(...classes) {
return classes.filter(Boolean).join(' ')
} ?
Nope, not equivalent if you want to have the ability to use objects as arguments for for conditional classes. Your example would only support simpler cases such as using ternary "isLoading ? 'my-class' : false", which isn't necessarily bad. Also, his example is a bit more complex because it's Tailwind specific since it uses tailwind-merge. If you don't require tailwind-merge, just use "classnames" or "clsx" NPM modules since those support strings, objects, arrays etc and are super tiny and fast.
@@rand0mtv660 thanks for having the time to respond
i dont know if it's good or bad that i knew all of these already
😊
Or you could just use Mantine. The newest version of Mantine that's about to come out can be used as a headless UI and will be using css modules instead of emotion. It has react-hook-form built in so the Mantine components have first class integration with it, and can be used with zod. I guess the trade-off is css modules vs utility classes, pick your poison there, but Mantine is truly an all-in-one solution.
I read that it's still an ongoing progress to make Mantine work with App dir right? Though the author has added an example of integrating it with app dir, I believe the components have to be wrapped with "use client". Would be good if as much as possible it would be a server side component
@@Saradomin65 yeah they said their components cannot work in server components completely because they use hooks underneath to get things like the theme to work.
Ey Josh a greeting can I be your video editor?
ts-rest 🎉
I recommend you take a look at tailwind-variants :)
twMerge is a fork of clsx, so I think clsx isn't necessary
more video about react-query
The react ecosystem is truly huge
Oh yea
are u remote developer ?
Josh ♥️
I know shadcn will be one of them before I even start watching the video :)
goddamn right
Lmao I’m using all of these already
first