DO NOT Use Hooks in Next.js?? | Josh Reacts

okay I hate to break it to you react has been canceled it really happened some guy just went out there and said hey guys take all the knowledge from react you've gotten over the past 10 years with you state use effect and all the hooks you know and put him into the trash can well at least that's what this article right here States it has surfaced on Reddit and it's gotten a bunch of controversy because the claim it makes is pretty outrageous those you stayed use effect and other hooks we're used to are client stuff we must get rid of that way of thinking completely to build a nexjs application of course it got people wondering why shouldn't I use you state or use effect in nexjs now is it like forbidden can we not do it anymore well that's what the article kind of suggests at least but it's two parts the first one is that hooks like you state and use effect are client-side and there's nothing debatable there that's just how react works but the interesting part is the second one we must get rid of this way of thinking referring to use date and use effect and all the the client-side stuff to build an extra s13 applications and here's my take as someone who's worked with an extra s13 since the day it came out daily and to be fair this article kind of has a point the first negative of the client-side architecture that's not there in next year s13 is that all codes on the client has to be downloaded eventually now you can code split but other than that all code has to be downloaded eventually and as your app grows so does the code that needs to be downloaded on the client and that's not ideal especially on slow devices like mobile phones which a lot of people use to browse your website and it gets even worse when you factor in that all the compute responsibility is now on the client device which might be really good it might be some NASA PC with 10 CPU cores that is insanely fast at everything but just as well it could be some random dude with this old Nokia 2005 mobile phone trying to run your Advanced animations and it just sucks where your code runs whether it's a good device or bad one is extremely unpredictable you don't know and mostly it's probably not going to be the good devices and here's where the solution of the article comes in take the client side throw it into the trash and move to the server and the server meaning reacts over components what I assume this article means do one big thing for you and that is the fetches for your data happen on the server and not on the client that means they happen closer to the data source and you can control where exactly they happen not only that but all the dependencies that you import from npm packages are resolved purely on the server they never meet the client they are only on the server they're not being shipped to the client thereby reducing the JavaScript bundle size of the client the bottom line is your website is going to be faster you send less stuff over for the 2005 Nokia phone to handle because only the HTML the outputs of your react server components is sent over and that's it and that sounds pretty good actually so is the article right take all the client-side stuff we know from react throw it in the trash and only do server-side stuff in nexjs13 the thing is the server or react server components have their very own downsides I've spoken about that a ton on this channel namely caching it's absolutely horrible and while the Versa team is working on that it's still a big issue and you know what the solution to that horrible problem purely on the server is well it's moving to the client I've done just that in the SAS I'm building and honestly I'm super happy with going back from the server components to the client components there are even some cases that server components can't handle imagine you're polling your server for some data right you send a request every two seconds to get some data for a real-time dashboard for example how are you gonna do that with server components where you can only render interaction-less stuff another big one loading States yes you can do them server side there are some loading.tsx files that are in abstraction to react suspense so it may makes it pretty easy for you to handle loading states with server components but you know what's way more fun and way more enjoyable to handle loading States in God damn right it's client components and not only can you not use server components for those cases but also sometimes you need interactivity and there is no way literally around using things like use effect and use State and trying to do that on the server literally won't work it suggests there's something inherently wrong with the old way of writing react which was purely client-side and to be frank that's just not the case it's a different Paradigm we're getting used to and server components can be useful for fetching just simple data passing it in to decline components but beyond that I prefer client components and that's not even mentioning that some super good libraries like react query or trpc that give you type safety across front and back and which is insanely useful and saves you so much time are meant for client-side use so if you just took this advice device from the article moved everything to the server you'd give yourself a pretty hard time man let me know what your thoughts are I'd love to hear that I really enjoy from my part going back from server components to client components and only relying on server components for some very simple data fetching logic let me know in the comments down below that's it for me for this video I'll see in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 21,319

Keywords: react hooks, usestate, useffect, nextjs, client component, server component, rsc, react server component, nextjs rsc, nextjs server component, nextjs hooks, josh tried coding, joshtriedcoding

Id: pCwHF1H4OOU

Length: 5min 21sec (321 seconds)

Published: Sun Sep 03 2023