Пікірлер

• 
  @wlockuz44678 сағат бұрын

  React is basically led by Vercel at this point.

• 
  @sharevari10 сағат бұрын

  Great video, thank you! Just have one question: What about <style> sections within Svelte components? Do they just work or do they need special handling? You jump to straight to Tailwind when starting to talk about CSS, so this point wasn't entirely clear to me.

• 
  @nickwoodward81913 сағат бұрын

  not sure if it's easy or not to add a note to a video, but @13:04 needs JS disabled. confused me for a sec :)

• 
  @dominuskelvin15 сағат бұрын

  I was wondering what all the fuss is all about regarding Suspense. Thanks Jack(In Captain Barbosa's voice)

• 
  @pierluigiomargiancola738815 сағат бұрын

  Just thank you a lot 😊

• 
  @nickwoodward81916 сағат бұрын

  sorry jack, another question if you don't mind! @10:55, why does calling formRef.current.submit() now prevent the action from submitting (say when validation fails) when it didn't when JS was disabled?

• 
  @nickwoodward81915 сағат бұрын

  ah, the second callback to handleSubmit is the error function, which does nothing

• 
  @peterszarvas9417 сағат бұрын

  react just gets more and more confusing and bloated every year

• 
  @samuelumoh664619 сағат бұрын

  How much is the course going to be?

• 
  @CyberSpace.globalКүн бұрын

  Nothing could beat bootstrap

• 
  @moritzschuesslerКүн бұрын

  Honestly i dont really get why i gets so much pushback. For me the new behaviour seems way better on the first look. Before it was unclear what will happen. Know the dev is responsible for the behaviour and it isnt "magic" stuff happening

• 
  @mikekidderКүн бұрын

  Keep us in the weeds Jack. This is great stuff. Looks like I'll be getting into React development more, and these videos are really helpful and concise.

• 
  @nickwoodward819Күн бұрын

  so wait, do I need to upgrade to react 19 if I'm using nextjs app router, or nah?

• 
  @jherr23 сағат бұрын

  You've been on React 19 the entire time if you've been on the App Router. 🤯

• 
  @nickwoodward81918 сағат бұрын

  @@jherr weird! my package.json say 18.3? 🧐

• 
  @nickwoodward81917 сағат бұрын

  are we counting from zero? what am I doing wrong? 😂

• 
  @jherr14 сағат бұрын

  @@nickwoodward819 Next is weird. It actually has it's own copy of the React canary built in that it uses for the App Router. 18.3 is there for Pages router compatibility.

• 
  @nickwoodward81914 сағат бұрын

  @@jherr Interest to know! I was kinda hoping that would explain the error I'm getting when adding back in the rhf handleSubmit function back into the mix Error: Invalid hook call (pointing at null useRef<HTMLFormElement(null)>) Hooks can only be called inside of the body of a function component. Reason 3 is "you might have more than one copy of React in the same app" :D

• 
  @axios7776Күн бұрын

  Why do you use memorize and not useMemo?

• 
  @jherr23 сағат бұрын

  useMemo is a one level caching hook. memo marks components as memoizable. So neither of those does what this memoizing function does. The memoizing function is used to avoid some issues with referential identity of the promises.

• 
  @dakheera47Күн бұрын

  Hiya. im curious as to why you mention that nextjs servers shouldn't talk back to themselves. from what i understand, something on the frontend using next should be able to talk to an api route defined in the same project. isn't that the whole point of having api routes? the bit i'm referring to is here: 11:50

• 
  @jherr23 сағат бұрын

  Yeah, I'm talking specifically about RSCs on the server talking back to itself. The client hitting the API endpoint is totally fine. RSCs on the server fetching back to the API routes is just time wasted for no gain. In addition there is the added complexity of requiring an absolute URL in the fetch which means that the server code needs to know where it's deployed so it knows whether to hit development or production endpoints. What's better is simply to call the same function in the RSC that the API uses when it handles the GET request.

• 
  @dakheera4718 сағат бұрын

  @@jherr ok, yea. That makes a lot more sense. If we're on the server anyway, why not just call the function instead of going through an api route. Thanks very much for your videos, I've learnt lot, and you're the only one doing it in such a no bullshit way. I love it

• 
  @roberthaforsson9687Күн бұрын

  Thanks! I love your videos

• 
  @jherrКүн бұрын

  Thank you so much!

• 
  @Wentris71Күн бұрын

  Too obvious)

• 
  @a2dehКүн бұрын

  Holy shit, I needed this video! Thank you for that. I had no idea how simple it was. But to see and explain the simplicity, an expert like you needed to understand both complex systems extremely well. You've saved me weeks of frustration, and now I can get on to the fun stuff! And now I'm subscribed and watching your other videos. By the way, I worked on OpenLaszlo, an open source alternative (and predecessor) to Flex, which had reactive constraints, and also supports what Oliver Steele calls "Instance First Development". Search for that term on Hacker News, I've posted about it there. (KZread seems to hate comments with links and censor them.)

• 
  @a2dehКүн бұрын

  Wow that is totally and obviously a fake ChatGPT response @7:25. It would NEVER misspell "their" like "thier", and it would never have such a snarky dismissive judgemental tone about people. And it wouldn't make an absolute statement about the contents of "any software that I've been trained on" because it simply doesn't work that way, it doesn't specifically remember everything it was trained on, it's just a statistical overall summary. That's just weird that he would fake a ChatGPT response, which even it it weren't fake isn't a particularly compelling argument anyway. Who does he think he's fooling? Extremely bad look. You totally busted him.

• 
  @ksenokratis2 күн бұрын

  Very clean and helpful. One question, I am fetching data (list of objects) from an RSC and feeding them to my client components to render them at a table. So let's say I append an object to my data with a Post request, how should I get the updated data that I initially got from my RSC? Thank you 🙏

• 
  @jherr2 күн бұрын

  If you made a mutation then you revalidate the path and that will update client.

• 
  @ksenokratis2 күн бұрын

  @@jherr With the native fetch that has been altered from next.js right?

• 
  @jherr2 күн бұрын

  @@ksenokratis Perhaps I'm not following, but if you make a mutation on the server with a server action, then in that server action you can revalidatePath or revalidateTag and that will tell the NextJS route cache on the client to refetch the data from the server and then update the DOM in place. Or you could do this yourself with client fetchs, API routes and useState or React Query. Up to you.

• 
  @ksenokratis2 күн бұрын

  @@jherr Ok, got it, so the mutation should be a server action so that it can revalidate tag or path as you said. But how can it work with client side with the client side fetched payload after the mutation? Is there a clever way to do optimistic mutation with server actions? Thank you very much for your answers, really appreciate it!

• 
  @jherr2 күн бұрын

  ​ @ksenokratis I think you should experiment with this stuff because if you're using RSCs, actions and revalidation correctly you don't need to use client fetching.

• 
  @javierperezmarin60392 күн бұрын

  I understand that if you have a heavy sibling component it will slow your fallback from rendering. So I think both behaviors should be suported, what do you think about a prop in Supsense conponent like <Suspense behavior="shallow-render / deep-render" > Of they release this it wil be a mess for every user that uses suspense and does not prefecth or hoist, i love the magic of not giving a shit what is bellow suspense and it will trigger in parallel al the request. Why not have both aproaches!!

• 
  @lucasgiunta88742 күн бұрын

  How those feature will be apply in a project using react router v7, with the loader function, defer etc. I totaly remove the use query dependency sins this implementation has I dont have any call api from component outside of the loader function.

• 
  @jherr2 күн бұрын

  I can't speak to RR7, only Ryan and the Remix team can do that since it's not released and still in development. According to their blog it will be a singificant change as RSC represents a massive architectural shift. So it's difficult to say how it will end up. What I can say is that a "loader" approach general simplifies matters in that the loader needs to completely resolve before the page is rendered. It's simpler, but slower, because it's fetch then render, as opposed to fetch as you render, with this model.

• 
  @lucasgiunta8874Күн бұрын

  @jherr the loader approche can be implement now with the v6, and we can defer the promise if needed, for this case this suspense change could impact (or not?) The app.

• 
  @jherrКүн бұрын

  @@lucasgiunta8874 Dunno. If it involves Suspenses and those suspense run on the client, then yes, React 19 might impact that, if the current changes hold. But it looks like they won't. Or at least that there will be the ability to get the current behavior as well as the new more efficient (but with side-effects) behavior.

• 
  @dominikkarbowski60272 күн бұрын

  I'm waiting for your Next.js course

• 
  @PulkitRangwani2 күн бұрын

  Why restarting remote is required everytime? any solution around it for smooth development?

• 
  @jherr2 күн бұрын

  It was pretty early days for that plugin. It might have improved since then.

• 
  @PulkitRangwaniКүн бұрын

  @@jherr I tried, but even now, it expects restart every time :(

• 
  @hrithikvishwakarma0012 күн бұрын

  Please tell me your theme name, I want it ❤

• 
  @jherr2 күн бұрын

  Night Wolf [black]. Details are always in the description.

• 
  @petar5672 күн бұрын

  I'm currently testing the "simple-18" example in React 18, where I've added an ErrorBoundary to handle promise rejections and display a fallback UI. However, I noticed that wrapPromise also throws something (not necessarily an error) when the promise is pending. Despite this, the ErrorBoundary doesn't seem to trigger. Why doesn't the ErrorBoundary trigger when wrapPromise throws the suspender (a pending promise)? Furthermore, How does React differentiate between the throw from wrapPromise used for suspending and the throw that should trigger the ErrorBoundary?

• 
  @jherr2 күн бұрын

  When a promise is pending the component should throw back a wrapper promise that React will put a then on to listen for when the promise resolves (otherwise how would it know the components promise is ready to go without polling). In the case of an error it throws the error, which is easy to distinguish.

• 
  @petar5672 күн бұрын

  @@jherr Thank you for the explanation!

• 
  @jherr2 күн бұрын

  No problem. I didn't really want to go into that in the video since it really doesn't matter anymore because of the `use` hook and I'd already spent too much time on React 18.

• 
  @example20612 күн бұрын

  React with every update becomes worse and worse 😢

• 
  @dmitryromanovich40092 күн бұрын

  Guys, is it some sort of masochism? I dropped react like 2 years ago, and you still discussing suspense lol. Try Vue, it's better at everything.

• 
  @divyv202 күн бұрын

  Hey Jack , very good video . I can do better editing in your videos which can help you to get more engagement in your videos . Pls lmk what do you think ?

• 
  @jherr2 күн бұрын

  I think I've been offered this many many times before and the editors rarely understand the topics I cover or offer real suggestions in how to make a video that is more educationally valuable, which is what I care about. I don't think little text pops, push zooms and sound effects engage someone who is serious about learning something. In fact, I think just the opposite, they are a distraction. If I wanted text pops and grainy film transitions I could have them easily. I just don't add them because I don't think it adds anything to the video. If you believe you have serious and constructive suggestions on how to make my videos educationally better and not just into social media clickbait, feel free to DM me.

• 
  @TkDodo2 күн бұрын

  Great Video Jack 👏

• 
  @VikasTalksTech2 күн бұрын

  where can i know more the control flow in js

• 
  @rumble19253 күн бұрын

  This isn't elegant at all. It seems the React team can't write anything that doesn't expose library internals that requires very specific detailed knowledge of the library. They could have created a good abstraction around this and a way for components to register its usage. Now it's just some loose syntax that will be horribly used in a tree of spaghetti components no one understands.

• 
  @semyaza5558 сағат бұрын

  Just use Vue or Svetle. I only use React when paid.

• 
  @babyboie203 күн бұрын

  with the prefetch doesn't that rely on everyone on the team understanding react enough to know why there seems to be and empty call in the top level component and then a call again in the actual components where the data is used? I think without documentation after a few months of not touching this code the reason would be forgotten and someone might remove the hoisted call in a refactor without thinking about it. thoughts?

• 
  @jherr3 күн бұрын

  If I were to do it right what I'd probably do is expose a function from any component that needs a prefetch and so you'd have `MySubComponent.prefetch();` in any page component that uses that component. That kind of thing. You could go so far as `[Component1, Component2, Component3].forEach(c => c.prefetch());` if you had a bunch of components.

• 
  @babyboie203 күн бұрын

  @@jherr ok good point. I see what you're saying, it just need more than just a simple implementation. Designing it might take a bit more time but could eliminate the need to think about it or make it explicit that you need it to think about it and understand the why behind the concept. 👍🏾

• 
  @jherr3 күн бұрын

  @@babyboie20 Lemme know where you get to with it. I'd love to see something like this IRL. I just don't have the time to pull it off. But feel free to run an initial implementation concept by me.

• 
  @ByteBound3 күн бұрын

  Thank you for explaining this 🙏

• 
  @srymisclick3 күн бұрын

  I'm confused here - why go so far with custom memo and "use" instead of making the component async and just awaiting the promise in the component?

• 
  @jherr3 күн бұрын

  These aren't RSCs. This is a Vite app.

• 
  @tomm57652 күн бұрын

  memo is not necessary with use hook

• 
  @srymisclickКүн бұрын

  @@jherr ah, makes sense. Got too used to one pattern, I guess!

• 
  @Quxer07213 күн бұрын

  This was insteresting video. I have few apps in React at work, but I don't think we are using versions higher than 16 (maybe 18 for new app which we are rewriting from old .net MVC), so we aren't touched by this, but it seems like big change. For me first thought would be to suspense works like in version 18 - execute all children at once and wait for all of them to display. But someone in the coments points out a thing about errors, so when first child got error, why we need to get second one. On the other hand, getting all children synchronically is counterintuitive. On another hand nesting children inside children, all with data fetching sounds horrible also. To all of methods presented in the video I really didn't like prefetching. Without proper setup you could skip caching and just spam your api loosing performance on both ends. The best and easy to understand for me is hoisting. But I don't practice a lot of nesting. I think about a page, which is composed with multiple smaller components. Page is a container with data and layout and all children just need a data to display. I know this is just simplification, but most of real life examples can be done this way. With that whole page could be in suspense or each child individually. At the end I want to tell you Jack, that I really like your style, which is easy to follow and understand. I hope for more content with SolidJs, Qwik, Svelte. Did you tried HTMX 2.0? I'm wondering if performance changed much and how much size changed.

• 
  @luka17903 күн бұрын

  This is how tech youtube should be! Straight to the point, clear explanation, actually useful in production and neutral (no drama). I like the prefetching with cache the most. The dx is good imo. Would be interesting to have a deep dive into how this actually works. Passing a promise from the server to the client feels like magic to me.

• 
  @MrZiyak993 күн бұрын

  so i assume use hook would be only for client components. the parent would be a server component that prefetches all the data. since it will be wrapped in cache, these promises can now be resolved in any of the children. in the client components with the use hook and in other server components with await?

• 
  @jherr3 күн бұрын

  Correcto.

• 
  @funkjoker7 сағат бұрын

  Excuse me. Where can I read about shared cache between client and server. Is this kinda RQ prefetch and hydration? Or as in the beginning like initial Redux state through window host object?

• 
  @shyandeabreu36423 күн бұрын

  I think the react team should allow both the waterfall and parallel modes for suspense Generating promises at the parent level and injecting them kinda breaks the Single responsibility principle that I have been following to create my components Prefetching is also a no no for me, as the lazy loaded component may be conditionally rendered. I wouldn't want to touch React 19 if they don't allow best of both worlds, i.e. parallel and waterfall suspense loading

• 
  @Spiun6662 күн бұрын

  Internally, they're using Relay, which is why they can do this and still keep SRP.

• 
  @rafaelarantes48042 күн бұрын

  Exactly what I thought when I saw this. Components should be self-contained, if it has a need for data, it should fetch it itself.

• 
  @andrzejbogdo95273 күн бұрын

  May I ask when do you plan to release your Next.js course?

• 
  @jherr3 күн бұрын

  Hopefully late this month or early next month. We are finalizing it right now.

• 
  @andrzejbogdo95272 күн бұрын

  @@jherr Is there going to be a material for senior developers to include some of this knowledge to enterprise-level production apps or is it more suited for beginners?

• 
  @jherr2 күн бұрын

  @@andrzejbogdo9527 It's mostly enterprise grade content. That's what I'm most familiar with, so that's what the course is mostly about.

• 
  @andrzejbogdo95272 күн бұрын

  @@jherr I can already tell you this course will be very popular within dev community in Poland, so prepare for purchases from us :D

• 
  @user-ik7rp8qz5g3 күн бұрын

  ... to separate fetching from rendering. But made them coupled even more tightly instead

• 
  @StingSting8443 күн бұрын

  Thanks papa Jack

• 
  @StingSting8443 күн бұрын

  Hoisting is not an easy thing to in any large applications. We have microfrontends that get rendered in suspense boundaries and make tons of calls. This is a disaster for us. Lucky that tkdodo found this out during testing.

• 
  @jherr3 күн бұрын

  TBH, I think what really needs to happen is some method for registering up front what MFEs are on the page and getting their initial requests. That's outside of the scope of React. On top of that the ideal result would be for all the requests to work on a common backplane (e.g. Relay) for request optimization. Robert Balicki is working on part of this problem with his unreleased isograph. But I'm not sure how it's going to work with runtime dependencies, or data driven creation of MFEs.

• 
  @kalyan_borah3 күн бұрын

  Does this affects current next js version ??

• 
  @jherr3 күн бұрын

  This doesn't effect RSCs, but it does impact client components.

• 
  @sahajranipa3 күн бұрын

  Phd level video i had to watch this twice plz make detailed videos about such topics. I would watch those with some popcorns and coke.😅😅😅

• 
  @neociber243 күн бұрын

  I think I know undestand the React team. I never used more than 1 children in a Suspense because I though passing more than 1 will block the rendering of the other because we are throwing an error, it's like trying to execute code right after throwing an error it makes no sense.

• 
  @null_spacex3 күн бұрын

  I never even considered passing more that one child.

• 
  @moritzschuesslerКүн бұрын

  Exactly. That kinda destroys the point of suspense. Why start rendering stuff if a ton of async stuff must resolve at the same time

• 
  @chrisdaman41793 күн бұрын

  I would really love to see focus on how react is actually used in industry. Most of these blog style apps aren't money generators or realistic. You also dont make shooping carts in react, because most of those are off the shelf for regulatory ease. You dont need a meta framework to write the realtime dashboards react is used for, but no one ever covers that tech, and as a result, react is getting worse and worse.

• 
  @MrEnsiferum773 күн бұрын

  Terrible and bloated

• 
  @abe_the_magnificent6 сағат бұрын

  I strongly agree with this. It seems the React team is taking direction from all the wrong places. Vercel, reaction channels, and beginner devs/noobies. The framework is being tuned for blog sites, landing pages, and everything else a typical SPA developer does not work on.

• 
  @MrNovado3 күн бұрын

  Baffling how "moving to cloud" motion basically murdered tools like redux which barely got to the point of solving this precise issue after years of r&d and multilingual effort. And now MPAs have nothing comprehensive enough (besides, maybe, xState) to properly handle effect chains. Way to go.

• 
  @tomm57652 күн бұрын

  Now you have loaders in your meta framework. And if your not using one then can still use Redux, Zustand, etc any state management that supports effects? I'm confused by your comment, what exactly do you wish happened?

• 
  @MrNovado2 күн бұрын

  @@tomm5765 You can reliably use them on client, but not on server though. And there's no solution that can cover both. I want a tool and a methodology to cover complex state/effect interactions both on server and client in a unifying way. Basically what next-redux-wrapper aspired to do, but couldn't handle unfortunately. Currently it feels like "cloud" ditched the baby with the water when it comes to MVU/S tooling and state/effect management in general. It's like we are learning to do it from the very beginning all over again. Which is why the issue shown in the video is baffling. Complex SPAs already have a variety of tools to handle issues like that. MPAs, in comparison, have almost nothing. Hope that answers your question, have a nice day.

• 
  @tomm57652 күн бұрын

  @@MrNovado thanks for explaining. That's interesting you got me thinking.

• 
  @prashlovessamosa3 күн бұрын

  Jack your explanations are top notch.

• 
  @jherr3 күн бұрын

  Thanks. (But it's Jack.)

• 
  @prashlovessamosa3 күн бұрын

  @@jherr sorry my stupid keyboard

• 
  @jherr3 күн бұрын

  @@prashlovessamosa Hahaha, no worries. Jerry was a first for me. I've got all kinds of other misnamings though. It's no big deal.

• 
  @ReeteshKumar-rq1dp3 күн бұрын

  Thats why world bet on React. There is no second best.

• 
  @danko95bgd3 күн бұрын

  because its a trash tool that changes every day for the last decade and hasn't gotten any better since class days?

• 
  @null_spacex3 күн бұрын

  @@danko95bgdjust use something else

• 
  @rand0mtv6603 күн бұрын

  @@danko95bgd how is it changing every day? Last big release was about Hooks and that was more than 5 years ago. Please be objective when criticising stuff.

• 
  @ReeteshKumar-rq1dp2 күн бұрын

  @@danko95bgd say you know nothing without saying i know nothing.

• 
  @danko95bgd2 күн бұрын

  @@ReeteshKumar-rq1dp you are one of those guys that can't make a website without react or nextjs. literally every framework is better internally than react.

• 
  @AutisticThinker3 күн бұрын

  Good stuff! Thanks :)