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