This New React Feature Will Make Your App 20% Faster

Поділитися
Вставка
  • Опубліковано 26 сер 2024

КОМЕНТАРІ • 109

  • @saqibkhanz8417
    @saqibkhanz8417 3 місяці тому +31

    Could you please create videos based on large-scale projects?

  • @bobwilkinsonguitar6142
    @bobwilkinsonguitar6142 2 місяці тому +2

    Already updated my projects. Pretty smooth transition, but the eslint isn't working in Vite, so I've got 8/9 and 32/34 components memoized, but can tell which ones are problematic. Using MUI, my component tree is a mess😭

  • @snake1625b
    @snake1625b 2 місяці тому +5

    if it memoizes everything by default then does it use extra memory as well?

  • @rp77797
    @rp77797 2 місяці тому +1

    Great video! How do you find out which components can't be compiled. The health check only tells the number of components compiled. Is there a way to see more details on which components didn't compile and the reason?

  • @saru-mado
    @saru-mado 3 місяці тому +3

    Great to see u again! Kyle

  • @ericepp1496
    @ericepp1496 2 місяці тому +56

    I love this guy but I can’t unsee him shaking his head while talking. It‘s robbing me of my focus 😂

    • @rooibaard832
      @rooibaard832 2 місяці тому +18

      Why did you have to say that? now I keep seeing it as well

    • @kkebo
      @kkebo 2 місяці тому +7

      Shit can't unsee that now 😂

    • @witchmorrow
      @witchmorrow 2 місяці тому +1

      oh damn you're so right it's constant, I never noticed before

    • @adamleblanc5294
      @adamleblanc5294 Місяць тому +1

      It's so distracting... I have to cover his face...

  • @arek9430
    @arek9430 2 місяці тому +2

    So basically it implements `React.memo`, `useMemo` and `useCallback` be default to any mutable elements making it not rerender brainlessly - shouldn't it be default React behaviour?

    • @s7yr0
      @s7yr0 2 місяці тому +3

      We should have this in like 2014

  • @fabianramirez3222
    @fabianramirez3222 2 місяці тому

    Thabks for sharing this info. It's always good to know React keeps evolving.

  • @gothicwave7761
    @gothicwave7761 2 місяці тому +1

    bro really had to spend 1/3 of the video editing the config files just to write hello world 💀💀💀 react sure looks tempting I wanna learn this aha 😭

  • @mohamadrezakazemian5220
    @mohamadrezakazemian5220 2 місяці тому

    great video! thanks for sharing

  • @kevinespina3289
    @kevinespina3289 3 місяці тому

    More titled Tuesday please!
    So you stream somewhere? On twitch maybe?

  • @SeanCassiere
    @SeanCassiere 2 місяці тому

    PSA: For anyone looking to get the eslint warning and errors, make sure you are using v8 without the flat-config. The react eslint plugins are not compatible with the flat config and v9.

  • @user-fc8xh7uo4c
    @user-fc8xh7uo4c 2 місяці тому

    Hi, thanks for your awesome videos, is there a way to reach out to you for questions?

  • @amitjoshi956
    @amitjoshi956 2 місяці тому

    Hey Kyle! I have been trying to solve this problem from long and hence seeking your help How do hide/remove the title and more videos sections from the UA-cam embedded player in my app? tried the 's contentDocument and querying for its children but that didn't help.

  • @premsagar4438
    @premsagar4438 2 місяці тому

    What kind of keyboard you use Kyle?

  • @MinorMood
    @MinorMood 24 дні тому

    Thank for the video, high quality content, as usual. But these features I see as huge overhead and completely pointless. JSX and all the React concept is an abstraction big enough. And this only builds more abstraction - taking away the real understanding of how things work under the hood - without providing any real benefits to the developer, as I see it here,

  • @karethokyakare651
    @karethokyakare651 2 місяці тому

    Did anyone try React compiler for Existing Projects?plz share exact steps for migration

  • @BeCurieUs
    @BeCurieUs 2 місяці тому +1

    We still can't even upgrade to 18 cause we have to upgrade all our unit tests from enzyme to RTL....that face when 100% unit test coverage causes migration issues

    • @fabianramirez3222
      @fabianramirez3222 2 місяці тому +1

      That moment when you realize unit testing helps you catching bugs earlier, but takes extra time to maintain and introduce a new way of coupling.

  • @huycaoviet8367
    @huycaoviet8367 3 місяці тому +1

    Useful 🎉

  • @AjayGopalShresthaAGS
    @AjayGopalShresthaAGS 3 місяці тому +3

    I loved the class-based components. they complicated the frontend development with the introduction of functional components with hooks.
    The thing use memo does to a react app. should have happened by default.

    • @programmerjowo
      @programmerjowo 3 місяці тому

      Yeah class based component is more clean and just like desktop gui programming. And hook is crap

    • @thecoolnewsguy
      @thecoolnewsguy 2 місяці тому +2

      Wow. I thought I was mad when I thought they were cleaner.
      Glad I'm not the only one on the boat.
      I've always hated how dirty the code looks on function components. It's a mess. I'm having hard time trying to read this mess.
      On the other hand, classes were so cleaner and easier to read.

    • @programmerjowo
      @programmerjowo 2 місяці тому

      @@thecoolnewsguy yeah hooks especially useEffect is the source of bugs

  • @first275
    @first275 3 місяці тому +2

    I love React and I'm really exited for these new features to become stable

    • @SteveosCPU
      @SteveosCPU 3 місяці тому

      what do you love about React? I don't use it.

    • @first275
      @first275 3 місяці тому

      @@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve

    • @first275
      @first275 2 місяці тому

      @@SteveosCPU try others frameworks, you'll realize React has the lowest learning curve

    • @fabianramirez3222
      @fabianramirez3222 2 місяці тому +1

      ​@@SteveosCPUmost of the time you don't have a choice due to IT guidelines, 1st or 3rd party dependencies, or simply. getting to work in ongoing projects made in React, so no.

  • @slliks4
    @slliks4 2 місяці тому

    I am not ready for react 19 😅

  • @luiz.henrique9
    @luiz.henrique9 2 місяці тому

    If I am using the Context API, will this memo only trigger a re-render in the components that use the specific property that was updated?

    • @arek9430
      @arek9430 2 місяці тому +2

      I was once doing some serious debuing in my react-native app that used ContextApi and here is what I observed:
      -EACH component that uses 'useContext(myContext)` and even uses property that didn't change in the context will always rerender when any property of useContext changes
      -without using `useCallback` and `useMemo` on properties and functions served by the context, WHOLE context rerenders (and then all subsequent components that uses this context) on each local component state change (not from context).
      -so using `useCallback` and `useMemo` on arrays objects and funtions inside ContextApi dramatically lowers number of unnecessary rerenders but still on any property change inside context, all components using this context will rerender - redux fixes this issue. So ContextApi with memoizations is quite good, but definitely not ideal - or I am wrong.

  • @abdoolkareem_
    @abdoolkareem_ 3 місяці тому +3

    Faster or faster compile time?

    • @davidmartensson273
      @davidmartensson273 2 місяці тому

      Faster runtime. This is actually something that many functional languages already have been doing for 30 years which makes it fast.

  • @user-ko1cw6mv4q
    @user-ko1cw6mv4q 3 місяці тому

    ❤️❤️🥺 awesome

  • @sadabdhrubo
    @sadabdhrubo 3 місяці тому

    we would love to have a crush course on nest js from you. ❤❤

  • @rajfekar1514
    @rajfekar1514 2 місяці тому

    please teach new nextjs 15 features and websocket connection with example

  • @MetroExodus999
    @MetroExodus999 2 місяці тому

    Also hooks(use, useoptimistics,use actions......) please

  • @avijitchanda7944
    @avijitchanda7944 2 місяці тому

    How use effect not cause any issues, if you guys see there is no dependency array so it will under do infinite loop right?

  • @jasonjasonjasonjasonjason
    @jasonjasonjasonjasonjason 2 місяці тому

    bruh moment

  • @hathspider9763
    @hathspider9763 2 місяці тому

    This iust seems like too much work to upgrade. Im keeping with 18.

  • @gigsnicky
    @gigsnicky 2 місяці тому

    Shake it, but shake less

  • @Euquila
    @Euquila 3 місяці тому +1

    { name }: { name: string }
    This is the part of Typescript I don't like. In the context of dynamic language we should take some liberties, especially in frontend code where the depth is complexity is usually not that great.

  • @habiks
    @habiks 3 місяці тому +5

    just scrap react for something that is fast out of box

  • @deimne970
    @deimne970 3 місяці тому +6

    React trying to be Svelte 🤣

    • @davidmartensson273
      @davidmartensson273 2 місяці тому

      No, its react implementing common functional features that has been around for decades.

  • @romek4794
    @romek4794 3 місяці тому +45

    You won't imagine how fast your app will be when you stop using react at all! Start learning vanilla JS again!

    • @kaustubhpaturi4801
      @kaustubhpaturi4801 3 місяці тому +4

      Yea... Sometimes I do feel that... 😂

    • @samking618
      @samking618 3 місяці тому +11

      and reinvent the wheel!

    • @programmerjowo
      @programmerjowo 3 місяці тому +2

      jQuery write less do more

    • @kkebo
      @kkebo 3 місяці тому +24

      This comment is so stupid, no sane person would choose vanilla js to build a large scale app.
      Atleast use Lit

    • @fabianramirez3222
      @fabianramirez3222 2 місяці тому

      Fun fact: Stream browser webapp uses jQuery. Like a lot.

  • @thecoolnewsguy
    @thecoolnewsguy 2 місяці тому

    Too bad the compiler is still in beta

  • @giftjacksun4799
    @giftjacksun4799 3 місяці тому

    Third to view
    This is great. Thanks🤭

  • @SithLordBishop
    @SithLordBishop 3 місяці тому +16

    stop using react :P Hopefully this helps I quit react after using react hooks for a while. they are so convoluted, cumbersome, and messy

    • @ThotsAndPrayers
      @ThotsAndPrayers 3 місяці тому

      U were prob using them wrong

    • @ilovekungfu1533
      @ilovekungfu1533 3 місяці тому +32

      Skill issue lol

    • @ba8e
      @ba8e 3 місяці тому +3

      React is PURE GARBAGE. Long live Svelte.

    • @UsernameUsername0000
      @UsernameUsername0000 3 місяці тому +9

      @@ba8e ok cultist

    • @ba8e
      @ba8e 3 місяці тому +5

      @@UsernameUsername0000 I'd say React people are cultists because they can't leave that piece of shit framework.

  • @elitegaming8565
    @elitegaming8565 3 місяці тому

    Lol First to see

  • @ukaszjonasiak382
    @ukaszjonasiak382 2 місяці тому

    I swear React is the laziest, most brainless implemented framework ever.

  • @uttamsharma3242
    @uttamsharma3242 3 місяці тому

    13th comment...

  • @thepetesmith
    @thepetesmith 2 місяці тому

    Can we make a federal ban on just adding “honestly” for no reason please.

  • @basilsatti2828
    @basilsatti2828 3 місяці тому

    first after firsts lol

  • @arunkaiser
    @arunkaiser 3 місяці тому +1

    First comment

  • @swojnowski453
    @swojnowski453 3 місяці тому

    Do not tell people what to do, you do not know what their circumstances and goals are!

    • @dirknash4113
      @dirknash4113 3 місяці тому +9

      dont come to see his videos then

    • @ThotsAndPrayers
      @ThotsAndPrayers 3 місяці тому

      He didn’t tell anyone what to do, he’s just showcasing a new feature. Tf are u on about?

    • @fabianramirez3222
      @fabianramirez3222 2 місяці тому

      I introduce you to a new concept: ignore them.

    • @blossomcherrypink
      @blossomcherrypink 2 місяці тому

      But you are telling him what to do

  • @CriminalClinton
    @CriminalClinton 2 місяці тому

    Or you can stop coding in React and use an Adult framework 😂

  • @suball
    @suball 2 місяці тому

    Thats no working on socket io connection