The State Of React (Survey)

it's no secret that there's a lot going on in the react World from server components to next to everything in the remix land to people building their own new Solutions and Frameworks there's just so much going on and it's more important than ever that we take the time to reflect on that and see how as a whole react developer Community we feel that's why I think it's important we go through the state of react survey together there's a new survey that has came out from my favorite team of webdev survey ists satcha and crew they're killing it with this one they dm'd it to me and I wanted to share it with yall too so that we can all give the feedback necessary for the whole Community to better understand what isn't isn't working and we can move forward together with a unified vision for how to improve web development and obviously the Link's in the description so click that if you haven't already stve of react 2023 soon as react was first introduced it was clear it would become a big deal for the web people did not think that initially but sure they they even acknowledge that here despite the weird jsx thing developers quickly adopted it when it's even more impressive the community stuck on through major changes such as function components and hooks but now it's 10 years later in the newly introduced react server components promised to be the biggest change since well since react itself will the community follow along one more time or will developers jump shift to spel solid or something else let's find out together with the first ever state of react survey seems like first and foremost we're going to be checking off the apis we've used I have used it n sure I want to use it again o create portal I am the lunatic who uses that a lot forward ref painful but it's useful should I be explaining what these are when I go through context is reacts built-in State manager to go through components so when you mount a context everything below it has access to whatever that context exposes so it's useful for hey I want everything in this tree to have access to this data usually react apps have a ton of these contexts mounted at the top of the app to be treated like globals which isn't the best pattern but it's a powerful way to manage State and access data across your application somebody in chat just pointed out that it's not really a state manager it isn't you have to manage the state yourself but it gives you access to that data in the functions you expose throughout the app create portal I have a bunch of random content about this most recently I did a video about the stuff I was proud of building at twitch with mod view where we used portals heavily it's a really cool pattern for taking something in the virtual Dom and rendering it somewhere else in the real Dom forward ref is utter chaos it lets you take a reference to an element and pass it through multiple layers of react so that you can have a top level thing that has references on it so you can access the Dom nodes and then that gets forwarded through to like an input field really deep in fragment we usually see the syntax for it it's mostly there so that you can follow the components return one component rule so if you have a component that has two children but doesn't really have a parent you can wrap that in a fragment and not have to worry about the hierarchy as much lazy I use lazy all the time lets you defer loading components until it's rendered for the first time so this lets you not even load in the JavaScript until you're actually rendering the component also a way to guarantee that things run on client not on the server really powerful memo lets you skip rendering a component when its props are unchanged it's cool I would use it again not the best thing but it does its job profiler let you measure rendering performance of a react tree programmatically I have heard of it and I'm interested I usually just use the react Dev tools but I should try out profile or it does sound really cool strict mode is great minus it rendering things constantly if you ever seen your effects running twice that's cuz strict mode is doing that and usually people don't Mount the strict mode component they turn it on in a config somewhere but yeah strict mode is cool what pain points have I encounter related to the API mentioned above for ref is super super unintuitive context as a global State provider is full of foot guns and often causes full app rerenders for no good reason cool let's go on to hooks use callback use call back is great so if you're defining a function in line in react and you pass that function as a reference something like a use effect but you defined it in line that function's definition is going to change on every rerun so react can't properly defit use callback guarantees that that function in instantiation will be exactly the same on multiple rerenders unless the dependencies of that function change so it's mostly a way to stabilize your function's definition across reenders use context obviously if you're using a context you're probably using use context to access the values within it use deferred value I have used this once I don't want to say my experience was positive or negative effectively this lets you render an old UI state or not update the UI until a value has changed it can be handy I want an example of this to better explain it during updates react will first attempt to render with the old value and then try another render in the background with the new value it's integrated with suspense if the background update caused by a new value suspends the UI the user will not see the fallback interesting so this is like a way to keep showing old values when you have loading States and things going on it's actually really useful that makes sense combining is something like react query and showing stale values with manual clearer behaviors is cool but also probably unintuitive to debug I'm going to say I've used it cuz I did use it once not positive or negative I'll leave the experience neutral use effect again I'm going to leave it neutral you all know what use effect is I don't want to go on that rant right now use ID use ID is a strange one but it's useful for basically telling react like this value of this component is the same even if we don't have a manually defined key that we're passing in this is much more useful with uh server components and client components and weird interactions between them but it's generally useful to let the Dom know hey this thing hasn't changed don't trigger a screen reader to reread it because it's still the same value use memo as a react those you C the results of a calculation between renders mostly useful for making sure an object is stable but useful for a lot of other things too use reducer fun fact almost all of the hooks within react that are even vaguely State Management are built on top of Ed reducer even US state is just a Ed reducer wrapper internally it's almost like Redux built into to react but very very minimal it's cool it's fine I'm not going to say positive or negative it is what it is I I would say use ref as good but the problems I'm having when I need to pull use ref out are terrible so my experience might be negative but that's because of the weird problems where I need a specific reference to something not because the API itself is bad so use ref cool the dot current stuff's weird it's fine though use state is great UST state has made explaining react so much easier so much easier you sync external store oh you sync external store I love it I've only had to use it once or twice myself but this is the hook that libraries like zustand and react query use in to take something that exists outside of react and build a relationship between that and react itself to synchronize that external stores state with react internally really powerful it's a great way to like subscribe and create patterns with an external store and an internal store with react if you wanted to go build your own crazy State Management solution syn external store is probably going to be the base piece for that what pain points have I encountered with hooks use effects foot guns use effect problems that occur sporadically well after code is written unstable values I.E inlined functions or objects triggering use effect use call back use memo Etc cool react cache cach lets you return the result of a data fetch or computation I have used it I'm excited for this to get more stable it's not super stable at the moment and the difference between reacts cach and next cach isn't well defined enough Ser components I [ __ ] love components that run exclusively on the server that's a really good concise definition so actions reacts built-in solution for Server mutations also like it a lot and excited to use it more start transition lets you update the state without blocking the UI I'll say this is my first negative experience that I'm going to click that button for CU it is weird debugging the patterns of like when the transition starts and ends yeah it's a really powerful thing for specific like types of uis that are taking advantage of all these new patterns but it it feels like a bit of an abstraction leak where I would almost expect a library to handle these types of things for me but since we're still in the early primitive days of the new tools you have to manage your own transitions suspense suspense is a great way to introduce loading State Higher up in your Dom so that that children of it can manage their loading async whatever they have to do and just have one shared loading state for all of that really powerful if you're rendering components lazily or you're using the new asynchronous patterns with react server components where you can use suspense to have a component that does some heavy data Fetch and suspense will let you stream in that response when it's done honestly suspense was not like super useful when lazy was the main way you accessed it and used it but now with all these awesome new patterns with server components suspense is finally a thing I'm using all the time and it's really good so yes taint you know that we love the taint here I don't need to go too much further I'm going to be one of the few people that's actually used it because I went and played with it as soon as it was announced but uh yeah good old paint use I've had a negative experience with use is meant to be kind of like react query where you pass it a promise and it gives you the result and it lets you suspend until then so if you pass a promise or a fetch call here it will call the suspense above it but it has a lot of weird things that cause it to rerun constantly and have yet to make a Ed call that involves fetch that works properly on the server and the client it's just not in a great state I hope it gets better use form State I've used it I'm sure it's good in a lot of places but I'm clicking negative here there's nowhere near a deterministic enough relationship between used form State and the form itself because if you have multiple forms this can get messy and you also have to leave server components in order to use the hook so this becomes a client component too it's the lack of strong tie between the form itself the server component and the form state that makes it harder for me to durly align same deal with used form status where this is going to be the form that this client component is mounted in I think but it's not deterministic enough for me I'm I'm real picky about that personally so I'm going to say used it I'm not going to mark for that one but use form States freaking weird so I'm marking that one as negative use transition leaning neutral on this one it's another one of those things which we mentioned before it feels weird that I have to deal with this in the UI myself but I get why it's just another one of those leaky things where I'm excited for libraries to make these things easier going forward what pain points have I encountered related to the new API too primitive I feel like we need better Libs to abstract the value item two how do I want to word this lack of deterministic relationships with forms and use form State use form status wrapping my head around start transition and use transition has been a bit rough cool now for component libraries ant design heard of it not interested shra design it's I only played with it a little bit but it's just it's not for me headless UI used it it was fine mui used it not my thing anymore radics [ __ ] dope re bootstrap never actually used it never will care to Shad UI absolutely react Arya I've only used it a little bit and it was really good I want to play with it more it's like react Arya headless UI and radics are all trying to solve both the accessibility issues and the general behavior issues around complex inputs and other interactive components none of the three provide actual uis or components they all provide the pieces you need to build those yourself really cool tools I'm happy we're having real competition in that space and that we're talking about these things more now I feel like I was crazy being the only one who knew what radx or react ARA was like 3 or 4 years ago and now unstyled input libraries is like a trend which is really dope CU all the people working on these things are working really hard and it's super important Tech what other component libraries have I used hwind UI I've used framer it was good I've used react spring it was really good not used react motion I love Auto animate I have a whole video about it react native reanimated is [ __ ] dope too all of these are great I know react motion is good I haven't played with it yet but framer and react spring are [ __ ] incredible Auto animate if it solves your problem is so so nice and react native reanimated is groundbreaking I've used D3 react viz I've used recharts I used Victory and I tried FX I did not like vizx D3 is way too primitive I don't remember using react viz I like recharts and victory was weird react form is the best option still which libraries or Frameworks have I used CSS modules no strong stance emotion no more SAS is fine I never actually use stitches fun fact style components best we can do at the time Tailwind I [ __ ] love Uno pretty good vanilla extract I played with I didn't use it enough I really like the philosophy around it I think it's important and stylex I will throw in here as well CSS and js on the server is a bit rough Jodi I [ __ ] love Jodi and we're going deep in the State Management now Co mobex I've used I had a terrible experience with mobx cuz it caused a lot of weird memory leaks for us at twitch way back so this was 2018 I'm sure it has gotten way better since but man I dealt with a lot of weird [ __ ] with mobex and like cleaning things up back in the decorator days so I have trauma associated with mobex recoil also had fun memory leak issues when I tried it and honestly Jodi is better recoil for me recoil was by Vues the creator of prettier as well as excal draw really smart developer recoil was trying to do internal atomic State super cool but yeah just Jodi's in a better place and anything that point Manders team is doing is [ __ ] dope Redux I am very done with you guys can guess why Redux toolkit is much better overall and if you're stuck in Redux you should be moving to Redux toolkit to the best of your ability UST State's great X State's fine and zustand my love zustand has made my life so much easier that I've even considered pronouncing it correctly I won't but I've considered it react query come on why did they not include react query stable values deterministic Behavior async workloads outside of react High through put date think updates every frame yeah I've run into pretty much everything you can have problems with so use effect running twice I desperately want use memo with clean up yeah oh co T query is an option in here nice APO client never again I have lost years of my life the the Apollo team works hard and made graphql a standard I appreciate them immensely for it Apollo client is one of the biggest piles of tech debt I've ever encountered in my career I did my first ever podcast like my first ever piece of Dev content because I chatted with them and got them to do a podcast with me like the Apollo team the condition was they would bring Ben Newman who was like the lead enge on things at the time on the podcast as well so me and my friends at twitch could bully him into introducing cash inv validation because at the time there was no way to delete from the cash when you had a long lived session like a twitch session where people are on Twitch for hours and you're using graphql for data there's a lot of data in there you don't need anymore and I was seeing like half gig plus Apollo graphql caches and I couldn't clear them cuz there was no way to do it until V3 absurdity and don't get me started on the weird deep cloning [ __ ] that it used to do I think they fixed a lot of that but it was real bad like real bad relay is much better but you need a PhD to set it up correctly I often joke about how like if you don't hold two phds or work at meta I don't believe you can get relay working there was an exception to that rule which was Jane Wong but she now works at meta so there's no longer an exception to the rule nobody actually gets relay working rtk query I'm really happy rtk query exists I will never use it because it is not for me but if you're deep on Redux and you need some better async management [ __ ] rtk quer is best way to do it SWR I'm known for talking a little crap on it's way too minimal for my taste but it's also pretty nice and a quick way for remote data fetching is cool I just wish it did more and that the fetching logic wasn't as abstracted as it is and I wish they didn't redefine the word mutation the way they did I'm going to even leave a comment here the confusion around how they used the word mutation is enough of a reason for me to hate SWR forever and this is a bias of I'm a teacher and they took the word mutation and they misused it I have the same issue with react router where they took the term query pams which used to mean the things after the question mark search pams and they used it to describe URL pams which are the thing or well I'd say path parameters which are the things in the route so I hate when react devs take these terms that mean things and use them for something entirely different I kind of have the same issue with used client and use server but uh let's continue and obviously huge t query fans here what's trpc I've never heard of that before proud that we got that in here what other libraries have you used for data loading next look at what made it in here next type safe URL good [ __ ] trpc is like grpc but for Theo good pun I just wanted to say next but if that's not an option what else have I used to load data Ed a lot of weird things to load data I'm just going to skip this one so I can't think of anything that makes enough sense to put there what pain points have I encountered related to data loading I've had so much pain in data loading but the things that immediately come to mind is stale data and caching both sides of it where data's old or data isn't cach it takes too long shared normalized caches so think something like a graphql cache where I have a user query and user can have 15 plus fields in it in one place I queried two of them another place I queried three other things normalizing the cash so that's one cached entity sucks and graphql can do this well but yeah it's painful and then Apollo's cash in general sucks especially for long lived apps I've had so much pain from Apollo that I would prefer to just never touch it again or recommend it yeah it is what it is meta Frameworks wo Astro we love Astro here create react app help Kickstart My Channel Gatsby is effectively dead nextjs is pretty cool remix is remix I'm really happy it exists it push the standards forward Redwood I haven't actually used and it's entirely based around graphql I'd say Redwood is like the first create T3 app type thing where it was a full stack here's how you build your server and your client and you have them relate to each other but they went way too hard on graphql which I don't think is the solution for getting started almost ever you should never start with graphql you should move to graphql and you have problems that graphql solves so yeah not a big ridewood fan other meta Frameworks not really other backend tools V yep TS up saves my life all the time es builds [ __ ] incredible Roll Up is really useful tooling TSC CLI exists parcel exists turbo pack I really hope it gets stable good old snow pack joke quick I have hosted react AWS annoying never hosted on Azure hosted on cloud flare neutral digital ocean negative fly iio God I hated deploying on fly especially when they didn't have an arm binary and I had to run everything through Rosetta it was so slow and painful GitHub Pages mediocre Heroku I'm happy it's dead netfi is fine I'll give them their credit I never actually successfully deployed on render so I can't even check that one and obviously be like for sale not a fan of Firebase fan of Planet scale Prisma I'll leave neutral youall know how I feel now Rus is great Sentry is neutral super base I'll say I'm positive about up stash [ __ ] love up stash worker KV upload thing axium CL these are all like data stuff which is weird they didn't have clerk should absolutely been in that list graph I don't really use with react post hog I use with react drizzle yeah they put Prisma in here for some reason it isn't really a service Which languages are your backend apps written in I [ __ ] love Elixir goes fine I'm going to say negative experience with JavaScript and positive with typescript pretty fair I haven't used PHP in a while but I have used PHP haven't used python in a while or Ruby for the same reasons I'm putting negative on PHP backend Engineers not respecting frontend Engineers barriers between front end and backend being arbitrarily find scaling infrastructure in nons serverless environments infr providers slowly catching up to the needs of rsc's cool do I do it let's be honest which libraries have you used to render obviously yep yep uh ink was weird it's fine yep yep not a big react for web fan it's fine react PDF it works [ __ ] love react 3 fiber and I want to use remotion more before I take an opinion on it let's go through what all these are Quicks they don't specify I have another video where I talk about using react for things that aren't websites react Dom is using it for websites react email is using it for email Inc is using it for CLI react native is react native youall know what that is react native for web is using the react native apis to render on the web which is interesting but it means means you can have one code base for multiple platforms react PDF lets you use Primitives to render a PDF with react really powerful for generating PDFs on your server react 3 fiber lets you do Canvas 3D stuff with 3js with react it's a really powerful way to make like games and interactive 3D environments super cool [ __ ] Point Manders made it they're dope and remotion is a video editor in react which is really cool where you can write react components for video Elements which libraries have you used for validating data against the schema I've used all of them Zod is dope rest some ion type box is really promising that's the one by the ark guy right so I played with that a bunch and it was really powerful and really fast oh look at that what services do we use for o oh yeah valy bot ionic I'm neutral on react native I love Yeah Expo and RN are both incredible what other frontend Frameworks have I used angular negative Ember very negative I God I hated every moment in Ember I might have not if we didn't move off Ember at twitch I might have never become a frontend Dev I hated Ember so much lit I'm neutral on preact I [ __ ] love preact was a huge part of how I started to understand web standards better when I used preact in vanilla HTML and JS projects and like learned what all the compiler steps were to make react behave like react quick I've used not for me I'm happy it exists solid I [ __ ] love spelt I'm more and more liking I don't love the single file components but and I also really don't like their markup syntax but its Primitives and its core philosophy are great and now with runes it's getting more and more scalable in view is view I'm very excited for Vapor I believe is the view compiler coming out soon which is hype what do you use react 4 literally all of these I'm mostly using Canary at this point professionally industry sector education entertainment it's weird how that's like selecting a random Place depending on where I've scrolled to seems like an accessibility issue news media blogging social media Telecom s quite a few things Edge rendering isg Islands MPA God I've used almost all of these I haven't actually done Progressive hydration or resum ability SSR Spas ssgs streaming SSR yeah there' be a whole video if I try to explain all of these so uh yeah let me know in the comments if I should do that video because I'm not doing it right now how happy are you with the current state of react I'm very happy I'm not expecting that to be the answer for most I'm so excited to see the results of the survey though I'm very excited for cash very excited for forget suspense isn't recent I'm happy it's usable now in server actions I'm not super in love with yet I do love the new react docs and it feels bad not checking that react forget is the new react compiler kind of think of like what vapor and vew are doing where it's going to read your react code and insert all the memoization and [ __ ] where it needs to be so you don't have to write any of that anymore the original lead Dev who announced it no longer works at meta but some other really talented people have picked it up since and it's making progress I would expect to hear more about that in the near future I think my biggest concern paint Point around react right now is that the size of react's community has gotten to the point where most react devs didn't choose to use react and that means the amount of buyin the average react dev has is much lower they're just using this things they feel like they have to and when things change they feel like their job's getting harder for no reason compared to a framework like spelt where the average spelt developer chose to use spelt they're going to like it more they're going to be reading all these updates and seeing all these new things more react is so popular that we're not going to have that type of satisfaction inherent to the average user and even a survey like this is going to index on the more excited react users cuz those are the people who are going to see the link and do the survey that's the biggest concern I have is that react's advancements are going to get a lot of push back due to the nature of react developers not being react fans anymore just because it is so popular now and I don't know if that can be solved I don't know how that should affect the team's approach I just know it's a real thing and it's scary resources what have I used to learn react free courses on the job training docs videos self-directed learning all checks out what blogs magazines or newsletters do you use to keep up with react honestly just this week in react those threads are really good what sites or courses have I used to learn react have I really use none of these I played with egad a bit when I was at twitch but not much I don't listen to any of these they made this an open question which is probably the right call Lee Rob that one weird dude with the mustache the one weird dude with the mustache that can be Prime Perfect Prime's talked about react a couple times this is a good question there's so many people that like no one is jumping out immediately TK is a really good one actually TK dodo is huge Nexel does there as a highlight honestly I should put Josh in here I almost put him first Tanner's worth a shout out for sure oh Sam pikov we don't always agree in fact we disagree a lot but I'm slowly winning him over Kent dods oh Josh comeo is huge oh I've done all of these maybe not all of them oh no don't dox me yeah I started when I was 15 so yeah I'm 11 to 20 that's weird so I work at two companies and we're like six total but just Dev stuff two to five color blind and ADHD as [ __ ] we did it I think I think I passed I think that's a good score so I mean we're done that was a dope survey and I'm actually really excited for the results so make sure you stick around and you keep an eye for my streams which are every Wednesday at around 12:30 p.m. Pacific time cuz we'll be certain to go over these results as soon as they're out and available in order for us to move together as a unified Community these resources are so important and a huge shout out to Sasha and the team working on these surveys because without them we'd kind of be running blind appreciate y'all a ton thank you so much if you want to hear all about my opinions from the last survey we did I'll pin that in the corner if you've already seen that or you're just looking for something different YouTube thinks you like the video below it thank you as always appreciate you all a ton peace nerds

Channel: Theo - t3․gg

Views: 41,244

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: NCBTRQoF9hc

Length: 26min 13sec (1573 seconds)

Published: Tue Nov 07 2023