My Top 5 React Libraries for 2023

[@gregthomas5887]

1) Zod 2) Tanstack react-query 3) Shadcn 4) react hook forms 5) cn I can attest that these are top-tier libraries.

[@dankos_8022]

Is zod better then joi?

[@filipjnc]

@@dankos_8022 yes

[@contigen]

How about Yup?

[@nicholascostadev]

shad"cdn" haha

[@randyriver1707]

​@@nicholascostadev We dont get why you're laughing. You even hit the like button on your own comment. Lol. Sociopath

[@freeguy2418]

0:26 - ZOD 1:26 - Tanstack React-Query 2:20 - Shadcn UI 3:11 - React Hook Forms 3:56 - Cn

[@shahariarniloy8935]

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. ??

[@spidfair0]

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.

[@rand0mtv660]

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 :)

[@joshtriedcoding]

very good idea

[@potatobot2802]

Whenever Josh uploads a video I know I will either know something useful or it will enrich the vibe! THANKS FOR THE CONSISTENCY MAN :)

[@joshtriedcoding]

Appreciate ya man

[@Saradomin65]

Class Variance Authority (CVA) is also good. Especially if you're working your reusable atomic components from scratch.

[@АртурУляшев-е1ь]

totally agree on that, cva has blown my mind it looks so declarative and easy to use and it gives so much profit

[@reubence_]

I might be wrong but ui/shadcn uses CVA under the hood

[@Saradomin65]

@@reubence_ Yes it does, all the more to use Shadcn and perhaps style them with CVA if you can 😃

[@anonymoussloth6687]

he has a video on them too

[@HussainFazaal]

​@@DiegoDoumecqthey serve slightly different use cases and can be used in combination like how shadcn/ui uses it on their ui components

[@littlehobbyshop]

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.

[@faizanahmed9304]

Out of all of them, I appreciate you added Zod at the top. It is by far the best schema validation library in TS.

[@joshtriedcoding]

Super simple to use and so useful at the same time. Cheers man

[@faizanahmed9304]

@@joshtriedcoding agreed

[@aliarslanansari]

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.

[@rand0mtv660]

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.

[@Rawthul]

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.

[@aliarslanansari]

@@rand0mtv660 this was happening with extended font and colors, haven't tried with default classes

[@rand0mtv660]

@@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

[@joshtriedcoding]

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

[@animegeek-011]

Mad respect for your choices, I am using them as well.

[@joshtriedcoding]

Cheers dude

[@BaldeepSingh24]

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

[@adamjenkins3065]

Thanks for these. Very useful for knowing up to date tech out there for web dev.

[@joarkrohnmauseth8863]

Angular out-of-the-box equivalents: * useForm -> Angular Forms with ValidatorFns. * conditional class names -> ngClass

[@BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's top libraries.

[@joshtriedcoding]

oh my god

[@jitxhere]

Thanks Josh. Last one gonna be very helpful

[@rajmuhammedakbarshineam3313]

Yup is a good library for client side validation, also Joi can use in the serverside validation too.

[@mihaillepadatu8256]

Love your consistency, keep it up🎉

[@joshtriedcoding]

Cheers man

[@barisballi70]

1 - zod 2 - react-query 3 - shadcn-ui 4 - react-hook-form 5 - clsx, tailwind-merge

[@sealone777]

Any recommendations for state management lib? I am eyeing on Jotai but curious what you use. Thanks!

[@faraonch]

I 100% agree with your choice and have been using exactly the same for months or even years.

[@mobix25]

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.

[@joshtriedcoding]

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: kzbin.info/www/bejne/bp7IpWmNidBjo7M

[@mobix25]

@@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

[@igo_]

top tier libs! i have used all of them, except for shadcn, but i'll give it a try in my next project.

[@joshtriedcoding]

let me know what you think about it. I found it super useful

[@anggahermawanAndroidDeveloper]

I've been working on all those Libraries and it's worth it

[@aristide_F]

thank you Josh I really appreciate your content

[@joshtriedcoding]

i appreciate you

[@kristian970]

As always amazing vid ❤️‍🔥

[@fieryninja2374]

In the chapter names Zod is called Zot.

[@nanonkay5669]

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.

[@Saradomin65]

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

[@nanonkay5669]

@@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.

[@najlepszyinformatyk1661]

my fav react lib is solid

[@leekaixuan7719]

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

[@mma93067]

Using RTKQuery with tags has made my life so much easier. People are just afraid to recommend something “redux” in its name

[@oscardasilva971]

Nothing beats the combo react-query + zustand

[@robertocarlosmedina]

Another thing you could add on the backend side is Class Validator to re-enforce the validation, alongside Zod or Yup

[@botprogrammer8216]

Class validator along with NestJs is a deadly combo

[@robertocarlosmedina]

@@botprogrammer8216 yeah you're damm right

[@ergusto]

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.

[@Dysfunctional704]

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

[@contigen]

I'd say Jotai

[@owenwexler7214]

Came to second Jotai

[@bhusanDa]

Hey josh really appreciate your hard work. Can you prepare a tutorial on any project use all these libraries? Love From Nepal ❤ 🇳🇵

[@beancoffee]

haina hola

[@blankcheckguy69]

doesv Tailwind Autocomplete work with the conditional class names hack?

[@dopetag]

Really helpful! Thanks 😉

[@amershboul9107]

the best thing about your channel is that you are uploading videos day after day

[@joshtriedcoding]

appreciate you man

[@firebird77]

Thanks, Josh. Love the channel. What would you recommend this year for data visualization in a NextJS application?

[@joshtriedcoding]

I heart lots of good about tremor, might be worth looking into. Havent tried it myself yet tho

[@totalolage]

I too saw the Reddit thread that inspired this video.

[@sulavbaral9972]

does tanstack query work for server components?

[@AKINOCHOWaris]

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 ??

[@0xahmad542]

as for your number 5th hack, there's already a slick library called `tailwind-variants` which aids in that conditional styling

[@joshtriedcoding]

ah nice never heard of that before

[@leonardojaques6586]

is it worth it adding a library for that tho?

[@0xahmad542]

@@leonardojaques6586 for people who are making design systems: yes very much. For the more casual devs, not really

[@saktipujoedi113]

Thanks for the info man.

[@medalikhaled]

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,

[@joshtriedcoding]

appreciate your suggestion man

[@nilsandresen97]

I was hoping for shadcn and wasn’t disappointed

[@ardianhotii]

Does zod works with vite react js or only with ts

[@brianfarley2723]

When Josh mentions everything in your current stack..😎

[@NiklasZiermann]

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 :)

[@rand0mtv660]

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.

[@hynekss8618]

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.

[@stinjek]

twMerge has tailwind class application logic for conflicting styles

[@NiklasZiermann]

You're right, i didn't realize that. Thanks for pointing that out :)

[@filipniklas]

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!

[@joshtriedcoding]

Cheers

[@MarcusBrose]

Thanks for your awesome videos

[@joshtriedcoding]

Cheers man

[@GabrielMartinez-ez9ue]

Isn't the last function the same as using: function classNames(...classes) { return classes.filter(Boolean).join(' ') } ?

[@rand0mtv660]

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.

[@GabrielMartinez-ez9ue]

@@rand0mtv660 thanks for having the time to respond

[@hn3m3s1s]

I recommend you take a look at tailwind-variants :)

[@saman6199]

Hi Josh, are we going to get any upcoming Next JS project | tutorial any time soon? BTW, thanks for all your hard work. ❤

[@joshtriedcoding]

oh yeah

[@asimalqasmi7316]

How to use react-query with server actions?

[@Code_express]

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

[@youarethecssformyhtml]

People will literally do anything to avoid TypeScript which is very easy to learn

[@JohnMcclaned]

ts-rest 🎉

[@0xahmad542]

Other than that, a good list for anyone who's out of touch

[@twd2]

Awesome!!!

[@plateer42]

Thanks!

[@DeberiasTenerUnGato]

Ey Josh a greeting can I be your video editor?

[@futuristic-]

The react ecosystem is truly huge

[@joshtriedcoding]

Oh yea

[@samuelgunter]

i dont know if it's good or bad that i knew all of these already

[@alice-smith]

twMerge is a fork of clsx, so I think clsx isn't necessary

[@mohitchandola3435]

are u remote developer ?

[@imkir4n]

Josh ♥️

[@AdibFahimi-r2u]

thanks

[@MihirAmanRaj]

I use formik + yup :)

[@Rasty_Boss]

more video about react-query

[@masterlink6173]

❤❤❤

[@baybay1234]

I know shadcn will be one of them before I even start watching the video :)

[@joshtriedcoding]

goddamn right

[@gabrielbianchi2246]

Lmao I’m using all of these already

[@Randomguy48279xyz]

👍

[@rimonsade-jd3id]

😊

[@harunalrd]

first

[@SweepAndZone]

Awesome thanks 🎉