- 1 447
- 953 223
Code Ryan
United States
Приєднався 25 січ 2022
I'm Ryan Solomon and my goal with this channel is to provide resources that help you build whatever you want to build.
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
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
Yes
Do you have any course with projects?
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.
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
Hey, I have several videos on React state! Is there anything in particular that you have a question about?
@@coderyan not particular but I have difficulty using them , and your nextjs Playlist is best it help me understand nextsj better and faster
I’m happy it’s helping you out!
It’s not a react concept, this is a closure behaviour
npx prisma db push isnt working Error: P1001: Can't reach database server ...
Is it safe to have NEXT_PUBLIC_[...] for each of the environment variables? This exposes them to the client right which is unsafe?
Wonderful🤍
Thank you!
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.
The slow and step by step narrative is really helpful. very easy to understand.
That’s great to hear
Hi. Thank you. gives me a better insight of what i am doing. when is the next video coming.
Happy it helped! Thursday!
cant we import sc inside cc with children prop?
😢
I'm a beginner and I thank you for making this rendering concept more understandable. It's well explained.
Happy it helped!
Apart from useState, useReducer's dispatch function also cause a rerender
Yes because useReducer is also used to manage complex states
Wonderful!! Keep the videos coming :)
Will do!
another golden nugget, thanks for clarifying this I love the examples you provide
Happy to hear it!
Do we need to use rls?
tks
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.
Nextjs has introduced just problems ever since vercel bought it ngl
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.
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
what about if I wanna use that state to another component?
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
any OAuth tutorials with this?
love these quick little refresher videos :-)
Happy to hear it!
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
Very fair comment. I’ll update the title as well as the thumbnail to avoid any further confusion here
@@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
@rizzling-g1j well either way, I appreciate your kind feedback. Thanks!
@@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.
thank you for letting me understand parallel data fetching
You’re welcome
Thank you so much
You’re welcome
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?
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
@@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)
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
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
@@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.
@@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).
@@rizzling-g1j dont say it doesnt Try it yourself first
@@lolhp._. you are such a fool, talking bullshit, stfu if you dont have any idea what you are talking about
Please, please use typescript. Beginners should be starting out correctly.
Dynamic Pages Are working well in my project in localhost, but not in Vercel. What shoud i do?
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
This is normal for me nowadays honestly i am enjoying doing that abstraction into layers
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.
to be fair you do say that in the first 10 seconds of the video Ryan xD
@uixmat sorry, are you saying it came across as it’s never okay to use the “use client” directive?
@@coderyan no mate, quite the opposite!
Haha okay, that’s what I thought you meant but just wanted to make sure 🙏
@@coderyan all good brother! appreciate the content!
not a problem tho, just the intended way to use next
nah it isnt a problem
Nice video but isnt this the normal way to use nextjs?
I’m not sure I understand what you mean
@@coderyan he was wondering if this is just the "default" or "the norm" and all the people should have been doing it this way
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?
This is big problem bro
if i refresh the page on the home screen it logs me out (i did this exactly the same) why is that?
Have we just stopped living in a civilised society where we put a blank line below our import statements??
thnx
You’re welcome
beautiful tutorial, worked perfectly for me!
Happy to hear it!
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!
You’re welcome!
Wow.. i thought next js got a new bug. Bro waking up from a coma be like. 🎉 Welcome Back Sir..
Great video!
Thank you! Really appreciate that
I wanna to thank you for making this episode and happy to known all about the qwik.js.
You’re welcome!
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.
This is so helpful. Your new subscriber here🎉
Happy it helped!
Hi ryan! Excelent content bro. Thanks 🎉
Thank you!