React 19 Has A Compiler???

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 พ.ค. 2024
  • Recorded live on twitch, GET IN
    Links
    react.dev/learn/react-compiler
    • React Compiler: In-Dep...
    By: Jack Herrington | / @jherr
    My Stream
    / theprimeagen
    Best Way To Support Me
    Become a backend engineer. Its my favorite site
    boot.dev/?promo=PRIMEYT
    This is also the best way to support me is to support yourself becoming a better backend engineer.
    MY MAIN YT CHANNEL: Has well edited engineering videos
    / theprimeagen
    Discord
    / discord
    Have something for me to read or react to?: / theprimeagenreact
    Kinesis Advantage 360: bit.ly/Prime-Kinesis
    Hey I am sponsored by Turso, an edge database. I think they are pretty neet. Give them a try for free and if you want you can get a decent amount off (the free tier is the best (better than planetscale or any other))
    turso.tech/deeznuts
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 491

  • @josephlandry8787
    @josephlandry8787 14 วันที่ผ่านมา +720

    Web developers create their own hell.

    • @paca3107
      @paca3107 14 วันที่ผ่านมา +46

      abstraction hell...

    • @varunsharma5582
      @varunsharma5582 14 วันที่ผ่านมา +98

      That's how we are going to create job security for ourselves in the AI landscape, AI can't understand shit if you can't keep up either.

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา +4

      Everyone makes their choices. Just like I can very well choose to not use any of it, if it's not good.

    • @varunsharma5582
      @varunsharma5582 14 วันที่ผ่านมา

      @@Leonhart_93 well, if someone points shit out in code reviews, you'll at some point end up using it

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา +6

      @@varunsharma5582 No because I can hold my ground and I can elaborate why something adds or doesn't add anything useful.
      That only works for those that don't know better or they don't care enough to say why.
      That being said, if the react compiler really adds performance, then I might be inclined to use it.
      After all, it would just be an extra build step on prod, nothing special.

  • @filipstudeny
    @filipstudeny 14 วันที่ผ่านมา +304

    I can't wait for a compiler that compiles a compiler into a library.

    • @olabiedev5418
      @olabiedev5418 14 วันที่ผ่านมา +41

      plz dont give them ideas and delete ur comment

    • @FlanPoirot
      @FlanPoirot 14 วันที่ผ่านมา

      ​@@olabiedev5418it's already the present. imagine u used typescript with react
      your typescript is compiled/transpiled, then react roles their own compiler then or bundler goes in and compiles ur code into a minified version

    • @culturedgator
      @culturedgator 14 วันที่ผ่านมา

      @@olabiedev5418 😂😂🤣

    • @Dogo.R
      @Dogo.R 14 วันที่ผ่านมา +3

      That already exists, for example in hosted languages that exist as libraries like janetlang.
      There is a compiler that compiles the janetlang compiler as part of the library that you import to host the language.

    • @coltonaallen
      @coltonaallen 14 วันที่ผ่านมา +1

      And then the inevitable open-source npm library that abstracts even further the compiler compiling the core library that is react...

  • @happykill123
    @happykill123 14 วันที่ผ่านมา +52

    All the downsides of a runtime language, with all the downsides of a compiled language. Sold.

  • @xxapoloxx
    @xxapoloxx 14 วันที่ผ่านมา +307

    We are now compiling an interpreted language... we have officially jumped the shark.

    • @rasib101
      @rasib101 14 วันที่ผ่านมา +52

      We have been compiling an interpreted language for a while now. TypeScript? PostCSS?

    • @JeremyAndersonBoise
      @JeremyAndersonBoise 14 วันที่ผ่านมา +20

      @@rasib101 but does make it a good idea? No, it does not.

    • @BryanSeigneur0
      @BryanSeigneur0 14 วันที่ผ่านมา +6

      Sweet summer child..

    • @rodrigohmoraes
      @rodrigohmoraes 14 วันที่ผ่านมา +12

      We've been doing that for ages. Think of Java or Erlang/Elixir, they are compiled into bytecode which is then interpreted at runtime by a VM

    • @niks660097
      @niks660097 14 วันที่ผ่านมา +14

      @@rodrigohmoraes none of them are interpreted languages, and java/Erlang VM bytecode is quite low level and close to assembly anyway, that's why their JIT's are so fast.

  • @hamm8934
    @hamm8934 14 วันที่ผ่านมา +200

    Cant wait for Theo to praise React adding a compiler after crapping on Angular, Vue, Svelte, etc. for having a compiler because "it's creating a lot of magic that React just isnt; rEaCt iS jUsT jAvAsCrIpT!"

    • @sokacsavok
      @sokacsavok 14 วันที่ผ่านมา +22

      Except, JSX, TSX, TS which were already compiled (transpiled), for a long time now.

    • @developer217
      @developer217 14 วันที่ผ่านมา

      theo is a man-child

    • @danielchettiar5670
      @danielchettiar5670 14 วันที่ผ่านมา

      People still listen to that guy? 9/10 takes of his are just.... meh, stupid

    • @albertoarmando6711
      @albertoarmando6711 14 วันที่ผ่านมา +46

      I unsubscribed his channel.

    • @bullettime2808
      @bullettime2808 14 วันที่ผ่านมา +7

      Compiler is kind of a wierd term here, frameworks like Angular or Svelte need a compiler to function, the "React Compiler" is nothing but an optimzer, React can function perfectly without it

  • @Hector-bj3ls
    @Hector-bj3ls 14 วันที่ผ่านมา +90

    At my last company, I spent 2 months with another engineer optimising the webpack build. We stripped out about 2000 lines, and saved 25 minutes per build. Still took 8 minutes per build, but hey. That's what happens when all the tools are written in the slowest language and when everyone has the "computers are fast enough" mentality.

    • @Dogo.R
      @Dogo.R 14 วันที่ผ่านมา +7

      Slow languages with 0 build time exist like clojure.
      Build time is a seperate problem that can be solved while still using a "computers go fast" mindset.

    • @eldarshamukhamedov4521
      @eldarshamukhamedov4521 14 วันที่ผ่านมา +6

      Use Vite. Webpack is slow because it's old and was hacked together with no regard for performance.

    • @bestiasia
      @bestiasia 14 วันที่ผ่านมา +2

      Just slap esbuild on it and get to 4min build time

    • @TheBswan
      @TheBswan 14 วันที่ผ่านมา +10

      2000 lines of webpack config is wild

    • @gund_ua
      @gund_ua 14 วันที่ผ่านมา +3

      @@eldarshamukhamedov4521 very funny, do you even realize that vite is building using rollup which is just another bundler written in JS loooool

  • @thephoenix215-po2it
    @thephoenix215-po2it 14 วันที่ผ่านมา +106

    Translation: React is no longer a library, now it's.... a semi-framework, based upon the rules of react.

    • @connorskudlarek8598
      @connorskudlarek8598 14 วันที่ผ่านมา +18

      I would argue React stopped being a library a long time ago.

    • @thephoenix215-po2it
      @thephoenix215-po2it 14 วันที่ผ่านมา

      @@connorskudlarek8598 Why is that? A lot of people would say it's still a library

    • @monad_tcp
      @monad_tcp 14 วันที่ผ่านมา +3

      React is a browser.
      Really you don't need React to have components, Document.createElement is a thing, browsers support shadow DOM, so you don't need a tree diff render, really.

    • @SadgeZoomer
      @SadgeZoomer 10 วันที่ผ่านมา +2

      react isn't a library, react is a ladder

    • @otis3744
      @otis3744 6 วันที่ผ่านมา +1

      You know they say that but they haven’t considered dragon balls

  • @LaLoses
    @LaLoses 14 วันที่ผ่านมา +91

    - Remember those hooks that we introduced?
    - Forget them

    • @gund_ua
      @gund_ua 14 วันที่ผ่านมา

      Makes sense, cause they are hacks to get around retarded rendering pipeline that react has with it's JSX lol

    • @elgalas
      @elgalas 14 วันที่ผ่านมา +9

      Remember how "pass by reference" and keeping React close to "just JavaScript" as possible, meant you needed those memoization tools? Well now you don't... which also means that there's a generation of devs that learned "pass by reference" by heart

    • @DieterPrivate
      @DieterPrivate 7 วันที่ผ่านมา

      ​@@elgalasLol, memorisation isn't needed, just for react because it doesn't do reactivity well and totally against what a component stands for

    • @elgalas
      @elgalas 7 วันที่ผ่านมา

      @@DieterPrivate you mean it doesn't proxy getters and setters, and doesn't make up its own ad-hoc language or templating DSL to stay as close to JavaScript as possible?

    • @DieterPrivate
      @DieterPrivate 7 วันที่ผ่านมา

      @@elgalas nope, not what I meant. React treats components as stateless, rendering each time, while a component is an instance that has lifecycle. Thus you have to memoise things to work against what react does and have it as a component instance. No matter what reactivity you use. RxJS fits FE reactivity the best

  • @eliasgill2453
    @eliasgill2453 14 วันที่ผ่านมา +78

    In the words of another person: "they builded Svelte, but 10x worse"

    • @FlanPoirot
      @FlanPoirot 14 วันที่ผ่านมา +3

      wise words

    • @smnomad9276
      @smnomad9276 14 วันที่ผ่านมา +9

      Do you mind quickly explaining in a nutshell why is React having a compiler such a big deal? What issue React had that this solves?

    • @evergreen-
      @evergreen- 14 วันที่ผ่านมา

      @@smnomad9276having you tried… watching the video?

    • @vigneshwarrv
      @vigneshwarrv 14 วันที่ผ่านมา

      ​@@smnomad9276 To avoid unnecessary rendering. Basically memorization of the all the components that will be invoked to render UI

    • @ms-mousa
      @ms-mousa 13 วันที่ผ่านมา

      best take so far

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny 14 วันที่ผ่านมา +11

    Every time React launches a new "feature" I imagine them dumping another giant pot of overcooked spaghetti noodles onto an already massive overflowing plate of pasta.

  • @mattgarelli1371
    @mattgarelli1371 14 วันที่ผ่านมา +18

    Omg who said 'use footgun' you killed me. Random strings at the beginning of functions that have repercussions -> profit.

    • @zaccanoy
      @zaccanoy 14 วันที่ผ่านมา +1

      how is this much different than an annotation? a bare string isn’t a thing you’d usually use in your code right? the only place i’ve seen anything like that is comments in python.

  • @MikeC1
    @MikeC1 14 วันที่ผ่านมา +41

    So... We went from Java Applets and ActiveX to this?

    • @berkowk
      @berkowk 14 วันที่ผ่านมา

      Not yet. It's still a band aid.

    • @TJackson736
      @TJackson736 14 วันที่ผ่านมา +10

      It does seem like web programmers have been trying to turn Javescript into Java for the past 15 years.

    • @ItsAllFake1
      @ItsAllFake1 14 วันที่ผ่านมา +1

      IE, VBScript and ActiveX for the win!

    • @zaccanoy
      @zaccanoy 14 วันที่ผ่านมา +3

      modern javascript is nothing like java, what a wild thing to say lol. people have had compilation steps in their builds for web this entire time (minification, removing types, using older more stable language features instead of modern ones, turning JSX into function calls, etc), you always have a build step for native code anyway, why are people so weird about the react compiler?

    • @tohoYomo
      @tohoYomo 14 วันที่ผ่านมา +2

      @@zaccanoy the react "compiler" isn't even a compiler, it's a tool to optimize code. it doesn't compile anything!

  • @ivanjermakov
    @ivanjermakov 14 วันที่ผ่านมา +43

    What I hate about React is that the docs never mention how anything works under the hood. It's always two sentences of what it is and then two pages of how to install and configure it.

    • @dealloc
      @dealloc 14 วันที่ผ่านมา +1

      The source code is available. It's just AST transformations based on heuristics that are enforced by following the rules that were set up when hooks were introduced. The problem with writing down, in detail, of how a particular algorithm works, is that algorithm can change at any time. Nobody has time to keep that up-to-date; it's internal semantics and not necessary info for vast majority of people, rather than "dos and donts" at a higher level.

    • @lll_Death_lll
      @lll_Death_lll 14 วันที่ผ่านมา +2

      Well, open the source code. It's open source after all

    • @theropoy9371
      @theropoy9371 14 วันที่ผ่านมา +21

      @@lll_Death_lll Who needs docs if you have the source, am I right?🤓 /s

    • @ivanjermakov
      @ivanjermakov 14 วันที่ผ่านมา +10

      The problem is not that one cannot find how it works, but that it's uncommon for frontend devs to dig deep to gain better understanding of the technolgies they're using.

    • @theangelofspace155
      @theangelofspace155 14 วันที่ผ่านมา +3

      ​@@ivanjermakovSo skill issues?

  • @theohallenius8882
    @theohallenius8882 14 วันที่ผ่านมา +90

    Why not just call it an "optimizer"? Makes 0 sense

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา +13

      Marketing, "compiler" sounds way more attractive.

    • @simonhartley9158
      @simonhartley9158 14 วันที่ผ่านมา +6

      Currently it optimizes. Who knows what it will also do in the future.

    • @dealloc
      @dealloc 14 วันที่ผ่านมา +1

      define compiler

    • @cowCuddler
      @cowCuddler 14 วันที่ผ่านมา +10

      @@dealloc Tool that takes a high level language and outputs low level code

    • @JeremyAndersonBoise
      @JeremyAndersonBoise 14 วันที่ผ่านมา +1

      @@cowCuddler succinct, if oversimplified.

  • @rodrigohmoraes
    @rodrigohmoraes 14 วันที่ผ่านมา +16

    "It's just a library, not a framework."

    • @notlekrut
      @notlekrut 13 วันที่ผ่านมา +3

      react dev > proceeds to compare it to frameworks
      Still bothers me that React folks always come out of nowhere to correct you and say it's not a framework. Get over it people, it hasn't been a library in a long time

    • @monad_tcp
      @monad_tcp 13 วันที่ผ่านมา +1

      Its just a library, not an entire browser operating system.
      React is literally second system syndrome, and its not even needed anymore as we have web components.

  • @mrmagnetic927
    @mrmagnetic927 14 วันที่ผ่านมา +14

    Javascript frameworks that use a compiler are doing so to optimize runtime performance...
    WAIT TILL THEY REALIZE THIS CAN BE DONE WITHOUT A COMPILER. 😂

  • @almicc
    @almicc 14 วันที่ผ่านมา +10

    Compiler seems like the absolutely wrong name for this, should be called "React Memoize Optimizer" and the first thing is does is statically analyze your code and show you the biggest re-renders that could happen, then you specifically tell it to optimize that part. This step should also be running after minification, I cannot imagine this can be smart enough to guarantee not breaking side-effects in the middle of your code's build process, but it'll be way easier to analyze flow when it's minified and partially optimized already, side effects would become pronounced.

  • @kibels894
    @kibels894 14 วันที่ผ่านมา +41

    Finally a way to use even more memory in a React application

    • @somerandomlittlechannel7860
      @somerandomlittlechannel7860 14 วันที่ผ่านมา +4

      it doesn't use more memory

    • @superderpyderps
      @superderpyderps 14 วันที่ผ่านมา

      It's not straightforward. In some cases, the optimizations will mean better memory utilization. But aggressive memoization at this level means in at least some complex apps, there _will_ be more memory used. Will it matter? Will almost certainly depend on the exact code and the application being written.

    • @somerandomlittlechannel7860
      @somerandomlittlechannel7860 14 วันที่ผ่านมา

      @@superderpyderps I can’t really think of a scenario where the memory usage could make a meaningful difference

    • @ryanquinn1257
      @ryanquinn1257 14 วันที่ผ่านมา

      I think part of the talk was about performance improvements in instagram because at some point it’s hard to memorize well and even they saw improvements where they thought they memorized well. Debugging the hard cases will be very hard, but it should be a win overall for most react apps.

    • @somerandomlittlechannel7860
      @somerandomlittlechannel7860 14 วันที่ผ่านมา +1

      @@ryanquinn1257 you get performance improvements but it’s not due to memory. It’s because of execution time of instantiating functions.

  • @leekuncoins6347
    @leekuncoins6347 14 วันที่ผ่านมา +26

    When will it need a kernel OS to render react views :)

  • @user-xj5gz7ln3q
    @user-xj5gz7ln3q 14 วันที่ผ่านมา +104

    When your framework needs a compiler just to produce HTML, you know you dug a hole too deep for yourself.

    • @rasib101
      @rasib101 14 วันที่ผ่านมา +27

      Not really. Svelte does this too. It's a good change for devs.

    • @kkebo
      @kkebo 14 วันที่ผ่านมา +5

      @@rasib101 haters gonna hate

    • @rodrigohmoraes
      @rodrigohmoraes 14 วันที่ผ่านมา +5

      @@rasib101 Angular also does this, since 2.0 in 2016

    • @leekuncoins6347
      @leekuncoins6347 14 วันที่ผ่านมา

      So node js itself did it, compile features from C/C++ into js 😅

    • @wassafshahzad8618
      @wassafshahzad8618 14 วันที่ผ่านมา

      @@leekuncoins6347 node js is a runtime not a compiler and it doesnt produce HTML, I mean you could

  • @gokusaiyan1128
    @gokusaiyan1128 14 วันที่ผ่านมา +10

    Man I miss my simple template days with Django or any other framework. you write a simple SQL based db have a crud api with python/js/go/java and templates with bootstrap. very fast and still reliable . I do suck at frontend though

    • @woofcaptain8212
      @woofcaptain8212 14 วันที่ผ่านมา +2

      Honestly this is the way. Any web devs that joined after 2016 don't even realize these are options.

    • @rapper-charmer
      @rapper-charmer 12 วันที่ผ่านมา +1

      Waiting for the circle to complete. I use Web Components to avoid all this ... stuff. Now AI can fill out all the WC boilerplate code it's easier than ever.

  • @klevidervishi148
    @klevidervishi148 14 วันที่ผ่านมา +11

    compiler that compiles a compiler that you have to do oil change every few weeks

  • @UntitledProjectDemo
    @UntitledProjectDemo 14 วันที่ผ่านมา +79

    "Rolling out the compiler will depend on the health of your codebase and well you've followed the Rules of React"
    translation: using this tool will depend on how much time you've dedicated to refactoring/rebuilding your app instead of providing business value because we're so bad at providing a consistent and operationally scalable development experience that we've had to start communicating conventions that we don't actually call "conventions" because we shat on opinionated frameworks for so long.

    • @JeremyAndersonBoise
      @JeremyAndersonBoise 14 วันที่ผ่านมา +5

      Savage and correct.

    • @dealloc
      @dealloc 14 วันที่ผ่านมา +1

      When you add manual optimizations and code that goes outside the scope of whatever technology you use, you have already put the business in a corner; it's a deliberate choice you or your team has made and so you have decided "this is something we have to maintain".
      I can't think of any compiler that can understand the context of your business needs and requirements and apply optimizations to the code based on that. It's highly dependent on how you write that code in the first place, whether future optimizations will be of benefit or not.

    • @Dogo.R
      @Dogo.R 14 วันที่ผ่านมา

      ​@@deallocIts called a JIT compiler which optimize in runtime.
      There are whole bussinesses around making them like azul.
      This is possible in websites aswell via serverside rendering.

  • @AlFasGD
    @AlFasGD 14 วันที่ผ่านมา +5

    They made tooling for the tooling for the tooling for the tooling they created. Time to press the button, Kim

  • @noherczeg
    @noherczeg 14 วันที่ผ่านมา +3

    Remember guys, they introduced functional components because they couldn't wait for ECMA to standardize auto bind() object methods.

  • @erikisidore8366
    @erikisidore8366 14 วันที่ผ่านมา +5

    Front-end developers create non-existent problems and then create solutions for these problems that eventually become huge headaches and the complexity of the front-end just grows exponentially without actual necessity, are we stupid?

    • @vigneshwarrv
      @vigneshwarrv 14 วันที่ผ่านมา +1

      Not so. But definitely Stupid enough to only rant instead of trying to solve the problem

    • @erikisidore8366
      @erikisidore8366 14 วันที่ผ่านมา +2

      @@vigneshwarrv But that's the thing... We are creating the problems, you get it? The solution is to stop creating more problems and adding more and more layers of complexity into the JavaScript ecosystem, it is getting ridiculous. That's the main issue of modern JavaScript, we have too many libraries and too many abstraction layers one on top of another and all of that just to create what should be simple UI interactivity? Do we really need all of that?

    • @vigneshwarrv
      @vigneshwarrv 14 วันที่ผ่านมา +1

      @@erikisidore8366 true. It's a hell of a abstraction layers now.

    • @erikisidore8366
      @erikisidore8366 14 วันที่ผ่านมา +2

      @@vigneshwarrv Yeah, if you pay attention, their stated reason to develop this compiler is because of issues that can occur while using React and React hooks so it's literally another abstraction layer to solve an issue that they themselves created... I just find that so silly

  • @DanielCouper-vf5zh
    @DanielCouper-vf5zh 14 วันที่ผ่านมา +1

    Oh so re proxies (mentioned at the very end), am I correct in thinking that basically screws most of the signals libraries + immer?

  • @LaLoses
    @LaLoses 14 วันที่ผ่านมา +2

    31:43 I think the memory is the same when we already use useMemo and useCallback, is the same array of dependencies and the same checks.
    Instead of using many caches, one by hook, now is only one for the entire component.

  • @n4bb12
    @n4bb12 14 วันที่ผ่านมา +4

    37:35 This looks like the compiler only creates the function once or on demand when it needs to change. With useMemo, useEffect and useCallback, a new function is created on each render regardless of whether it gets used or not. Plus the throw-away dependency arrays. They all create memory allocation and garbage collection overhead. So even if the compiler requires additional memory to keep track of things, it compensates for that by avoiding previous memory overhead.

    • @monad_tcp
      @monad_tcp 13 วันที่ผ่านมา

      If your compiler was really good, the entirety of react could be thrown away at the source code level before even packing it.
      Think about it : you have this declaration of a component, you have to know how its going to be updated when data changes, you know the relation between data.
      Why do you even need a library to render a function to render a Virtual DOM, to them have a library that merges that VDOM to the DOM and copy changes back from the DOM to the VDOM. Its insanity .
      If you really have a good enough compiler, you could basically convert the entire thing to direct render model in immediate mode.
      data changes -> update the DOM
      event happens -> update data
      React should go away if you really have a compiler.
      Maybe that's what they're trying to do.
      I have better thing to do than this stupidity that is web development. If it was for me to decide, everything would be direct immediate render to a Canvas using WebGL, if that's enough for super complex games, it should be enough for simple UI of your static landing page.

    • @n4bb12
      @n4bb12 13 วันที่ผ่านมา

      @monad_tcp "If your compiler was really good, the entirety of react could be thrown away at the source code level before even packing it."
      What's worse than VDOM is constantly re-creating and updating the DOM unnecessarily in a naive attemt to sync your model to the DOM.
      DOM updates are much more expensive than VDOM updates. React is not using VDOM out of conenience or ignorance. It's a step towards doing less work, not more.
      "data changes -> update the DOM" of course. But deciding how one of many possible model changes leads to one of many possible DOM changes without touching anything that doesn't need updating is a complex task.
      Most of all, you don't want to have to manage those things by hand in application code.

    • @n4bb12
      @n4bb12 13 วันที่ผ่านมา

      @@monad_tcp Svelte takes a more barebones approach and compiles your components to code that updates the DOM directly, without a VDOM, while still avoiding unnecessary work. It's definitely superor. It came long after React and so was able to benefit from all prior art. SvelteKit also still lacks a lot of convenience found in React-based frameworks.

    • @n4bb12
      @n4bb12 13 วันที่ผ่านมา

      @@monad_tcp "If it was for me to decide, everything would be direct immediate render to a Canvas using WebGL, if that's enough for super complex games, it should be enough for simple UI of your static landing page."
      Games are made for consumption by eyes and ears. Web pages are ALSO made for consumtion by search engines and accessibility tools. Pixels on the screen don't represent information that can be consumed in a structured way. How do you index a canvas in a search engine?
      Flutter Web does exactly that: Paint everything on a canvas directly. It's fast, but it leaves the web behind. It's not accessible, it's not indexable, it's not a web page. You can't right-click a link, get the usual browser right-click menu, and open it in a new tab. You can't re-use even the most basic things the browser provides such as selecting text to copy it. Everything needs to be built from scratch and by hand, just like in games. That's great if that's what you need. Most of us who develop for the web need something that embraces the web.

  • @JeremyAndersonBoise
    @JeremyAndersonBoise 14 วันที่ผ่านมา +2

    “Onto itself” instead of “unto itself,” Prime says it that way every time. ❤

  • @peterszarvas94
    @peterszarvas94 13 วันที่ผ่านมา +4

    react will do anything to avoid signals

  • @georgiilysenko459
    @georgiilysenko459 14 วันที่ผ่านมา +16

    It's terrifying how much developers efforts are spent to make this shit (javascript) usable

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา +3

      What's shit about it, the fact that it's the most popular language in the world and it runs the whole web without any contenders? Show me another language that was ever able to challenge that.
      Maybe the now obsolete Adobe Flash 😂

    • @wassafshahzad8618
      @wassafshahzad8618 14 วันที่ผ่านมา +8

      @@Leonhart_93 Actually its sht cause it was build in a month in no regards to the developer experience. It has more footguns then any other language. They had to create a compete new subset of the language just to make it work (TS).

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา

      ​ @wassafshahzad8618 Plese, spare me with the regurgitated information you heard in some dubious places without thinking if it means anything now.
      The JS of today is an incredibly complex piece of software, and it provides thousands of APIs for interacting with the browser.
      Have you seen how the JS-v8 C++ repository looks? It has at least 1million of lines of code, where things are constantly added and improved.
      It has absolutely no connection to the "JS created in a month" you are thinking about.

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา

      ​ @wassafshahzad8618 Plese, spare me with the regurgitated information you heard in some dubious places without thinking if it means anything now.
      The JS of today is an incredibly complex piece of software, and it provides thousands of APIs for interacting with the browser.
      Have you seen how the JS v8 C++ repository looks? It has at least 1million of lines of code, where things are constantly added and improved.

    • @Leonhart_93
      @Leonhart_93 14 วันที่ผ่านมา

      ​ @wassafshahzad8618 Spare me of the old repeated information you heard in some dubious places without thinking if it means anything right now.
      The JS of today is an incredibly complex piece of software, and it provides thousands of APIs for interacting with the browser.
      Have you seen how the JS v8 C++ repository looks? It has at least 1million of lines of code, where things are constantly added and improved.

  • @husseinhasan7758
    @husseinhasan7758 13 วันที่ผ่านมา

    Love the wisdom at the end of the video :) ✍️

  • @owlmostdead9492
    @owlmostdead9492 14 วันที่ผ่านมา +12

    Because that’s what Javascript needs, more hidden/magic stuff?

  • @tauiin
    @tauiin 14 วันที่ผ่านมา +1

    I think the idea of an optimizing compiler for a javascript framework is a good idea in general, but I really think if you're going there it's worth starting with a clean slate instead of trying to bolt it on to a framwor- uh, **library** (:P) that up until this point has seemingly wanted to keep the appearance & behavior of your transpiled code at least somewhat recognizable to the original source code in most circumstances.

  • @barneylaurance1865
    @barneylaurance1865 14 วันที่ผ่านมา

    How many times do they need to link to Rules of React from one page?

  • @glucoseguardian2650
    @glucoseguardian2650 14 วันที่ผ่านมา +2

    i thought React already had a compiler
    you're not sending .jsx files to the browser, are you? so the process of taking your jsx and turning it into js, is that not compiling?

    • @flarebear5346
      @flarebear5346 14 วันที่ผ่านมา

      React has done things in-memory on the client since it came out

    • @sokacsavok
      @sokacsavok 14 วันที่ผ่านมา

      You are right JSX/TSX needed Babel to transpile it, long before. This. isa lot of marketing bullshit, but React was always based on marketing bullshit.

    • @somerandomlittlechannel7860
      @somerandomlittlechannel7860 14 วันที่ผ่านมา

      @@flarebear5346 nobody compiles JSX on the client

    • @tauiin
      @tauiin 14 วันที่ผ่านมา

      JSX/TSX is rather lazily transpiled to javascript from what I can gather, basically just translates all the into calls to React.createElement, it dosent really optimize anything itself and is just a UX wrapper over writing vanilla javascript

  • @NavySturmGewehr
    @NavySturmGewehr 4 วันที่ผ่านมา

    Can you cover that concept of distance between functions? I use getters and setters in the hook, and I just prop drill my state down as far as I need it. Is that distance going to effect how fast it renders?

  • @elgalas
    @elgalas 14 วันที่ผ่านมา

    It works with TS directly, it even had a bug day 1 when parsing generics, fixed very quickly though

  • @BryanSeigneur0
    @BryanSeigneur0 14 วันที่ผ่านมา +2

    If Dr. Kripke from the Big Bang Theory is discussing programming with you, and he says "memoize" you can't tell if he's talking about React or memorization in the general sense.

  • @_mikeusa
    @_mikeusa 14 วันที่ผ่านมา

    @theprimetime you touched on something at the very end worth highlighting about accumulated debt/bloat.
    New developers added to a project, for one reason or another, do not take the time to understand the full codebase and/or the business logic.
    Having “contributor tests” to onboard or certify the various roles of stewardship is important. To help gate-keep bad code/decisions from being integrated into the repo. It also helps keep the number of decision-makers, fewer rather than grow by democracy.
    Of course, reality (iron triangle) often competes with ideality.

  • @LukasRotermund
    @LukasRotermund 14 วันที่ผ่านมา

    😂 the way Theprimagen said "Orinoco" reminded me of Erlich Bachman saying "aviato"

  • @lcarv20
    @lcarv20 14 วันที่ผ่านมา +3

    They would be better off by getting rid of vdom and then adding the compiler, much like svelte and solid (not sure about vue). He says it’s the most “advanced” frontend compiler (which I kinda don’t agree with) because they built it on top of a previous “mistake”, the vdom, which adds extra unnecessary code thus having the need for the useMemo and useCallback hooks. I might be wrong but this is what I understood from a little research. Correct me if I said nonsense.

    • @anxpara
      @anxpara 14 วันที่ผ่านมา

      Vue is working on "Vapor" to get rid of vdom

    • @DieterPrivate
      @DieterPrivate 7 วันที่ผ่านมา +1

      The memo hook is needed due to how react works, which is against what components are and a concept that just can't be good performance wise...

  • @jackdanielson1997
    @jackdanielson1997 14 วันที่ผ่านมา +8

    The reason it can use the same amount of memory is because before you already had that O^2 memory because of all of the unnecessary renders, therefore creating a ton of garbage to cleanup

  • @monad_tcp
    @monad_tcp 13 วันที่ผ่านมา

    20:22 yes, every time I reverse engineer code, I'm used to source maps not working, I mean, I don't have them when doing "reveng"

  • @xeoneraldo1254
    @xeoneraldo1254 5 วันที่ผ่านมา

    That guy is so amazed by the react compiler like its the most advanced in the world, i wonder how he'll react once he sees how c# compiler works

  • @NanneWielinga
    @NanneWielinga 14 วันที่ผ่านมา

    Libraries can publish compiled code, so the react compiler as a dependency requirement shouldn’t be the case. I also doubt whether React compiler will start optimising libraries.

  • @kristianulvund4274
    @kristianulvund4274 5 วันที่ผ่านมา

    Your way of speaking is mesmerizing

  • @FuzzyAnkles
    @FuzzyAnkles 14 วันที่ผ่านมา

    great insight 👀

  • @kgnet8831
    @kgnet8831 14 วันที่ผ่านมา

    THey should do an analysis of the compiler effects for instagram, that would give a lot more confidence in these numbers...

  • @judgewest2000
    @judgewest2000 14 วันที่ผ่านมา

    I use a combination of useState and useEffect across the board. My applications are used by a ridiculous number of people in the PR industry worldwide. I get if you have a useEffect that sets the state it causes your function to render at least twice as the first time the state is empty, which is easily handled by a simple if(state===null){return } command - but really this in reality is not a problem.
    Change my mind

  • @adaniel2929
    @adaniel2929 13 วันที่ผ่านมา

    Wouldn't mixing in some HTMX help solve a lot of the same problems?

  • @aziskgarion378
    @aziskgarion378 13 วันที่ผ่านมา

    Be honest. Compilers used to compile code into Assembly, which was then used an assembler to turn them into machine code.
    Guess, there will be a time where React-TS compiled code compiled to JS which is then compiled into Web Assembly, which can be read by the browser.

  • @Cahnisama
    @Cahnisama 14 วันที่ผ่านมา +3

    REACT MENTIONED LETS GOOOOOOOOOOOOOOO

  • @DJohn001
    @DJohn001 14 วันที่ผ่านมา

    Sorry, this is a comment before I've seen the vid. two things, first it's funny to see two streams going like a wave. first we had big computers (mainframe) at big corporations and universities going wave up to smaller servers scatter around everywhere which are now going wave down to a few big cloud computing providers.The same can be said with web pages. Fist they where server side rendered, than we had the JS framework wave starting with jQuery followed by React, Vue, and Angular. and now were are going back to server side rendered pages like before but still written in JS. Now the second thing I predict now that the next React compiler compiles to web-assembly if this one didn't do that already. It will also make use of server and client components like NextJs does.

  • @badbabybearbots8968
    @badbabybearbots8968 11 วันที่ผ่านมา

    Ultimately fixing the memo problem in the compiler is simply returning `() => __jsx(...)` instead of `__jsx(...)`. This way you just need to call whatever is returned vs its parent function on re-render.

  • @jackdanielson1997
    @jackdanielson1997 14 วันที่ผ่านมา +5

    People are hung up on the term compiler. There isn't necessarily an extra step in addition to transpilation, it's just performing optimizations in the existing process of transpilation

    • @TheBswan
      @TheBswan 14 วันที่ผ่านมา +3

      Yep. For folks who actually use these tools, it's just a babel plugin

    • @Heater-v1.0.0
      @Heater-v1.0.0 14 วันที่ผ่านมา +1

      Yeah, because words have meanings. The word "compiler" has had a pretty specific meaning in the computing world for many decades. Whatever this is it is certainly not a "compiler" in the traditional sense. If it's "just performing optimisations" as you say why not call it an "optimiser"?

    • @harrybilsonia
      @harrybilsonia 14 วันที่ผ่านมา +2

      why don't you just call javascript java for short then?

  • @macccu
    @macccu 11 วันที่ผ่านมา

    I can't wait when some will come up with this *revolutionary* new thing when you just write html and then add one simple library and write simple JS and it makes it interactive. And it *just works*

  • @tibbydudeza
    @tibbydudeza 14 วันที่ผ่านมา +1

    The compiler is a transpiler - it is only useful to get rid of explicit useMemo hooks and automagically figure it out - oh dearie - can't wait for the side effects :).

  • @anjan5545
    @anjan5545 12 วันที่ผ่านมา

    I am still at is-it-a-library-or-framework ..now is-it-compiled-or-transpiled-? 😀

  • @julianjackson8756
    @julianjackson8756 14 วันที่ผ่านมา

    His hair was so wobbly at the end

  • @jaredkomoroski
    @jaredkomoroski 14 วันที่ผ่านมา +1

    The idea of libraries assuming the output of the "compilation" is nightmare fuel

  • @TapetBart
    @TapetBart 14 วันที่ผ่านมา

    Are optimizing compilers a new thing in the web community?

  • @naranyala_dev
    @naranyala_dev 14 วันที่ผ่านมา

    we need one more compiler abstractions, just one more

  • @LinxOnlineGames
    @LinxOnlineGames 12 วันที่ผ่านมา

    Sounds like it should be a static analyser that shows you mistakes, logical errors, and areas that could be improved upon in terms of processing and memory pressures.
    Introducing another layer of obfuscation seems counter intuitive.

  • @airkami
    @airkami 14 วันที่ผ่านมา

    This is how I reach 0% additional memory increase.
    Compiling your code will increase your memory, but that’s not categorized as additional memory . Instead, it is categorized as functional. Additional memory usage would be nonfunctional memory added directly to the app

  • @kyuthefox
    @kyuthefox 11 วันที่ผ่านมา

    And I thought that maybe the offer compiling some componemts to wasm or somerhimg where the name would have mde sense. but nope its just more javascript. I love it /s

  • @ItsAllFake1
    @ItsAllFake1 14 วันที่ผ่านมา

    He's mastered the Yngwie Malmsteen pucker in the thumbnail.

  • @adaliszk
    @adaliszk 14 วันที่ผ่านมา +1

    Hahaha, how does one declare "use memo" and "use client" at the same time?

    • @JeremyAndersonBoise
      @JeremyAndersonBoise 14 วันที่ผ่านมา

      Good question

    • @neociber24
      @neociber24 14 วันที่ผ่านมา

      Maybe "use client" is a file level and "use memo" at function level

  • @cowCuddler
    @cowCuddler 14 วันที่ผ่านมา +13

    How can you compile something from one language to the same language?

    • @David_Box
      @David_Box 14 วันที่ผ่านมา +13

      JavaScript. I love it.

    • @asdfaedrgeargadsfg
      @asdfaedrgeargadsfg 14 วันที่ผ่านมา +3

      by calling the thing that does it a compiler :)

    • @deadchannel8431
      @deadchannel8431 14 วันที่ผ่านมา

      Static anal dialysis

    • @rasib101
      @rasib101 14 วันที่ผ่านมา +1

      Compiling is just converting a string to a different string. .ts or .js extension are all semantics. Automating some of the optimizations that devs can do is a good change.

    • @cowCuddler
      @cowCuddler 14 วันที่ผ่านมา

      @@rasib101 Right, right. My understanding is that it was always converting high level languages to low level.
      Javascript just seems to enable devs to make abstractions that slow down the apps the build with them, that they have to convert back to faster JS that is simply unreadable. It's not really compilation.

  • @thestud2
    @thestud2 14 วันที่ผ่านมา +1

    Why isn't a compiler that converts react to Web Assembly? That would be way more efficient?

    • @UnidimensionalPropheticCatgirl
      @UnidimensionalPropheticCatgirl 14 วันที่ผ่านมา +1

      It wouldn’t since all DOM manipulation has to be done through JS, so you endup with constant ping pong of FFI between wasm and js. not to mention string casting hell. Wasm is good if you need to do complicated calculations and spit out bunch of numbers back into js, outside of that it’s kinda meh.

  • @seeds.ffmpeg
    @seeds.ffmpeg 14 วันที่ผ่านมา

    The memory point is mute because it's all done by reference. It's constant

  • @lukasbeyer2649
    @lukasbeyer2649 14 วันที่ผ่านมา +12

    guys react is not a framework

  • @technolung
    @technolung 14 วันที่ผ่านมา

    The Inner Inner Inner Platform Effect

  • @seventymx
    @seventymx 12 วันที่ผ่านมา

    Main reason why I use React is it does not need a compilation step ... I really really hope it will not become mandatory and stay opt-in ... else i would just use Vue.js or even some WASM ... or stick to JQuery ... Dont like me no skill issue compiler

  • @smnkumarpaul
    @smnkumarpaul 14 วันที่ผ่านมา +1

    One new thing for JS devs to learn for the interview 😑 so that they can get haired and fix componentShouldUpdates in the Class Components 😪

  • @lydianlights
    @lydianlights 7 วันที่ผ่านมา

    So they realized that it was so hard for humans to write correct, non-footgun React, that it would just be easier to write a compiler that fixes the footguns.
    lol

  • @math-s
    @math-s 14 วันที่ผ่านมา +1

    please devin, take my job!

  • @zegg90
    @zegg90 14 วันที่ผ่านมา +1

    19:26 gleam mentioned

  • @FrontLineXDS
    @FrontLineXDS 13 วันที่ผ่านมา

    I don’t see how this is significantly different from webpack or babel when it comes to transpilation, other than different end result of caching

  • @u9vata
    @u9vata 13 วันที่ผ่านมา

    The usual "this thing we use suck - lets bloat it with one more level of abstractions" 🙂🙂

  • @n30v4
    @n30v4 12 วันที่ผ่านมา

    How can the React Compiler work without a React Linker?

  • @turculaurentiu91
    @turculaurentiu91 13 วันที่ผ่านมา

    So if the exponential memory growth is correct, all the electron and web apps based on this will be even more memory hungry, YAY!!!

  • @MrKlarthums
    @MrKlarthums 14 วันที่ผ่านมา +1

    I wish these companies used their weight to push browsers towards being language-neutral instead of creating yet another layer of duct tape on JS. WASM is not good enough.

    • @Heater-v1.0.0
      @Heater-v1.0.0 14 วันที่ผ่านมา +1

      WASM would be just fine if it was given access to the DOM and other browser API's such that one did not have to go through JS to do anything,

  • @monad_tcp
    @monad_tcp 13 วันที่ผ่านมา

    4:24 you hate directives ? oh you're going to love Haskell, there's directives to alter syntax

  • @dahahaka
    @dahahaka 14 วันที่ผ่านมา +1

    I'm shocked this isn't how react worked already lol

  • @elgalas
    @elgalas 14 วันที่ผ่านมา

    Memory wise. React's standard rendering behavior has always been to rerender the entire tree from the setState position downstream. All of those calculations were thrown away, already allocated, the manual way to do this was to keep these around with memo. The compiler knows automatically which ones to hold onto.
    Potentially, across renders less new objects need to be reallocated.
    One thing that can be annoying, route switching away, which would require throwing away a gigantic tree. How does one ensure to not create long gc.
    Thia compiler reminds me a lot of Recoils dependency tree analysis.

    • @vigneshwarrv
      @vigneshwarrv 14 วันที่ผ่านมา

      I guess compiler doesn't have to optimise that. Preventing renders of a same component that has no changes is the only motive of this compiler I guess

  • @dranon0o
    @dranon0o 14 วันที่ผ่านมา +1

    I just want a compiler as a CLI binary and do not depends on tons of packages to download otherwise... i will stick to HTMX or ELM

  • @demarcorr
    @demarcorr 13 วันที่ผ่านมา

    comments are just on point. i absolutely do not envy web devs, but i also dont have any sympathy.

  • @chrisjsewell
    @chrisjsewell 14 วันที่ผ่านมา +2

    How many layers of polish can you put on that 💩

  • @oShinobu
    @oShinobu 14 วันที่ผ่านมา +1

    Just a library btw

  • @gorkemeldeniz9579
    @gorkemeldeniz9579 13 วันที่ผ่านมา

    transpiler bundler compiler I want more layersss

  • @trunghieunguyen-pj8ts
    @trunghieunguyen-pj8ts วันที่ผ่านมา

    Can't wait for React to become an OS😂

  • @ivan.jeremic
    @ivan.jeremic 14 วันที่ผ่านมา

    If the compiler does useCallback, useMemo, React.memo for me it should also add the dependencies to useEffect for me, if they don't add that feature to the compiler I will be mad :(

    • @senbonzakura662
      @senbonzakura662 14 วันที่ผ่านมา

      no i've had components break if you add a dependency to a certain use effect in it, that would be a bad idea

    • @username7763
      @username7763 13 วันที่ผ่านมา

      @@senbonzakura662 I have to. In my case there was something wrong with the code. The problem is maintaining a large codebase, it isn't always possible to correct those problems at the same time. But it would be nice to have a syntax to auto-apply dependencies. VHDL has this.

  • @mvargasmoran
    @mvargasmoran 13 วันที่ผ่านมา

    Will this beat motherf***ing website with about 3~5 lines os plain JS for the counter?

  • @TayambaMwanza
    @TayambaMwanza 14 วันที่ผ่านมา +1

    React is becoming Angular now

  • @Salantor
    @Salantor 14 วันที่ผ่านมา

    So it is gonna be what, sixth, seventh paradigm shift for React in the last 10 years? And probably not the last one considering the history of the library?

    • @OP-ig1fj
      @OP-ig1fj 12 วันที่ผ่านมา

      which is good actually

    • @Salantor
      @Salantor 12 วันที่ผ่านมา

      @@OP-ig1fj I guess? Makes switching projects a bit harder though.

  • @XKCDism
    @XKCDism 14 วันที่ผ่านมา

    the design of the react "Library" is not of one mind, and has never been so

  • @cyneostudio
    @cyneostudio 11 วันที่ผ่านมา

    I tested it on a real project, there is a 6-9% increase on JS bundle size and a 5-7% increase on JS map files

  • @SXsoft99
    @SXsoft99 13 วันที่ผ่านมา

    It's funny the ammout of flame that React gets for introducing this, but when Vue3 improved it's compiler everybody was like "They care about us"