We React to State of React Survey

makes, yeah, makes sense. Number 7 is Cloudflare. So Cloudflare's under Netlify,

okay. Yeah. You know, everybody's on Heroku, but DigitalOcean being so low is surprising to me.

everybody's used Webpack at some point. Obviously, Vite number 2, Wes build, roll up, TSC,

static generation. So if you're out there and you're thinking, like, everybody is server side rendering everything,

That's not a language.

one and how, no one's writing static sites anymore.

Yeah. That's a bit of a bummer. Solid. I guess Scott it doesn't make sense that there's other frameworks in here. Right? Then Oh, yeah. Hokey.

Python.

I just launched a static site. Talin Dudsky is a static site, and then my, font generator or type scale generator, static site. I've been using static sites. Yeah. Mhmm. My my Gatsby site is static, and I wish it wasn't. You know? I'm hitting pain points on it. Multi page application Wes.

doesn't seem to be the case. I I do think there's a time and a place for everything. Yeah.

Alright. Well, we'll come back in a year, folks.

Scott land. This thing is incredible, and I wonder if we'll see people start to talk about this for next year. I wonder if I'm too early on this. You think so? compared to Just use divs instead of any web standard? Yeah. Yeah. Yeah.

Heroku, Azure.

React ESLint Library or just Testing Library from Kent C. Dodds coming in. Number 2, Yeah. No. I I think the I think the double rendering Node is that

which I I don't know if a lot of these other ones do. I mean, Gatsby was the whole thing was static sites, but,

So And the the static side is way higher. I just said something about the Deno

century.io

Yeah. That's true. There's there's a lot of things where this works, and you can connect it to a CMS really easily.

Website. Yeah. Website full page reload. It would make sense that that is lower

PDF is surprising to me. I didn't know where PDF existed. I would have thought React 3 Fiber would have been above something like PDF or you know?

write anything webpack. They just it just works for them. Yeah. But 89% Yeah. Oh, it's just a way to we've we've talked about Ant.

shipping a lot of JavaScript, For React apps?

kinda interesting to see that. Number 3, though, what do you JavaScript.

SWR Wes the Node Next. Js was was pushing for quite a while. Was that JS that true? What what stands out to you here, Wes? Alright. So I'm I'm working on sentiment and sorting by the most positive, use Scott, Date pickers.

You know, the meta framework stuff is is so

and beyond is that Hetzner will go from 16 to top 10.

okay, folks. Come on. Okay. I do like that they split that out, though, so it's kinda There's not CSS is not on here.

I believe so. Yes.

Jotai. You just told me how to say that. Jotai? Jotai? state management,

It's it's so funny. I used to I loved Gulp for many, many years. And then until Veeet came along, I I didn't have that same love for anything else.

Yeah. I found Jess to be awful to work in. So

Is 9? Yeah. I would I was I I at that point, I was just I was just working with it because I I can imagine yeah.

Fly dot io? Not working as expected? and then I was looking at, like, state management. And there's a couple spots where I need to

Obviously, wrong. 50%.

Go to the plug in section and be surprised.

SvelteKit is in here. Hey.

we're we're shipping much less JavaScript.

Quick. Why why would SvelteKit be in here? Exactly.

So no surprise that React Native is number 2.

than

Okay. If you have it pulled up on the screen, I I'm gonna pull my microphone, like, this.

Turn around. Yeah. It shows your sweet T shirt from the back. Oh, yeah.

coming above fetch and tRPC,

coming in. And then, like, it just drops off after there. My favorite is the, 13 people who responded with gulp. Let me tell you. I just updated a Gulp file the other day. I had a old, old site from 2011 that I was moving, and when I moved it, I didn't have a a built version of it. And when I went to build it, it was, like, all kinds of issues with it. So I'm like, oh, no. I'm gonna have to debug a gulp file, and I I had to get into that. It was was kind of a blast from the past looking at my old pipelines and stuff.

I haven't heard too much about that.

Man, that's so 13% of respondents Oh, last Node last thing. Yeah.

Well, this is really good for building, like, a doc site.

So

So people are writing React apps back end languages, number 1, Node. Js.

GitHub Pages, Netlify, Heroku.

have used it in the last year or so because that's wild. That JS so many complex things

That's number 4. Number 4. I know people use it with things like Laravel.

to have to custom properties, CSS variables, or or at least similar. So, like, Redwood here, Redwood has probably the I think we we kinda understood the static site thing doesn't work great Wes as soon as you need something that's not static.

29% Yeah. I wonder if it's just doing too much for folks.

63 are writing server side rendered applications.

Number 8 is Ruby.

Well, Oak. Well, I mean, JavaScript.

Look at this. Code highlight Bos Just see how much stuff is here.

like, people do write React on multi page applications, and they just use it for parts of the website. You know? Yeah. It makes sense that that's low. That's probably lower than it actually is because it's a React survey.

Viteast is great because it just works with ESM based sites.

lume? No.

Webpack still So

It's next to the top Node. There's no way around it. Yeah.

Yeah. It's a whole thing, and nobody really talks about framework that much. So I wonder if we'll start to see this pop up on people's answers at some point even by the next JavaScript Are your values having to be recomputed? or, Next. Js. But these days,

My prediction for 2024

Those component is the exact same thing. So if you, by accident, were to have some sort of side effect

That's reasonable. Render?

Yeah. Yeah.

sorry, .net folks. I know you're out there.

Oh, hosting. This is kinda interesting. Where do you host your React applications? We got Vercel, AWS,

in terms of, Not surprising. State management number 7, I'm surprised it's not higher up. State management, there are a lot of great state management libraries out there. Jack Harrington even has a little thing where it's his his pick is Zoos stand, and I'm gonna say give myself some props out here. I did I talked about Zoos stand on syntax in 2020.

I personally would be picking Astro.

solid is has only 19. It makes sense JS it's you're not taking a react survey if you're not building it. You know what I'd be interested in in seeing is this, I felt, like, I found a local guy who would refill him, but then I also found, like, people, like, pipe the whole SodaStream into, like, a huge, like, beer brewing, that's a library in itself, maybe, u state. So Next. Js has the most that component

That is wild. And something useful, or interesting is under the usage JS application patterns 86% of respondents are writing single page applications.

It is surprising that it's for Android is number 1. I guess that's not surprising considering the usage of Android, but, you know, the fact that they broke it out between Android and iOS. I know a lot of people should be looking for though. So more people are building

of I guess, like, I guess that's also, like, have you used it? Yeah. I used it. You Node, like, maybe it should be

Yep.

Yeah. And and the thing about that is it is tough to write an app that works on both of those with the same code base because there is definitely

CMS

I don't know.

Alright. This this is, like, programming languages. Yes. JavaScript number 2.

This is my personal bias. They're yeah.

if this poll was in And I think that kind of mental overhead does cause,

Yes. Oh, UI frameworks that are Scott hot potato data from the vanilla boundary to the React boundary and vice versa.

TurboPack,

Where are you rendering your React? Cool. React dom, the Wes, probably the most popular.

Create react app used to be the easiest way to spin up a React, but it's a little it's not surprising that all these people have used it. I'd be surprised if people were shipping a lot of things on Create React that because it to me, it always felt like this was a starter to just get you going. It wasn't like a platform to build your whole application on. For me, if I was going to be building a whole thing on something, in the past, I would have reached for Gatsby

When you think about this, Jest still coming in, number 1.

still coming in.

So number number 5 is .net, Yes. Strict mode

support the YAML, JSON, or any front matter like markdown?

which we just got a a question asking us to do a show on .net.

Yeah. Let's see the top data loading.

state.

people like Tansac Query

Yeah. Jotai. Redux 40% of people have used it. Number 3, Century, and Ant Ant Design.

Prisma, number 2, are compiled. Like, Panda does this,

Number 3. 1

Number 1, Firebase, half of the people you have used it.

And Yep. Yeah.

ubiquitous now in terms of you're you're building an application, which meta framework are you going to pick. Not surprising, 91% of people have used create react app.

Python number 3. That's number 3. Good. So you have the top 4.

Go.

JS a back end. That's surprising to me. Not that they aren't using it. You're gonna be mad at the first one. I'm gonna be mad at it? Yeah. You're gonna you're gonna say, come on. That's JavaScript.

Astro is my favorite of the bunch of meta frameworks for React. It does things the way that I'm most comfortable with, and it uses enough of the paradigms that I've been used to now. And it also has a big focus on not

Dell Latitudes gotta run something.

x state. A Redux toolkit,

I know. I could be totally wrong on that. I think once people really find out about how fast and cheap those servers are, you know, I I think more people move over. It is cheap, folks.

underrated,

I think people are still

Word. Well, is there anything else interesting in this that you wanted to hit before we got out of here? I think maybe the React versions is kind of interesting.

coming in at number 8. Just 46 people, though.

batteries included, set for efficient Redux development. I don't think I've ever heard of Redux toolkit. It's been around. Yeah. Nothing new.

1st time I'm hearing about it. Yeah. But people like, I think it's big business for, like, utility companies and anyone who runs billing

It was a couple of dark years.

69% Deno. Are are people using d three straight up raw and React? I doubt 45% of these people are using d three straight up because d three Yeah. Isn't exactly friendly to use in that regard. But there are other ones, like, I believe Deno is d three based. Yeah. Nevo is d three based. Nevo. And it makes it so much easier to work with d three. I can't imagine. Maybe people

that because who's who's writing React? And then also But I feel like I remember Sanity.

SWR.

Yeah. Which is crazy. Drizzle's really well liked by the people who use it. But, you know, ORMs are big commitment. It's just something you're picking at the start of your project.

Yeah. Other meta frameworks, Let's see.

That's 6. Rust.

That 10 stat query

Oh, is it TypeScript?

Ruby.

half the respondents of Vercel, which I would say is way more than I would have thought. Way more. Yeah. In in 2024,

are rendering in React PDF.

So I never think of .net. It never comes up in my brain. It just does not exist in there. So Landon's cousins, like, really

put everything to PDF.

Oh, man. It's been around since the days of Redux. 6. Yeah. But 4 is Redux Toolkit.

DigitalOcean was the highest. Yeah. Yeah. Cloudflare,

Yeah. I I never use Jotai, So I I can't I can't speak to a deep knowledge of of this library, but I am aware of it.

popular sentiment probably because it's the largest. Although it does have a pretty large,

Again, like, I wonder if this is And I think the reason why Redux, just like Apollo has a higher negative, Redux has a 36%

that feels like it's on the way down. Nothing against Apollo client. I you know, I used Apollo

middle, which is, like, not enough.

a large so that you don't put it too high and it doesn't

is an atomic approach to global react state. So you could think about anytime you're having global Scott,

12% positive.

What's the most negative? Mhmm. It looks so good by default that people just keep the defaults because that looks sick.

that means that down the tree. I much prefer the Svelte in that way where you can simply just import But I do you do people that run Next. Js know that they're using Webpack?

But a big old middle of people who haven't used Reactaria is great.

Mhmm. And m u I. That's Material UI and Ant Design. Why do people not like Ant Design? I don't know anything about it, to be I I never usually reach for any of these types of things. So you know, the whole thing with Astro was like,

so well used, Same with, like I bet that's why material UI is on here. You just get so sick of

microstates and macrostates.

has gone down JS that people have realized, oh, I think Vercel uses a stale still while revalidate I have Deno use for that. Same. I've had zero use for that for for many, many years. So a lot of the, like, new CSS and JS

usage

Reactaria has a a good one too. It has a really low negative and a Where's where's that? It's number 9 on the list. So it has a good size positive. So 30% positive.

that's I I'm mostly just, like, researching it. I didn't actually do it.

have used it, and such a tiny percent of people dislike it compared to the Next. Js thing Wes it's, like, nearly the same amount of people have used it, but they have a much higher dislike ratio. Not to say that that means Next. Js is bad. What I'm saying here is that 10 stat query is just beloved. Same with, we got Zustan on here

Yeah. I honestly think it might be. Like, a lot of these

Jotai? Jotai. Yeah. Jotai.

React ARIA, Radix, Shadzian,

and a decently sized

for what I'm doing because what I'm doing is a small thing compared to this great big old thing.

of respondents yeah. State management, it it's tough. I do wish

the biggest

your

is just at number Wes. And, again, there was a time when every single app you did included Redux.

for a long time. It's just a whole ass project. It's a whole thing you gotta bring in. Yeah. I'm I'm I'm telling you that the reason why Apollo is is going down is the same reason

Gatsby, Mhmm.

People have heard of this and then

state management library. I believe it's it's also from the the folks that did Zutai, where, like, Zutai is a bit more like you're creating state outside of your component tree. Jotai So it's interesting to see that it's not only, like,

like, focus on it because, like, there's plenty of websites out there that use Redux as a very complex

Yeah. Apollo ESLint. You know, there was a time, Wes, Apollo client number 16, where 24% of people responded positively, 57 have nothing, and and 18% of people have a negative sentiment. There was a time when Apollo ESLint was the show in town. Right?

is great. Then people filter in and say, oh, they're so and so is using Redux. That means it's great. I need to use it. I use it. I find it difficult. I find it overkill

never heard of it, like a large Node negative or a positive, but just kind of a middle it's amazing because I can use the Zoos stand React store Drizzle Yeah. So what I'm looking for in this list is something that has

recoil where you're creating

negative as well. 10 stack query coming in very closely behind. Mhmm. The 10 stack stuff always blows me away that a slingshot create React app, Redux, that then everyone starts getting used to it. I I bet we're gonna start we're gonna see that with Shad Sienna in a couple Yarn. Even though the whole point is that you you customize it to your own likings Meaning that Hetzler would beat out React renderers.

Yeah. I don't know. I have no idea what people don't like about it. If you're out there, you're using ant design, and you feel negatively about it, let us know why. Leave a comment below. I'm, I'm interested to know what people don't like about it. Because without that personal experience on things, you're only guessing. Right?

way overly complex for the majority of things that people were trying to use it for. They were trying to use it for their blog or something like that. Yeah. Even like the syntax website down with mosquitoes.

you know, like dislike ratio time, but it's also Yeah.

you know, you would probably reach for Jyoti.

1 guy or it's not just 1 guy anymore. But Yeah. It came for 1 guy. Now it's a whole thing. Can make such a big difference. It's so beloved.

which is a bit odd, but I guess, like, that's 39% of respondents use none, which is probably because they're using

but there's a lot of other websites that just made a mess of it. And then now it's too hard to add stuff to it, and it's too hard to sort of maintain over the years. Yeah. My theory is that, I I people just responding. Yeah. People yeah. What are you using? I'm not using React anymore. Quick makes an appearance. That's that's cool. There you go. 4 only 43, though. There's, like, 10,000 people that took this.

is just below it. And so it's crazy to think that

it's just it's only the amount of time. So what's on the list? Astro. Astro shot up in the last year or so. Tons of people are loving it and likely time to check it on out. TRPC, same thing.

why GraphQL

Redux was a great fit for that despite the fact that it was a Scott of work to use. Sanity, I don't know about you all, but, like, mosquitoes to me, I hate mosquitoes. In Colorado, Form form management was a big one. Forms and forms are endlessly easier. Node even just a form tag, but, like, binding state for a form makes working with forms so much nicer than the unchanged business that I I I just remember writing a 1,000 unchanged events for form elements, and then that forces you into using a library. That library brings on a whole host of dependencies.

Like, in, you know, number 16 in the list of things that people are talking about. And GraphQL, man. X state, which is like a much newer project,

negative sentiment, which is insane to me because Redux is actually great. I always really enjoyed working in Redux. There was a lot of really interesting things about it, but it was

people who build really awesome complex things were like, wow. Redux would not need something like Redux. But the applications that needed something like Redux, which JS, by all means, a very structured approach to your application state,

that are fun at first because you're using new tech. But then if you really don't, These these are probably the things you should be checking out, the things that have a good positive and a large and have never used it before because And with the React compiler, that's going that it's it's out, but I think once we start to adopt it, that's another API where you simply don't need to parcel, and TSUP React themselves for better error boundaries, better ways to catch errors, better ways to rehydrate everything. So you're gonna wanna throw a century in your next re React project. Check it out at century.ioforward/

React Bootstrap, Top 10 state management libraries that are using. Number 1, US Scott. Obviously, it's the biggest one. Zustan, positive over negative

Jotai is another, this week.

d three to me is just such a not it's not an unfriendly API. It's just a whole thing you gotta learn. It's a whole big thing. Yeah. I

Accessibility stuff always piques my interest.

library or website to the material even website, it's like, I don't know why I would pick React Bootstrap.

super performant everything. Yeah. But it's way harder to debug. And Yeah. Then you might like, in Texas thing and say, why isn't this not in the right spot? Let me change its spot.

is compiled at the start, and it's not part of the JavaScript runtime at all. And you're simply just using it to to do the scoping.

or Vue style CSS because there's nothing better than just writing a style tag and writing your CSS in there and knowing that it's Scott to that component, which is really what styled components.

The the most positive is React ARIA. Let's see what people have to say

of people using lots of bloat

No.

Maybe we should explain that. Style components had had a couple benefits. The first one being that you can Alright. Should we move to to libraries? Storybook, Cypress, Playwright, after a couple years of usage Welcome to Syntax. Today, we have the state of React 2023.

are at the bottom of this list in terms of how people have used. So wow. It's wild that so many people are using material, and React Bootstrap blows my mind that that many people are using it. Yeah. If and I also like this because you can see what people are saying about, yeah, the this

this might have been somebody on Twitter. Because when we posted the episode, You know? Yeah. Architecture. And, honestly, I think that's why I was thinking the other day, like, why is, like, quick Scott taking off as as much as it should be? You know? We had Mishko on the thing. It makes a whole lot of sense, without because JavaScript does number 7.

TypeScript Bos, use it anywhere.

too bloated.

we got a lot of people saying, you should check out x, y, or z. And I I encourage people to add it to the show notes Mhmm. Because it's the show notes were a great resource of all the different UI libraries.

and then my

That's I I feel like that is a a and that's really fun as well. So I'm interested Big fan. In what age you felt comfortable

I have it in my, in my Deno, Tolinski demos.

I'm I'm looking at my own Wes.

to a specific component and not have to worry about a whole bunch of class names and and whatnot. And the other benefit was that you can use JavaScript inside the the CSS. I mean, that you can Mhmm. You can bring in props and interpolate them into value. Honestly, now that we have CSS I think I'm out of bullets.

like, isn't details like he can't open multiple at the same time? Nope. You can as have as many as you want, or you can put it in the exclusion mode where only 1 can be open at a time. So you can choose. That?

I I don't know. I sometimes I feel like, yes, accordions are better when they animate, and it's not impossible with the details element. It's it's trivial to build even, like, a Wes animations API

Didn't details Node to be updated for React Vercel components.

is 3 is a big old thing. As well. Yeah. What But d three is SVG. Right? You know what? I it would seem to be that that's the case. 3 j s Node PHP.

Chakra does it already.

scope your CSS. You can write your CSS in a component and then sort of just associate it with that

you get really performant everything,

You know what? I I still stand by. I would love React to have a single file component system where you could write scoped CSS in CSS. Like, really, what I want is React to have Svelte style CSS

why they don't like it. It's a modern day bootstrap. TypeScript support is support JS poor. Server component support is That's good. Dataviz,

Details in summary, it's it's there for you, folks. It it Yeah. I don't need I I the only downside to using details is that it's hard to animate. But, like Yeah. Do accordions

None. Oh, no. I guess that's yeah.

I can tell you exclusive.

I need to find a solution for that.

slider I have I have a lot of,

I know. It's it's it's a great little site. Yeah. Does this use does this use web standards?

Chakra, man, it it for me, this list feels inverted because all of the ones that I have liked Yeah. Yeah. For sure. Component libraries. Yeah. Component libraries, which we're really just talking about right now Yeah. Already. But here's, like, a focus section of component library. Surprising to me because maybe I'm not as up in this in this world as I thought I was. Yeah. But MUI, what is it? Material? What is it? Material?

so many people bought into style components, myself included, but we got, like, I don't know, 6 or 7 guns, and we just, like, have the perfect house for just hiding around and pegging the kids off. And we have the best for social syntax. Check it out.

SVG. Yes. It's all SVG based, which is is better because then you can at least use CSS to change the color of things and and listen for click elements and whatnot. Doing it in Canvas is a sometimes you get better charts, but

One of the things that I used to do, Wes, with styled components was I would just make a wrapper component Because you can see the, you know, 44% this is really how people Lume? Have you heard of Lume or Lume, There's one that got 30% of the votes in the other component libraries called Mantine. I've net or man Sanity. Mantine.

The tag is so what you do, Wes, is on details, you give it a name. So if you have details, you give it a name, and then you give another one with the same name, then only one of those can be open at the same time. Okay. Yeah. I like it. I like it. Daisy UI, Tailwind CSS, You know, we had a whole week. The kids had their cousins and stuff. So it was just like a wild, wild house for a little bit. And it,

with, the accordions element or details element. But, yeah, it's been in Chrome since Oh, I'm doing good, man.

Let's, since we're at 39 minutes, let's move into the back end and infrastructure, which is the meta framework world here.

solutions that that you can you can sort of keep the same API so you don't have to rewrite everything, but be able to use them with server components. So 67%

I don't wanna put this on React folks, but I do feel like that's a thing that you it's easy to get into that mode with React, thing. It's like a little tube, and you put it has so many trees and so much shade that we got mosquitoes here. And I'm like, I'm I'm having, like, a I don't know, man. I'm just gotta get rid of these mosquitoes.

66% picking up if you go or I also because a lot of these UI libraries like, we talked to the shoelace guys about this, is that the the shoelace is is trying to be built as a modern version that's using all these web standards and having to polyfill them where they don't exist. Mhmm. So I think that the next generation of these libraries will will use them. But, yeah, like, that details has been around. What what did you tell me last time? 2011, the details element has been along. At least use at least use the details tag.

Yes.

I know. Yeah.

There's no easy ways to use built in customization.

Yeah.

Oh, you have your database. You have your Wes API. You have a GraphQL on top of it that has a bunch of resolvers to your database, and we swung so hard in the other direction to Tools, testing libraries.

I I wanna know. Like, people there's no way that the how those people are using d three themselves. And recharge is built on d three as well. I mean, so many of the the good ones are built on top of of d three. Is Nevo is SVG based, though. I use Nevo for the,

CSS.

d three, Recharts,

sometimes the positives of these libraries is also the negative of people don't wanna be have to fuss with that. Yeah. Hey, Wes. Scroll down to other component libraries.

out of all of these, which I would have said

I've never heard of Mantine. This is the 1st time I'm seeing it. Looks pretty nice, though. The site looks great.

folks. About mantine. I don't think we did. I could be totally wrong on that. I feel like, oh, you did. My gosh. I am so wrong about that. How have I never seen this? Node. It's just a it's it's just

Shout out to the mantine, to Scott you're just a little bit of churn at that point. Yeah. And and number 8 is taint API. I I'm gonna say, I've never heard of the taint API. And I gotta

And, actually, Josh Komun has a really good blog post that, like, details. It's like, oh, so you wanna use React Vercel components, but you're using style components? thing where you can refill it. Like, when I got into the SodaStream syntax.

Material UI. Yeah. Material UI

very surprising to me. Yeah. Same. Maybe not not that surprising, but

Kinda gives confidence that it would be a good choice. There's a lot here. Seems like there's a lot of useful components,

interesting.

That sounds like a skill issue.

This one fully featured React component library.

yeah, material, react, bootstrap, antesign, Radix,

that was the styles for that component, and then all of my styles would be scoped to that component. So I was using all I'm using it for. Yeah. Styled components as a means of scoping to this component instead of maybe writing you Node, here's a button. Here's an h one and and bringing those all all the around.

Really powerful, but the cost of being really boilerplatey, I don't know, 24 or something like that? Yeah.

SVG.

three mixed up all the time. Yeah. 3 JS. That's a whole another different thing. I wasn't sure if d three used Canvas or not, but you know? JavaScript library for just spoke. No. This is all Yeah. For sure. Next one up is memo,

Here's a couple I'm translating the docs for the taint API into Chinese.

that's a pain to be outside.

solutions I I'll just throw it on the window. You know? Window Scott whatever.

on SaaS and CSS. Wow.

But, React Native for Android than iOS?

specific component, and that people still love that being able to scope your CSS a thousands of Nerf guns because, like, everybody gets them for their birthday or whatever. And often, like, I got this one. It's like a $160 Let's talk about build tools.

2011, Chrome version Wes, pretty much since the launch of Chrome.

Yeah. You can But you're you don't you're not writing I know. I know. Say most Next. Js users don't write a webpack config. They don't Totally. They don't

If you look at the website for React Bootstrap, it does not instill confidence to me that, like, this is a good looking UI library. Like, if you compare the React Bootstrap

React Motion.

was different. I would have maybe said that, yeah, React ARIA, which is last on the list Wes it would be way higher in terms of usage. I would have thought shad c n would have been way higher in terms of usage.

about React Aria.

details.

Tailwind, but

Animation, framer motion coming in at number 1, React Spring. Number 2,

That's higher than I would have thought. Yeah. Where's the straight up post CSS? I I think that's a little bit more difficult than the actual modules probably.

Material UI Here we go. Alright.

a lot of nice form components. I have no idea what the API working with the API looks like, but it kinda looks nice. I kinda dig this site.

on stock components I was like, alright. Well, I don't wanna write the whole checkout in you don't hear a ton of people talking about using or using Quicken. It's because, I think, because, a, it requires a bit more of for I don't know, a couple of months ago.

Next thing you know, you're loading a ton of stuff that you don't actually need just to save yourself the time of doing some, you know, on change events.

in vanilla JavaScript without any of the the React APIs.

React server components is number 1, and I think, yeah, that is, like, not a surprise to me despite the fact that I think the React server components API is really great. I just think folks looking at it are now having to, like, reevaluate their whole stack, and it feels like it's over whole new thing to learn, And it's not just a new thing to learn. It's a whole new,

we had talked about Zustan,

As I get more into

Allows you to skip rerendering of a component when its props are unchanged.

this is like a vanilla API,

those things are not necessary anymore given React nineteen.

what kind of implications that has. So either reducing rerenders or reducing data creation on rerenders or function recreation on rerenders.

JS when you're

And that was a huge pain point, and that's by far the most

I have not used memo here. I've used use memo. What is memo? No. For back end languages. I know, but this is like a React survey.

And CSS tools and libraries is kinda interesting as Wes. What people are using, 67%

run your components twice. It's a little bit annoying in development because your console logs will Yeah. Will show up twice in the thing, and and it's really confusing.

UseEffect, I think, causes a lot of people who aren't familiar with how this stuff works

and product you're currently on. And I was like, like,

they're essentially the same thing. There's obviously some small differences there, but the whole idea of having to memoize your components is a pain.

And I'm stoked to hear about this because, you know, I I at one point in my my life was very deep into the React Sanity. So, I don't know. Maybe I'm selling people short here, but

What is happening? And is this re render expensive? Android specific thing. So you end up writing either 1 or the other or or have a both with a a bunch of extra components.

from the vanilla API about what course just go all negative. And it's because we build these really Yarn, complex monsters

what the outlook looks like from the Sanity,

the foot guns, there's a number of foot guns performance, foot guns like needing to use use memo or use callback. So I I can think of a host of things if I were to list my biggest pain points. And, oddly enough, the the 1st biggest pain point on here is one that I felt like I didn't have to use that much in React.

where

Fatigue.

Yeah. Yeah. That's MPA is, like, your your typical

You know, I What else is in here? Create React app.

I browser standards or I think so. I don't think so. If you're using Webpack, you know it's Webpack because

it's interesting for me to see the evolution. But what I'm most interested in seeing is,

that means that your component somewhere has a side effect where you can pass data into it, you find yourself, like,

your your data store and not have to worry about that type of thing. Yeah. Next step is one that, like, really, I think, hits a lot of, developers at at some point in their career.

interactive code or writing cool experiences. I'm worried about how many times this component is being rerendered because it's an expensive render. Right?

in development, it will rerun your component twice to make sure that the output of your

in a developer survey like this.

improve And Astro, pretty high. Sorry. It goes Remix, Astro, tRPC, it's not giving you and this is a a React API.

libraries like Shad CSS, where you you write, like, sort of a composable component,

yeah. That's where compiled languages really come in handy because you don't have to have a dependency array. It can know which variables are changing. So dependency arrays useEffect, those are very much in the same regard. And, like, all of these are really except for state management. When you get down to number 5, that's where it kind of changes. But 1 through 4, useEffect, dependency array, useCallback, and use memo are all about controlling how how when things rerender,

most voted one here.

I kinda wish there's gotta be a better way Oh, look at this. Other Vercel.

worry about that anymore.

So about 4 years ago, I was up on Zoos stand because it is, in my mind, the cleanest way to write state and react. And Yeah. And it's funny Wes recoil and all those came out, I was just like, man, why aren't people talking more about Zustand and their their suite of of state management libraries? Which

Google, why is this running twice?

will

you're gonna have to learn them, and it's going to be a little bit annoying Speaking of crazy, Ready? What's the number 1? Give me top 5 back end languages.

which if you break it down, it it it breaks it down into the API itself and excessive rerenderings.

you load a component, Redis, super base, planet scale, Upstash.

down

it. Yeah. Yeah. Next up, we should talk about the hooks pain points. It's wild that they said main API pain points, hooks pain points, new APIs pain points. They Scott have 3 sections of pain points for React in here. It's kinda wild. UseEffect being number 1, obviously.

Meaning that, like, the vanilla needs to know if something is currently in a loading state,

in vanilla JavaScript. That's that is probably a a recipe for pain because checkouts are so complex. Right? So I was like, I need a framework just for for that part. So I I I rewrote it in React, gun. I got it for $10.

really some data around all these new APIs because it seems like in the past couple of years, these new APIs have really changed React in a big way. And maybe not necessarily how you write React, but what the things you can do with React are. So I I'm very interested to see kinda taking a big hit, you know, what what people are are talking about right now. Does a whole

I don't know.

Let's start off with the API pain points, because this is generally something that would make you jump ship away from a framework JS that you are frustrated. Like, maybe I should ask you. Like, what are the reasons why somebody would move away from React? Those API pain points. There's, by far

And this is to be, you know, potentially getting themselves into situation where either their code isn't rerendering when they would expect it to or it's rendering too many times when they're not expecting it to just because of the whole dependency array thing. And that's where compiled

rerender in React land, which is we have recently got into Nerf guns at our house because I go to a lot of garage sales.

Svelte is a little bit more more simple, browser standards. Just the general complexity of needing to do things state management.

instead of having to pass it in. So that that is a a pain as well. Yeah. And this is why I think, the most.

So for me, I think those types of things, simplicity,

then that's a lot of complexity. I don't either. Whereas, we swung so hard from

beautiful. I I absolutely love So I would highly recommend Being a parent humbles you because our kids have as to where everything's at with the the React world right now. So we're gonna dive on into that. With me is Scott Talinski. How are you doing today, Scott?

component rerenders.

And I could just set values from my vanilla JavaScript, and it would just immediately

react might even have brought like, was it recoil? I wish they kinda brought in recoil. Right? filling the space of

doesn't give you too many rerenderings

blasting console log twice. I know. You know what? JS, one of the number 9 on this list Wes is double rendering, so I feel like that's the folks who don't know that it's strict mode causing the double rendering.

folks really like frameworks that are tracking values, right, rather than necessarily tracking renders because it it feels like a little bit easier to say, did this value change rather than did this component change, and I have to update the whole thing, and maybe a function is being recreated twice.

I'm thinking of the deep meaning of the word taint. The explanation taint is to damage or spoil the quality. Yeah.

And then if it will run it again. And then if that variable increments And at that time, I was looking at tech to rewrite my checkout.

Mhmm. That's another really annoying one, and I don't think that is solved with the having to forward the ref of another DOM element, especially when you're trying to, like, bridge the gap between now we're at a different spot Scott, maybe we shouldn't be using style components for absolutely everything, especially when we get into server component world.

the same inputs with the same outputs, and that's going to cause you to have a bad day. And it's also React is going to have to rerender everything for you. So strict mode will

say, they couldn't have come up with a different name for that. With nobody was like, let's, like, let's reconsider the word taint for the taint API. I feel like that's a little ridiculous.

I don't know. That's interesting. I I'd never heard of that before. So I I saw that, and I was like, what the hell? Yeah. Let's move on to library so we can get off the pain points. It's enough pain for this episode. Because we been tainted. Yes. Using React certainly isn't all about pain JS, a lot of people are extremely productive with React. So let's take a look at the sentiment for library's experience and sentiment. That's interesting. The library experience and sentiment. We're looking at the sentiment of this. So

makes things a lot easier. However,

like, thinking methodology.

Yeah. Oh, actually, let's talk about really quick the new API pain points, and then we can get off of pain points because Okay. We don't wanna talk about pain for the entire episode.

Wes, like, maybe in your component, when it loads, you have, like, a a variable called count, and you increment that by 1. And then you display, I've been rendered once.

The third one is the the context API, Heroku. Damn. I know. I know. Heroku's has component library. Tailwind's not a component library.

What is the taint API? A taint object reference, taint unique value.

having to, like, guess where you want to put your context provider And I I feel like there's a lot changing but

Fatigue. Yeah. Just too much going on. What other reason? Why did you move to to Svelte?

a thinking approach that's different than what you've done in the past. And, b, it requires, like, it requires buy in at a at a bit of a higher level. And and React Vercel components has has both of those things as well. Not that they're bad. I think React server components will greatly, are

feel either positive, negative, or neutral, haven't tried it on various things.

And, thankfully, And around that type of thing where you're not just

my course websites are all vanilla JavaScript.

And what happens when that component rerenders? Is your Yarn your functions being Yeah. Can that's the whole thing about Canvas is that, I don't know if we should get him a Nerf gun right now because we know the first thing he's gonna do is shoot his sister in the eye. Yeah. So, like,

and get rid of a lot of the pain points we're talking about earlier. You don't need state management. You don't need a lot of these useEffect hooks or anything like that between React Vercel components, form actions,

to 2,

But every time I did use it, I regretted the fact that I had to use it, and that was forward ref.

And and that was okay. But then I was like, I kinda need this to be reactive because it's it's loading. Right? So I I use Zoos stand, and

So we're gonna be talking today about the state of React.

I feel like it's the end of the day Friday just because of, you know, just how crazy all the kids can be and stuff. You know? strict mode, which in in React world, strict Node, I I I couldn't even tell you what it does beyond the fact that it made me Google why is this running twice. What does strict mode do, Wes?

But they also do a whole bunch of surveys in different areas, HTML, GraphQL.

Doing real good.

Nice.

Today, we got the results of the state of React, which I thought was super interesting.

yeah, back in the flow of things. Yeah.

A lot of you are React developers. A lot of you have touched React at some point, It was the best.

in your career.

in React world right now, and I feel like this will give us a good temperature Jotai.

Sentry has the best support for all the different ways to integrate React, and it is fantastic. They have a massive SDK team always looking on that, and they're actually always pushing and the React app needs some data passed from, seeing websites that look like that even though, like, that's not the point of it. The point of these these things are that you can customize them till the hills come home, and you can make these beautiful, reusable, accessible things. Sometimes when they come with really nice premade CSS, the syntax charts thing that we built. Oh, yeah. Built on top of d three and React. Yeah. Oh, but d three d three is So yeah. And, apparently, it's 70 70% butane, 30% propane mix in those ranges.

Let me tell you about Sanity. If you're writing React, whether it's

That's good. Yeah. We're about to do that next week, which is we're recording on a Monday right now, which is usually what we don't do, but we're gonna do that with all the cousins next week ourselves. So excited for that.

Yeah.

Just,

have a bunch of family over so you know how that that, you know, you you're getting your your space back after Sanity visit, but it was a lot of fun.

no. That's a that's a bad position. No. Speaking of crazy, your application's crazy.

Yeah. Yeah. I know the kids the kids had a great time. They did all kinds of stuff, and, we ended up going to a water park here and stuff and did all the things. So, yeah, it was a blast. I am exhausted, though. It is it is Monday, and I feel like it is,

mosquito

for a while,

repellent

Yeah. Nothing's due now there.

Oh.

Interesting. Beautiful. I was I looked into it a while ago because you can there's a hack to refill them.

Super fun.

you know, fond memories of playing with the Nerf guns as a kid. So Yeah.

brought the Nintendo Switch into his life

of respondents are on React 18, which I think says a lot about React's upgrade path in that, like, yes, there are new things. But, 2015 shows that To to take on a new ORM to an existing project would be very, very difficult. Oh, here. Don't look at back end languages. I'm gonna ask you to guess.

Hopefully, it gives a good glimpse into what the industry looks like right now. I find that super interesting.

he he has these, like, wild fantasies about what Nerf guns will be like. He's like, dad, did you know that there's a Nerf gun that does this? I'm like, no. There's not. Like, so he's like he's he's like pretending that he has a Nerf gun and stuff. And Courtney is really like,

bottle, so you have years years worth of it.

I I don't know. I'll I'll tell you. I said my kids will never have guns and never have, Top 10? Next. Js or whether it's just straight up react your own React that's self cooked or whether you're using Redux or have error boundaries,

you know, we hardly have any mosquitoes because it's so dry here. But the new house that we moved into, like, 2 years ago here, I'd never use that. That was not something I used, but it is interesting because that's a whole host of of issues in React JS that you're always thinking about

So whenever I look into stuff like that, I'm like, there's gotta be some sort of, like, aftermarket 5 less no. 10 less are using style components. So that's that's

But my sick pick today is Wow.

I'm always turning on this thermostat mosquito repellent. And to me, personally, this is the only thing that I found that's actually, like, kept them away from us. So I I feel okay with having this thing on and around.

Number 1 podcast, Syntax. Thanks to everybody for continuing to vote for us. We appreciate you. But that is the state of React 2023.

And this, if we're sitting Scott and watch TV outside or whatever, we have our our projector out or something like that, and I'm getting bit by mosquitoes.

this ThermoCell

this is the most effective thing that I've seen. If you're out there and you have a better mosquito repellent situation, let me know. I'm curious

I think that's good.

like, like, Pokemon shirts and, like, character stuff. And I'll tell you, I was wrong about both of those things.

big bullets, and they whistle when they go past your head. It's like Which do you wanna explain what that is? This is a survey from the folks behind state of everything, probably Scott of JS you're you're familiar with.

and they've been learning the like, That's just a pest.

Cool. Alright. Thanks, everybody, so much for tuning in. Make sure you check out syntax.fm load in some data. It will set something to be true. It'll set loading to to be Yeah. To whatever. And then it will rerender again because now you've set up your data, So most people not happy with any of the statements in libraries, though. It's not surprising. Yeah.

Oh, yeah. The the kids took shot all the bullets out of it. Anyways,

And I love video games. As a kid, I played a ton of video games. But I think something at least like Minecraft is a little bit more creative exploration type than just kind of mindless. And I like I said, I got so much joy with it. Yeah.

like, a hunting slingshot when I was their age. I know. I think about that all the time because

like, go very close to cars and things like that. So I was like, alright. My kids can have foam bullets if I had a Yeah. An actual,

Oh, woah.

the video game thing for so long.

shirts with Pokemon on it, and we got guns all over the all over the house now as well. And writing

Oh, yeah. They're just Or butane? They're just little itty bitty things, and it it kinda cooks on a little little looks like a Listerine tablet that people used to always eat. Remember those? Yeah. The Listerine slices?

requires you to continually buy stuff for it. Yeah.

Yeah. It's it's it's really fun. We gave our kids the like, we bought a like, an original Nintendo at the cottage,

for everything we have, including some sweet swag and all of our latest episodes. Anything else to plug, or should we wrap it up? That's it.

I was like like, ecosystem

giving your kids Nerf guns? Because my son, he's 7, and he's like Did you use forward ref much, or do you use forward ref much? Yeah.

Alright.

Oh, I'm gonna go get mine. Node sec. Okay.

if you if you have a kid in your life, get him a little Nerf gun. This one's a little bit big. We have some of the we got these little pistols that just takes 1 bullet,

It's like, I hate buying candy. That is you. That's so you. Yeah. I well, I'm not a sucker, so I don't buy stuff that

Like, I had I was trying to think, like, at what age? I had a

largely, if you're upgrading, the the breaking changes there are not enough to hold you back from using the latest. Mhmm. So to me, that that's interesting at least that, like yeah. Even if you're on newer versions of React, that doesn't necessarily mean you're having to use all the new stuff to just have it working.

you put these little, fuel cells into them. I don't even know what to do with it. Propane? quite a bit of disturbance in, like, how people it gets in the way. Like, I'm not thinking about writing,

And if you put these these have this is Nerf Mega, which is these big Yeah.

So, like, now he's playing Minecraft on his own on the Nintendo Switch, like, enabled to do it for, like, the first time really. And and Courtney was like, I've been resisting 50% are writing static sites.

And I never realized this before, but every single garage sale has

Mario, and they know where all the hidden lives are and whatnot. And then we we also bought a Wii a while back, but they just have never gotten into the Wii, which is Yeah. Makes sense. I've never gotten into video games in my entire life. I had Oh, really? Lots of them growing up. I just never could get into it. I Wes I I would definitely I've been playing a lot of video games my whole life for a long time. And, one of the things we do as a family is we'll play the new Mario Brothers games because all 4 people can play at once. So all 4 of us can play at once or or play Mario Kart or or things like that. I think that's a more fun experience for us right now than, like, alright. You get your own video game system, and you can just, you know, sit in your room and play video games. No. Let's, like, make a thing at least, like a board game family board game night or something.

when I was pretty young, and I would, like, put rocks in it. Oh my god. Just peg it against trees and, Oh, this is cool.

Wild. Nerf YouTube is is yeah. Don't go down that rabbit hole. But, I don't know. Feel like it's good, and we we're gonna bring them to the cottage. Well. The biggest thing is, like, you have to tell them, like, if you don't pick the bullets up, you're not if you leave them around the house, it all goes in the garbage. We're we're we're gonna sell it all. We're gonna get rid of it because, yeah, otherwise, you leave these bullets. Like, half the part of playing Nerf is, like, sitting there reloading it and, Wes not. That's why this one's fun because you can I think it if it's, like, I mean, x state recoil in MobX.

when is the right age? It's a Deno based pnpm, lume, Wes. Yeah. That all makes sense in terms of usage to me. My favorite of the bunch are the end to end ones where you have, like, Cypress or Playwright are my favorite.

Yeah. Everybody had those things. I haven't I haven't even thought about those in a very long time, so it just kinda hit me that those existed. But,

Let's get into some sick picks.

Should we get into some sick picks?

So I'm going to sick pick But this framework, I think, is supremely serve a component SQL statement directly at the top of the component. You know? And you wanna talk about relations there. Redux

nerf fights ever.

it's super fun. So, like, my youngest is 5, we asked him when he came on. I don't think that's solved with the compiler, but But yeah. React PDF. People

and, he has it on. And we obviously talked to them. Like, don't shoot each other in the eye and whatnot because they can get pretty. They get pretty fast. Yeah. And, like I had one as kid. There's, like, a Nerf modding, like, YouTube.

And if if we're outside and we're staying in Node specific, you know, area, it covers a 15 foot zone. So if we're staying in a 15 foot zone, Jest, I I I found Wes, like, might be different in a Next JS world, but when you get into, like, Vite style websites and this is

Yeah. Those were hot in high school.