They made React great again?

a few days ago a shocking new blog post from the reactjs team dropped as a react hater I hate to say it but they fixed react I tried to let the hate flow through me but the react team made some brilliant moves that will dramatically improve the developer experience just when you thought react had become the new jQuery and the JavaScript framework wars were coming to an end the react team has Unleashed their secret weapon a compiler and in today's video we'll find out what that word means it is February 26 2024 and you're watching the code report speaking of jQuery one thing that you may have missed is that after nearly a decade of anticipation jQuery just announced version 4.0 it got rid of a bunch of stuff made obsolete by the JavaScript language itself dropped ie1 support and migrated to es modules most frontend developers nowadays are too smug and arrogant to use jQuery but this is great news for the millions of websites out there that still use it the big news though is that reactjs is getting a compiler meta is already using this compiler in production to power Instagram and will likely bring solid performance improvements but most importantly it will simplify the code we write as developers Developers L react code is pretty ridiculous compared to Frameworks like view felt and solid like imagine we have some state that needs to be computed into another value we can do it like this in react but that value will be unnecessarily recomputed every time the component reeners it's inefficient to address this react provides a hook called use memo memo means memoization which itself means remember it wraps the computation in another function which will only run when the state that it's dependent on changes which has to be explicitly put in this array if we look at all the other Frameworks though they don't do stuff like this like in view we have this computed function but there's no need to include that dependency array and in spell 3 it's even more simple with the dollar sign syntax although it's being replaced with a rune in spel 5 the reason these Frameworks can let you write more simplified code is because they have a compiler unlike react which is purely runtime based they look at your code in advance to figure out where the reactivity is and bundle that into the final product that goes to the browser but now that react is getting its own compiler it means hooks like use memo and use callback are a thing of the past and that's huge because not only is the code ugly as as hell but it also removes the mental boiler plate of asking the question to memoize or not to memoize and they confirmed my conspiracy theory that react intentionally adds bad apis like this just to look like Geniuses when they remove them later on but use memo is not the only bad feature going away another thing you won't need in the future is forward ref which creates a higher order component when you need to expose a Dom node to the parent instead ref will just be a prop so you can easily access it without having to wrap another function that's an easy win but a more controversial feature is server actions you can already use actions in nextjs and many have described the developer experience as being like PHP but without Lambos the general idea though is that react handles the data submission cycle for you from client to server and then back again what's cool about this is react provides hooks like use form status or use form state to easily handle the data in a form but then alongside that you have hooks like use optimistic to get that Ultra fast Firebase like feel on any backend database the UI updates instantly based on the expected change then in the rare case it fails it reverts back but another thing that sucks about react is working with promises in react server components like in nextjs you can use async await to fetch data directly in a component that's awesome but you can't do it in a client side component and you still can't in react 19 but you can use the use hook which is the next best thing it works on both promises and react context which means it makes the Ed context hook obsolete because unlike used context use can also be used inside of loops and conditionals but using use allows you to use the value of a resolved promise directly in the UI now a promis is asynchronous and its value is initially pending so you can handle the loading state by wrapping it in a suspense boundary and it might also reject and throw an error in which case you can wrap it in an error boundary I don't really love this code myself but it's way better than the common approach of resolving a promise with the use effect hook bottom line is that these are some huge improvements for react what's funny though is that if we take a step back all the major Frameworks are starting to look identical and have all copied each other's abstractions leading to nearly identical apis just with things named slightly different as a civilized society it's about time we decide on the one true framework then we build that framework into the browser to put an end to this Bloodshed once and for all this has been the code report thanks for watching and I will see you in the next JS one

Channel: Fireship

Views: 1,021,712

Keywords: webdev, app development, lesson, tutorial

Id: 4k6Xgjqkad4

Length: 4min 11sec (251 seconds)

Published: Mon Feb 26 2024