Code Ryan
Code Ryan
  • 1 447
  • 953 223
React State Updates Explained: Why Is Your State Wrong?
What does it mean for React to "batch" state updates? Why does it matter?
Переглядів: 21

Відео

Master 3 Essential Next.js Concepts in 4 Minutes!
Переглядів 3859 годин тому
Today, you'll gain a high level understanding of 3 core Next.js concepts in just a few minutes. I cover file based routing, server/client components, and server actions.
A Commonly Misunderstood React Concept
Переглядів 65116 годин тому
Today, I do my best to clearly explain how snapshots work in React and why they're important to understand.
Many React Developers Don't Understand This
Переглядів 2 тис.День тому
Today, I'm going to fully explain the rendering, re-rendering, and committing phases in React.js
This Can Be A Problem In Next.js
Переглядів 2 тис.14 днів тому
This Can Be A Problem In Next.js
The Next.js Mistake That Breaks Your Data
Переглядів 52614 днів тому
The Next.js Mistake That Breaks Your Data
The Complete Guide To Mastering React State
Переглядів 27421 день тому
The Complete Guide To Mastering React State
Master React: Essential Event Handling Techniques
Переглядів 46021 день тому
Master React: Essential Event Handling Techniques
EASY UX Upgrade: Snap Scrolling with Next.js & Tailwind
Переглядів 59128 днів тому
EASY UX Upgrade: Snap Scrolling with Next.js & Tailwind
Avoid This Common React Mistake Newbies Make
Переглядів 1 тис.Місяць тому
Avoid This Common React Mistake Newbies Make
The Surprising Key to Overcoming Coding Blocks
Переглядів 120Місяць тому
The Surprising Key to Overcoming Coding Blocks
THIS Is The HARDEST Part Of Software Engineering
Переглядів 811Місяць тому
THIS Is The HARDEST Part Of Software Engineering
React State Explained: The Key to Dynamic Apps (Beginner's Guide)
Переглядів 149Місяць тому
React State Explained: The Key to Dynamic Apps (Beginner's Guide)
5 Things I Love About Being a Software Engineer (And You Will Too)
Переглядів 173Місяць тому
5 Things I Love About Being a Software Engineer (And You Will Too)
Unlock React's Power: Understand Your UI as a Tree Structure
Переглядів 231Місяць тому
Unlock React's Power: Understand Your UI as a Tree Structure
5 Things I HATE About Being A Software Engineer
Переглядів 128Місяць тому
5 Things I HATE About Being A Software Engineer
What is React.js, really? Complete Guide For Beginners and Pros
Переглядів 241Місяць тому
What is React.js, really? Complete Guide For Beginners and Pros
Build a CLEAN Dropdown List in Next.js with Tailwind CSS
Переглядів 323Місяць тому
Build a CLEAN Dropdown List in Next.js with Tailwind CSS
Master React.js Lists: Easy Rendering Techniques Explained!
Переглядів 2422 місяці тому
Master React.js Lists: Easy Rendering Techniques Explained!
Next.js Pitfalls: Avoiding Unsupported Client and Server Patterns
Переглядів 2742 місяці тому
Next.js Pitfalls: Avoiding Unsupported Client and Server Patterns
How to Use Conditional Rendering in React.js Like a Pro
Переглядів 6562 місяці тому
How to Use Conditional Rendering in React.js Like a Pro
Boost Your Next.js Skills: Learn useParams for Dynamic Routes
Переглядів 2862 місяці тому
Boost Your Next.js Skills: Learn useParams for Dynamic Routes
Master React Props: The Ultimate Guide In 2024
Переглядів 5132 місяці тому
Master React Props: The Ultimate Guide In 2024
How React.js Components Work: A Step-by-Step Guide
Переглядів 6192 місяці тому
How React.js Components Work: A Step-by-Step Guide
Next.js Redirects 101: Simplify Your Routing Like a Pro!
Переглядів 9462 місяці тому
Next.js Redirects 101: Simplify Your Routing Like a Pro!
A Crucial Lesson Every Software Engineer Should Know
Переглядів 3,6 тис.2 місяці тому
A Crucial Lesson Every Software Engineer Should Know
Build a Dynamic Sidebar in React.js with Tailwind CSS & Next.js!
Переглядів 1,9 тис.2 місяці тому
Build a Dynamic Sidebar in React.js with Tailwind CSS & Next.js!
Pro Software Engineers Know These 10 Command Line Tips
Переглядів 9113 місяці тому
Pro Software Engineers Know These 10 Command Line Tips
Next.js Streaming: Deliver Better User Experiences
Переглядів 1,4 тис.3 місяці тому
Next.js Streaming: Deliver Better User Experiences
Create A MODERN Full Stack Chat App In 2024
Переглядів 8693 місяці тому
Create A MODERN Full Stack Chat App In 2024

КОМЕНТАРІ

  • @geliete2252
    @geliete2252 31 хвилина тому

    Yes

  • @wiazowski1
    @wiazowski1 День тому

    Do you have any course with projects?

  • @lolloBriggi
    @lolloBriggi 3 дні тому

    Its just a function that get call before the request is completed no different that making a print() between two instruction so we call say that print() is the middleware i dont know why fucking programmers needs to make their life so complicated with weird terminology and useless concepts where at the end it all easy and superficial unless you enter the mathematical domain of cs.

  • @RAHUL-w8k8y
    @RAHUL-w8k8y 3 дні тому

    Hey can you suggest anything how to properly understand states in reactjs i have exlerience with reactjs but i still make silly mistake while using states

    • @coderyan
      @coderyan 3 дні тому

      Hey, I have several videos on React state! Is there anything in particular that you have a question about?

    • @RAHUL-w8k8y
      @RAHUL-w8k8y 3 дні тому

      @@coderyan not particular but I have difficulty using them , and your nextjs Playlist is best it help me understand nextsj better and faster

    • @coderyan
      @coderyan 2 дні тому

      I’m happy it’s helping you out!

  • @lakshyakumar2085
    @lakshyakumar2085 5 днів тому

    It’s not a react concept, this is a closure behaviour

  • @PauloSD
    @PauloSD 5 днів тому

    npx prisma db push isnt working Error: P1001: Can't reach database server ...

  • @ryannguyen3732
    @ryannguyen3732 5 днів тому

    Is it safe to have NEXT_PUBLIC_[...] for each of the environment variables? This exposes them to the client right which is unsafe?

  • @rithikguleria8278
    @rithikguleria8278 6 днів тому

    Wonderful🤍

  • @davidallred991
    @davidallred991 6 днів тому

    Caching is my only major complaint I currenlty have with Nextjs. (looks like might be fixed for Next.js 15), My current issue is actually getingt fresh data from the api call, I finally got it to work, but it is in a janky way of combining every possible no caching option on. If i remove any one of them it doesn't work, which is really strange as any of the options i am using should stop the caching.

  • @AA-du6hb
    @AA-du6hb 6 днів тому

    The slow and step by step narrative is really helpful. very easy to understand.

    • @coderyan
      @coderyan 6 днів тому

      That’s great to hear

  • @AA-du6hb
    @AA-du6hb 6 днів тому

    Hi. Thank you. gives me a better insight of what i am doing. when is the next video coming.

    • @coderyan
      @coderyan 6 днів тому

      Happy it helped! Thursday!

  • @sametakofficial
    @sametakofficial 6 днів тому

    cant we import sc inside cc with children prop?

  • @PersonaCalculator
    @PersonaCalculator 8 днів тому

    😢

  • @MrBonbatong
    @MrBonbatong 8 днів тому

    I'm a beginner and I thank you for making this rendering concept more understandable. It's well explained.

    • @coderyan
      @coderyan 8 днів тому

      Happy it helped!

  • @JohnLinCN
    @JohnLinCN 9 днів тому

    Apart from useState, useReducer's dispatch function also cause a rerender

    • @adnansamol8464
      @adnansamol8464 8 днів тому

      Yes because useReducer is also used to manage complex states

  • @Q-Productions23
    @Q-Productions23 10 днів тому

    Wonderful!! Keep the videos coming :)

  • @Jaycoda10
    @Jaycoda10 11 днів тому

    another golden nugget, thanks for clarifying this I love the examples you provide

    • @coderyan
      @coderyan 11 днів тому

      Happy to hear it!

  • @misterbean6674
    @misterbean6674 11 днів тому

    Do we need to use rls?

  • @DatNguyen-wb8jr
    @DatNguyen-wb8jr 11 днів тому

    tks

  • @martoo_
    @martoo_ 11 днів тому

    I don't think it's a problem. You can make all components client side and still use the routing system, middleware, etc. You are just missing SSR witch isn't neccessary to build great app.

  • @xrexy
    @xrexy 11 днів тому

    Nextjs has introduced just problems ever since vercel bought it ngl

  • @rgagankumar5191
    @rgagankumar5191 11 днів тому

    Good tutorial Ryan. Lets saw I want to use tanstack query for data fetching and showing loading, error, caching etc. What would be the best practice to do. Assuming I have an external API from which I want to fetch data.

    • @coderyan
      @coderyan 11 днів тому

      Thank you! I’d have to try it out and see, but my initial thought would be to fetch the data from server components and potentially use something like suspense. But without diving into the code and trying it out, I can’t provide the exact best practice for you

  • @dytra_io
    @dytra_io 12 днів тому

    what about if I wanna use that state to another component?

    • @coderyan
      @coderyan 11 днів тому

      It depends a bit on where that other component is in your component tree. You could pass the state down as a prop, as you don’t always need to have client components without any children. Just trying to keep them a little further down the tree is probably a decent rule of thumb

  • @Aivirx
    @Aivirx 12 днів тому

    any OAuth tutorials with this?

  • @Jaycoda10
    @Jaycoda10 12 днів тому

    love these quick little refresher videos :-)

    • @coderyan
      @coderyan 12 днів тому

      Happy to hear it!

  • @rizzling-g1j
    @rizzling-g1j 13 днів тому

    cool video, but the title is a bit confusing xD it implicits a next.js problem, but this is more a common mistake made from newbies using next.js :D

    • @coderyan
      @coderyan 13 днів тому

      Very fair comment. I’ll update the title as well as the thumbnail to avoid any further confusion here

    • @rizzling-g1j
      @rizzling-g1j 12 днів тому

      @@coderyan but you can leave it as it is as well, I think the average viewer has not the experience to differ that nuance :D and it wasn't meant to be negative anyway

    • @coderyan
      @coderyan 12 днів тому

      @rizzling-g1j well either way, I appreciate your kind feedback. Thanks!

    • @rizzling-g1j
      @rizzling-g1j 12 днів тому

      @@coderyan in case you need a video idea: page transition issues with framer motion (especially AnimatePresence)....it is not possible to use a template file. this problem already exists for years. vercel published a fix when using page router which can be used, but nothing for app router. maybe you are familiar with he issue, but to give a short description: on page transition with template.js/jsx (or on ts/tsx) the complete rendered content gets dropped, that means that any exit animations from framer motion wont work. there are couple of work arounds out there, but not a single youtube tutrial on that problem and how to solve it :P may approach is always a custom PageTransitionWrapper which I use inside the layout file. there was only one youtube tutorial how to make a custom wrapper butto which uses router.push. but that does not work in many cases.

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 13 днів тому

    thank you for letting me understand parallel data fetching

    • @coderyan
      @coderyan 13 днів тому

      You’re welcome

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 13 днів тому

    Thank you so much

    • @coderyan
      @coderyan 13 днів тому

      You’re welcome

  • @johnwill4560
    @johnwill4560 13 днів тому

    I'm a beginner on this and when prioritizing server components with client as leaf should we also prioritize data fetching and other http requests primary on server/client or doesn't matter?

    • @coderyan
      @coderyan 13 днів тому

      I prefer to fetch data in server components. It prevents you from needing to use the useEffect and it can allow some other things to be easier. But sometimes you may still need to use client components but my default is fetching in server components

    • @rizzling-g1j
      @rizzling-g1j 12 днів тому

      @@coderyan agree. one of the biggest advantages of next.js is the SSR and furthermore since the app router integration in next13 enabling server actions. that means you want everything rendered/processed on the server (if possible). one major field where use client comes into play is when handling sensitive data which should ONLY be rendered on the client side, eg blockchain/dlt apps (web3 etc). and the second field is for perfomance reasons, eg if the usage exceeds the server capacities it can be a solution to pass http fetches to the client side (but this is not a long term soltion)

  • @lolhp._.
    @lolhp._. 13 днів тому

    Note: you dont have to turn it into a use client component. Or go to another file. You can add a component directly in that file that uses events and react hooks. Without having to switch the component to client nor add another file

    • @rizzling-g1j
      @rizzling-g1j 13 днів тому

      hooks like useEffect, useState, useRef etc can not be used in server components. whatever you are talking about this is the most common approach, another possibilty is to use form and formaction/states eg with zod if you want to avoid client side rendering

    • @lolhp._.
      @lolhp._. 12 днів тому

      @@rizzling-g1j yes you can. try it. instead of creating a new file for the component just make the component directly in the file you're using. you DONT need to change it to client.

    • @rizzling-g1j
      @rizzling-g1j 12 днів тому

      @@lolhp._. haha nope this does NOT work. it is possible to create a component which has 'use client' in it inside of a server script, if the 'use client' flag is placed only INSIDE the component declaration (not at the top of the script). but that still makes the component itself (with the hooks) a client component....the hooks like state hooks from useState only work on CSR (client side rendering).

    • @lolhp._.
      @lolhp._. 12 днів тому

      @@rizzling-g1j dont say it doesnt Try it yourself first

    • @rizzling-g1j
      @rizzling-g1j 12 днів тому

      @@lolhp._. you are such a fool, talking bullshit, stfu if you dont have any idea what you are talking about

  • @marierasmussen7799
    @marierasmussen7799 13 днів тому

    Please, please use typescript. Beginners should be starting out correctly.

  • @mohamadhassanyusuf3275
    @mohamadhassanyusuf3275 13 днів тому

    Dynamic Pages Are working well in my project in localhost, but not in Vercel. What shoud i do?

  • @ogunacg3387
    @ogunacg3387 13 днів тому

    Thanks for the content, I have a request, and that is, would you like to take a video about how you fetch the data that is exposed by an api in client and server components with like react or redux queries according your choice by the way I am not sure whether it is possible or not? Thanks again

  • @SR-zi1pw
    @SR-zi1pw 14 днів тому

    This is normal for me nowadays honestly i am enjoying doing that abstraction into layers

  • @coderyan
    @coderyan 14 днів тому

    The intention here isn't to say that using "use client" is always a problem. It only becomes a problem if someone uses "use client" everywhere in their app, effectively making it all client side, preventing the benefits of server components. Next.js recommends this approach in their docs here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree.

    • @uixmat
      @uixmat 13 днів тому

      to be fair you do say that in the first 10 seconds of the video Ryan xD

    • @coderyan
      @coderyan 13 днів тому

      @uixmat sorry, are you saying it came across as it’s never okay to use the “use client” directive?

    • @uixmat
      @uixmat 12 днів тому

      @@coderyan no mate, quite the opposite!

    • @coderyan
      @coderyan 12 днів тому

      Haha okay, that’s what I thought you meant but just wanted to make sure 🙏

    • @uixmat
      @uixmat 11 днів тому

      @@coderyan all good brother! appreciate the content!

  • @xbozo.
    @xbozo. 14 днів тому

    not a problem tho, just the intended way to use next

  • @roguegoblin2407
    @roguegoblin2407 14 днів тому

    nah it isnt a problem

  • @atadeniz18
    @atadeniz18 14 днів тому

    Nice video but isnt this the normal way to use nextjs?

    • @coderyan
      @coderyan 14 днів тому

      I’m not sure I understand what you mean

    • @henri470x
      @henri470x 13 днів тому

      ​@@coderyan he was wondering if this is just the "default" or "the norm" and all the people should have been doing it this way

    • @coderyan
      @coderyan 13 днів тому

      I think it should be the norm, but it can be easy to leave a lot of code client side when it probably shouldn’t be. Does that kind of answer the question?

  • @nasrokamora
    @nasrokamora 14 днів тому

    This is big problem bro

  • @Robert-gr1cl
    @Robert-gr1cl 15 днів тому

    if i refresh the page on the home screen it logs me out (i did this exactly the same) why is that?

  • @joostschuur
    @joostschuur 15 днів тому

    Have we just stopped living in a civilised society where we put a blank line below our import statements??

  • @adnanrruka5152
    @adnanrruka5152 15 днів тому

    thnx

    • @coderyan
      @coderyan 15 днів тому

      You’re welcome

  • @Robert-gr1cl
    @Robert-gr1cl 15 днів тому

    beautiful tutorial, worked perfectly for me!

    • @coderyan
      @coderyan 15 днів тому

      Happy to hear it!

  • @mwariwada
    @mwariwada 17 днів тому

    This one of the first tutorials I've seen that matches my exact stack.. Tailwind, App Router blah blah blah... Thanks a lot for this one!

    • @coderyan
      @coderyan 17 днів тому

      You’re welcome!

  • @OnlyJavascript
    @OnlyJavascript 17 днів тому

    Wow.. i thought next js got a new bug. Bro waking up from a coma be like. 🎉 Welcome Back Sir..

  • @PrismaData
    @PrismaData 17 днів тому

    Great video!

    • @coderyan
      @coderyan 17 днів тому

      Thank you! Really appreciate that

  • @roshanansy4137
    @roshanansy4137 17 днів тому

    I wanna to thank you for making this episode and happy to known all about the qwik.js.

    • @coderyan
      @coderyan 17 днів тому

      You’re welcome!

  • @sjonny-depp
    @sjonny-depp 17 днів тому

    I think most of us would love to see a PART 2 of the watches app. Where, each watch has it's own page with description, image, gallery, and maybe the homepage where a normal visitor can view all the watches from all users, and can view the detail page of that specific user.

  • @AvyIbra
    @AvyIbra 19 днів тому

    This is so helpful. Your new subscriber here🎉

    • @coderyan
      @coderyan 19 днів тому

      Happy it helped!

  • @kaneda1204
    @kaneda1204 20 днів тому

    Hi ryan! Excelent content bro. Thanks 🎉