We React to State of React Survey

Welcome to Syntax. Today, we have the state of React 2023.

This is a survey from the folks behind state of everything, probably Scott of JS you're you're familiar with.

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

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

A lot of you are React developers. A lot of you have touched React at some point, in your career.

And I I feel like there's a lot changing in React world right now, and I feel like this will give us a good temperature 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?

Oh, I'm doing good, man.

Doing real good.

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.

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, yeah, back in the flow of things. Yeah.

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

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

Let me tell you about Sanity. If you're writing React, whether it's 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, 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 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/ syntax.

Nice.

Yeah.

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

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, it's interesting for me to see the evolution. But what I'm most interested in seeing is, 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 what the outlook looks like from the Sanity, in a developer survey like this.

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, like, ecosystem Fatigue.

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

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

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.

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.

So for me, I think those types of things, simplicity, 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.

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

Did you use forward ref much, or do you use forward ref much? Yeah.

As I get more into writing libraries like Shad CSS, where you you write, like, sort of a composable component, where you can pass data into it, you find yourself, like, having to forward the ref of another DOM element, especially when you're trying to, like, bridge the gap between this is like a vanilla API, and this is a a React API.

And that was a huge pain point, and that's by far the most most voted one here.

And, thankfully, those things are not necessary anymore given React nineteen.

Yeah. For sure. Next one up is memo, and this is I have not used memo here. I've used use memo. What is memo? Allows you to skip rerendering of a component when its props are unchanged.

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 component rerenders.

And what happens when that component rerenders? Is your Yarn your functions being Are your values having to be recomputed? What is happening? And is this re render expensive? And I think that kind of mental overhead does cause, quite a bit of disturbance in, like, how people it gets in the way. Like, I'm not thinking about writing, 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?

Yeah. Yeah. That's 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 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 worry about that anymore.

The third one is the the context API, which if you break it down, it it it breaks it down into the API itself and excessive rerenderings.

Mhmm. That's another really annoying one, and I don't think that is solved with the we asked him when he came on. I don't think that's solved with the compiler, but having to, like, guess where you want to put your context provider so that you don't put it too high and it doesn't doesn't give you too many rerenderings down down the tree. I much prefer the Svelte in that way where you can simply just import

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.

Google, why is this running twice? And this is 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?

Yes. Strict mode JS when you're in development, it will rerun your component twice to make sure that the output of your component is the exact same thing. So if you, by accident, were to have some sort of side effect 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.

And then if it will run it again. And then if that variable increments to 2, that means that your component somewhere has a side effect where it's not giving you 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 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.

I kinda wish there's gotta be a better way around that type of thing where you're not just

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.

Yeah. No. I I think the I think the double rendering Node is that you load a component, that component will then 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, instead of having to pass it in. So that that is a a pain as well. Yeah. And this is why I think,

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.

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.

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 yeah. State management, it it's tough. I do wish react might even have brought like, was it recoil? I wish they kinda brought in recoil. Right? I don't know.

You know, I we had talked about Zustan, I don't know, a couple of months ago.

And at that time, I was looking at tech to rewrite my checkout.

And my my course websites are all vanilla JavaScript.

And I was like, alright. Well, I don't wanna write the whole checkout in 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, and then I was looking at, like, state management. And there's a couple spots where I need to Scott hot potato data from the vanilla boundary to the React boundary and vice versa.

Meaning that, like, the vanilla needs to know if something is currently in a loading state, and the React app needs some data passed from, from the vanilla API about what course and product you're currently on. And I was like, like, I I'll just throw it on the window. You know? Window Scott whatever.

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 it's amazing because I can use the Zoos stand React store in vanilla JavaScript without any of the the React APIs.

And I could just set values from my vanilla JavaScript, and it would just immediately rerender in React land, which is beautiful. I I absolutely love

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.

UseEffect, I think, causes a lot of people who aren't familiar with how this stuff works 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 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, what kind of implications that has. So either reducing rerenders or reducing data creation on rerenders or function recreation on rerenders.

Alright. Should we move to to libraries?

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.

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,

like, thinking methodology.

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, but 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 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, improve 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, makes things a lot easier. However, you're gonna have to learn them, and it's going to be a little bit annoying

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

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

I'm translating the docs for the taint API into Chinese.

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

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 this is really how people feel either positive, negative, or neutral, haven't tried it on various things.

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, which is a bit odd, but I guess, like, that's that's a library in itself, maybe, u state. So Next. Js has the most popular sentiment probably because it's the largest. Although it does have a pretty large, negative as well. 10 stack query coming in very closely behind. Mhmm. The 10 stack stuff always blows me away that

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.

Because you can see the, you know, 44% of respondents 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

And Astro, pretty high. Sorry. It goes Remix, Astro, tRPC, React ARIA, Radix, Shadzian, Jotai.

Jotai? Jotai. Yeah. Jotai.

Which do you wanna explain what that is?

Jotai is another, 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 is an atomic approach to global react state. So you could think about anytime you're having global Scott, you know, you would probably reach for Jyoti.

Again, like, I wonder if this is filling the space of recoil where you're creating your microstates and macrostates.

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.

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? So it's interesting to see that it's not only, like, kinda taking a big hit, you know, like dislike ratio time, but it's also Yeah.

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, is just below it. And so it's crazy to think that that feels like it's on the way down. Nothing against Apollo client. I you know, I used Apollo 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

why GraphQL usage has gone down JS that people have realized, oh, that's a lot of complexity. I don't either. Whereas, we swung so hard from 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

serve a component SQL statement directly at the top of the component. You know? And you wanna talk about relations there. Redux is just at number Wes. And, again, there was a time when every single app you did included Redux.

And I think the reason why Redux, just like Apollo has a higher negative, Redux has a 36% 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 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 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, Redux was a great fit for that despite the fact that it was a Scott of work to use. Sanity,

that's that's wild. That JS so many complex things after a couple years of usage just go all negative. And it's because we build these really Yarn, complex monsters that are fun at first because you're using new tech. But then if you really don't, like, focus on it because, like, there's plenty of websites out there that use Redux as a very complex state management, 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,

people who build really awesome complex things were like, wow. Redux 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 for what I'm doing because what I'm doing is a small thing compared to this great big old thing.

Yeah. So what I'm looking for in this list is something that has a large never heard of it, like a large Node negative or a positive, but just kind of a middle and a decently sized positive over negative or or at least similar. So, like, Redwood here, Redwood has probably the the biggest middle, which is, like, not enough.

People have heard of this and then 12% positive.

What else is in here? Create React app.

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.

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

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 that means 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.

What's the most negative? React Bootstrap, create React app, Redux, Gatsby, and Ant Ant Design.

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

Yeah. Oh, it's just a way to we've we've talked about Ant.

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

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?

Yeah. I honestly think it might be. Like, a lot of these UI frameworks that are are so well used, Same with, like I bet that's why material UI is on here. You just get so sick of 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, 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 Mhmm. It looks so good by default that people just keep the defaults because that looks sick.

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? Material UI. Yeah. Material UI is number 1 for the most, the most people who have used m Material UI out of all of these, which I would have said 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.

But, yeah, material, react, bootstrap, antesign, Radix, Chakra, man, it it for me, this list feels inverted because all of the ones that I have liked 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,

why they don't like it. It's a modern day bootstrap. TypeScript support is support JS poor. Server component support is lots of bloat too bloated.

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

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 library or website to the material even website, it's like, I don't know why I would pick React Bootstrap.

Let's see.

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

Not working as expected? That sounds like a skill issue.

Yeah.

Accessibility stuff always piques my interest.

Chakra does it already.

Node to be updated for React Vercel components.

Really powerful, but the cost of being really boilerplatey, interesting.

Yeah. You can 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.

There's one that got 30% of the votes in the other component libraries called Mantine. I've net or man Sanity. Mantine.

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

Kinda gives confidence that it would be a good choice. There's a lot here. Seems like there's a lot of useful components, 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.

Shout out to the mantine, 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

this might have been somebody on Twitter. Because when we posted the episode, 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.

But I feel like I remember Sanity.

This one fully featured React component library.

TypeScript Bos, use it anywhere.

Date pickers.

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

No.

That's I I feel like that is a a 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, compared to Just use divs instead of any web standard? Yeah. Yeah. Yeah.

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.

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 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 slider with, the accordions element or details element. But, yeah, it's been in Chrome since 2011, Chrome version Wes, pretty much since the launch of Chrome.

Didn't details

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?

Oh, details.

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

I can tell you exclusive.

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,

component library. Tailwind's not a component library.

I know. Yeah.

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

There's not CSS is not on here.

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

Yes.

39% of respondents use none, which is probably because they're using CSS.

That's good. Dataviz, d three, Recharts,

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 I don't know. Maybe I'm selling people short here, but 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

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

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

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 that's a pain to be outside.

Yeah. Can that's the whole thing about Canvas is that, you get really performant everything, 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.

CSS tools and libraries is kinda interesting as Wes. What people are using, 67% of people using Tailwind, but 5 less no. 10 less are using style components. So that's that's very surprising to me. Yeah. Same. Maybe not not that surprising, but so many people bought into style components, myself included, that 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.

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? Here's a couple 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% on stock components and then 66% on SaaS and CSS. Wow.

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.

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

One of the things that I used to do, Wes, with styled components was I would just make a wrapper component 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.

Maybe we should explain that. Style components had had a couple benefits. The first one being that you can scope your CSS. You can write your CSS in a component and then sort of just associate it with that specific component, and that people still love that being able to scope your CSS 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 custom properties, CSS variables, 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 solutions are compiled. Like, Panda does this, 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.

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

I need to find a solution for that.

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

You know, the meta framework stuff is is so 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.

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 or, Next. Js. But these days, I personally would be picking Astro.

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 shipping a lot of JavaScript, 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, you know, the whole thing with Astro was like, we're we're shipping much less JavaScript.

Yeah. Other meta frameworks, SvelteKit is in here. Hey.

Quick. Why why would SvelteKit be in here? 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.

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

Lume? Have you heard of Lume or Lume, lume? No.

It's a Deno based pnpm, lume, 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?

I think people are still 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.

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

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.

But this framework, I think, is supremely underrated, in terms of, you know, what what people are are talking about right now. Does a whole

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

Go to the plug in section and be surprised.

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

Oh, yeah. Hokey.

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

Let's talk about build tools.

Webpack still still coming in.

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

But I do you do people that run Next. Js know that they're using Webpack?

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

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 write anything webpack. They just it just works for them. Yeah. But 89% 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 have used it in the last year or so because everybody's used Webpack at some point. Obviously, Vite number 2, Wes build, roll up, TSC, TurboPack, parcel, and TSUP

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.

It was the best.

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.

It was a couple of dark years.

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

Heroku. Damn. I know. I know. Heroku's has half the respondents of Vercel, which I would say is way more than I would have thought. Way more. Yeah. In in 2024,

if this poll was in 2015 okay. Yeah. You know, everybody's on Heroku, but DigitalOcean being so low is surprising to me.

DigitalOcean was the highest. Yeah. Yeah. Cloudflare,

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

My prediction for 2024 and beyond is that Hetzner will go from 16 to top 10.

Top 10? Meaning that Hetzler would beat out Fly dot io?

That's reasonable. Render?

I don't know.

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

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.

Oh, look at this. Other Vercel.

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

Prisma, number 2, 40% of people have used it. Number 3, Century, century.io for social syntax. Check it out.

Redis, super base, planet scale, Upstash.

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

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.

And Yep. Yeah.

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.

Ready? What's the number 1? Give me top 5 back end languages.

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.

That's just a pest.

Yeah.

Here we go. Alright.

So back end languages, number 1, Node. Js.

That's not a language.

Well, Oak. Well, I mean, JavaScript.

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

For React apps? No. For back end languages. I know, but this is like a React survey.

Yeah. Yeah.

So people are writing React apps

without because JavaScript does number 7.

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.

Oh, is it TypeScript?

Yes. Oh, okay, folks. Come on. Okay. I do like that they split that out, though, so it's kinda kinda interesting to see that. Number 3, though, what do you JavaScript.

Yep.

PHP.

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

Mhmm.

Ruby.

Number 8 is Ruby.

Wow.

Python.

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

Number 3. 1

Go.

That's 6. Rust.

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.

So number number 5 is .net, which we just got a a question asking us to do a show on .net.

So I never think of .net. It never comes up in my brain. It just does not exist in there. So sorry, .net folks. I know you're out there.

Those Dell Latitudes gotta run something.

This is my personal bias. They're yeah.

Top 10 state management libraries that are using. Number 1, US Scott. Obviously, it's the biggest one. Zustan, Jotai. You just told me how to say that. Jotai? Jotai? Yeah. Jotai. Redux x state. A Redux toolkit, 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.

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

I mean, x state recoil in MobX.

So most people not happy with any of the statements in libraries, though. It's not surprising. Yeah.

Yeah. Let's see the top data loading.

That 10 stat query by far coming above fetch and tRPC, SWR.

SWR Wes the Node Next. Js was was pushing for quite a while. Was that JS that true?

I believe so. Yes.

I haven't heard too much about that.

I think Vercel uses a stale still while revalidate people like Tansac Query the most.

Tools, testing libraries.

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

React ESLint Library or just Testing Library from Kent C. Dodds coming in. Number 2, Storybook, Cypress, Playwright,

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.

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

Jest, I I I found Wes, like, might be different in a Next JS world, but when you get into, like, Vite style websites Yeah. I found Jess to be awful to work in. So

React renderers.

Oh, this is cool.

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

So no surprise that React Native is number 2.

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

for

React Native for Android than iOS? 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 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.

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?

But yeah. React PDF. People 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 to have to put everything to PDF.

Man, that's so 13% of respondents are rendering in React PDF.

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

63 are writing server side rendered applications.

50% are writing static sites.

29% static generation. So if you're out there and you're thinking, like, everybody is server side rendering everything, doesn't seem to be the case. I I do think there's a time and a place for everything. Yeah.

So And the the static side is way higher. I just said something about the Deno one and how, no one's writing static sites anymore.

Obviously, wrong. 50%.

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.

MPA is, like, your your typical Website. Yeah. Website full page reload. It would make sense that that is lower than that because who's who's writing React? And then also 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.

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.

69% 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, 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.

I think that's good.

Oh, last Node last thing. Yeah.

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

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

Should we get into some sick picks?

Let's get into some sick picks.

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

So I'm going to sick pick this ThermoCell mosquito repellent thing. It's like a little tube, and you put you put these little, fuel cells into them. I don't even know what to do with it. Propane? 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?

Yeah. Those were hot in high school.

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, yeah, the this I don't know about you all, but, like, mosquitoes to me, I hate mosquitoes. In Colorado, 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, 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.

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.

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.

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, 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 down with mosquitoes.

So yeah. And, apparently, it's 70 70% butane, 30% propane mix in those ranges.

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

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 requires you to continually buy stuff for it. Yeah.

So whenever I look into stuff like that, I'm like, there's gotta be some sort of, like, aftermarket thing where you can refill it. Like, when I got into the SodaStream for a while, I was like 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, bottle, so you have years years worth of it.

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

But my sick pick today is

Oh.

Oh, woah.

I think I'm out of bullets.

Yeah. Nothing's due now there.

Oh, yeah. The the kids took shot all the bullets out of it. Anyways, we have recently got into Nerf guns at our house because I go to a lot of garage sales.

And I never realized this before, but every single garage sale has 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 gun. I got it for $10.

And if you put these these have this is Nerf Mega, which is these big big bullets, and they whistle when they go past your head. It's like 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 nerf fights ever.

So I would highly recommend picking up if you go or 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,

and that's really fun as well. So I'm interested Big fan. In what age you felt comfortable giving your kids Nerf guns? Because my son, he's 7, and he's like 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, 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, when is the right age?

I I don't know. I'll I'll tell you. I said my kids will never have guns and never have, like, like, Pokemon shirts and, like, character stuff. And I'll tell you, I was wrong about both of those things.

Being a parent humbles you because our kids have shirts with Pokemon on it, and we got guns all over the all over the house now as well. And it's super fun. So, like, my youngest is 5, 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.

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 don't know, 24 or something like that? Yeah.

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

Super fun.

Like, I had I was trying to think, like, at what age? I had a a slingshot when I was pretty young, and I would, like, put rocks in it. Oh my god. Just peg it against trees and, 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,

like, a hunting slingshot when I was their age. I know. I think about that all the time because Landon's cousins, like, really brought the Nintendo Switch into his life this week.

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 the video game thing for so long.

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.

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, and they've been learning the like,

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.

Exactly.

Cool. Alright. Thanks, everybody, so much for tuning in. Make sure you check out syntax.fm 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.

Alright.