805

August 7th, 2024 × #react#webdev#javascript

We React to State of React Survey

Scott and Wes discuss the State of React 2023 developer survey results, including React API and framework usage, trends, pain points and more.

or
Topic 0 00:00

Transcript

Wes Bos

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

Wes Bos

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

Wes Bos

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

Wes Bos

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

Wes Bos

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

Wes Bos

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?

Scott Tolinski

Oh, I'm doing good, man.

Scott Tolinski

Doing real good.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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?

Wes Bos

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

Wes Bos

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.

Wes Bos

Nice.

Scott Tolinski

Yeah.

Scott Tolinski

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

Topic 1 02:33

Discussion on new React APIs and how they have changed React

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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

Wes Bos

And my my course websites are all vanilla JavaScript.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

Alright. Should we move to to libraries?

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

like, thinking methodology.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Topic 2 15:48

Overview of sentiment towards various React libraries

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

Jotai? Jotai. Yeah. Jotai.

Wes Bos

Which do you wanna explain what that is?

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

People have heard of this and then 12% positive.

Wes Bos

What else is in here? Create React app.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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.

Scott Tolinski

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.

Topic 3 23:34

Discussion on pros and cons of UI component libraries

Scott Tolinski

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,

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Let's see.

Wes Bos

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

Wes Bos

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

Wes Bos

Yeah.

Wes Bos

Accessibility stuff always piques my interest.

Wes Bos

Chakra does it already.

Wes Bos

Node to be updated for React Vercel components.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

But I feel like I remember Sanity.

Wes Bos

This one fully featured React component library.

Wes Bos

TypeScript Bos, use it anywhere.

Wes Bos

Date pickers.

Wes Bos

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

Scott Tolinski

No.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

Didn't details

Scott Tolinski

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?

Wes Bos

Oh, details.

Scott Tolinski

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

Scott Tolinski

I can tell you exclusive.

Scott Tolinski

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,

Wes Bos

component library. Tailwind's not a component library.

Scott Tolinski

I know. Yeah.

Wes Bos

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

Wes Bos

There's not CSS is not on here.

Wes Bos

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

Scott Tolinski

Yes.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

I need to find a solution for that.

Scott Tolinski

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

Topic 4 34:23

Meta frameworks for building React apps

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

Go to the plug in section and be surprised.

Scott Tolinski

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

Wes Bos

Oh, yeah. Hokey.

Scott Tolinski

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.

Wes Bos

Let's talk about build tools.

Wes Bos

Webpack still still coming in.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

It was the best.

Wes Bos

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.

Wes Bos

It was a couple of dark years.

Wes Bos

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

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

DigitalOcean was the highest. Yeah. Yeah. Cloudflare,

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

That's reasonable. Render?

Wes Bos

I don't know.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Oh, look at this. Other Vercel.

Wes Bos

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

Wes Bos

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

Wes Bos

Redis, super base, planet scale, Upstash.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

And Yep. Yeah.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

That's just a pest.

Wes Bos

Yeah.

Scott Tolinski

Here we go. Alright.

Scott Tolinski

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

Wes Bos

That's not a language.

Scott Tolinski

Well, Oak. Well, I mean, JavaScript.

Wes Bos

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

Scott Tolinski

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

Wes Bos

Yeah. Yeah.

Scott Tolinski

So people are writing React apps

Wes Bos

without because JavaScript does number 7.

Scott Tolinski

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.

Scott Tolinski

Oh, is it TypeScript?

Wes Bos

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.

Scott Tolinski

Yep.

Scott Tolinski

PHP.

Scott Tolinski

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

Wes Bos

Mhmm.

Scott Tolinski

Ruby.

Wes Bos

Number 8 is Ruby.

Wes Bos

Wow.

Scott Tolinski

Python.

Wes Bos

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

Wes Bos

Number 3. 1

Scott Tolinski

Go.

Scott Tolinski

That's 6. Rust.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Those Dell Latitudes gotta run something.

Scott Tolinski

This is my personal bias. They're yeah.

Wes Bos

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.

Wes Bos

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

Wes Bos

I mean, x state recoil in MobX.

Wes Bos

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

Wes Bos

Yeah. Let's see the top data loading.

Wes Bos

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

Wes Bos

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

Scott Tolinski

I believe so. Yes.

Wes Bos

I haven't heard too much about that.

Wes Bos

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

Wes Bos

Tools, testing libraries.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

React renderers.

Wes Bos

Oh, this is cool.

Wes Bos

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

Scott Tolinski

So no surprise that React Native is number 2.

Scott Tolinski

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

Wes Bos

for

Scott Tolinski

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.

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

63 are writing server side rendered applications.

Scott Tolinski

50% are writing static sites.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

Obviously, wrong. 50%.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 5 47:30

Most respondents on latest React 18 version

Wes Bos

I think that's good.

Wes Bos

Oh, last Node last thing. Yeah.

Wes Bos

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

Wes Bos

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

Wes Bos

Should we get into some sick picks?

Scott Tolinski

Let's get into some sick picks.

Wes Bos

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

Scott Tolinski

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?

Wes Bos

Yeah. Those were hot in high school.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

But my sick pick today is

Scott Tolinski

Oh.

Scott Tolinski

Oh, woah.

Wes Bos

I think I'm out of bullets.

Scott Tolinski

Yeah. Nothing's due now there.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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

Wes Bos

Super fun.

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

Exactly.

Wes Bos

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.

Scott Tolinski

Alright.

Share