React Hooks Crash Course (useMemo, useCallback and more).

Check out my courses to become a PRO 🔥
developedbyed.com
Starting with useState, we explore how to leverage this hook to manage state within functional components. Discover how useState simplifies state management by providing a concise syntax and powerful capabilities, enabling you to create dynamic and interactive user interfaces.
Moving on, we dive into useEffect and useLayoutEffect, two essential hooks for handling side effects in React. Understand the crucial differences between these hooks and gain insights into when to use each one effectively. Learn how to incorporate asynchronous actions, data fetching, and other side effects seamlessly into your components.
Next, we explore useMemo, a powerful optimization hook that allows you to memoize expensive calculations and prevent unnecessary re-renders. Unlock the potential to enhance the performance of your applications by intelligently caching computed values and minimizing redundant computations.
We then shift our focus to useTransition, a relatively new addition to the React hooks family. Explore how useTransition empowers you to create smooth and seamless user experiences by adding asynchronous transitions and suspense to your application flow. Unleash the power of concurrent rendering and watch your UI come to life.
Continuing our journey, we unravel the benefits of useCallback, a hook that optimizes function references, preventing unnecessary re-renders. Discover how to optimize performance by memoizing callback functions, ensuring they remain consistent across renders while avoiding unnecessary recreations.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming

[@YLLIEEGD]

Timestamps
0:43 useState
4:26 useEffect
12:46 useContext
15:48 useReducer
20:09 useRef
21:35 useMemo
23:16 useCallback & useMemo
28:02 useTransition

[@nuke7]

23:34 Love Svelte, tired of this react shite...

[@duwainevandriel9816]

Something you can discuss in one of your next videos is what the difference is between useContext and a 3rd party provider is like Redux, Zustand or Tanstack is to handle global state. There is a difference 🥳

[@storyPlus12]

The only difference is that context is a react build in state management, and others are a separate Library

[@mr__atiur]

I've gone through many tutorials but this one cleared my mind with all the unused material and filled it with required data only. Thanks for this precious tutorial my gorgeous friend.🎉❤

[@unagai1111]

I've been following you since 2019 when you were just getting started Just getting back into dev and glad to see that you are closing in to 1M Subscribers. Keep up the great work, you make learning fun!

[@gayashanmadhuranga3375]

agree

[@lukasGarciaSGS2]

Thanks for helping the community. God bless you! Greetings from Brazil

[@rohanyadav2597]

You made a video, when i needed it the most thanks😅

[@hamadamek]

Amazing content. One request. Explain where you would use each hook in the real world. Your demo for reducer and context were so simple and clear, but I did not understand why these hooks were added to React in the first place

[@kocikoro]

Great video as always! Thank you Ed!

[@developedbyed]

Where do Pirates get their hooks from?

[@thisbevibhor]

Do you want to "setCourse" to that place? @developedbyed

[@anshulanand02]

Facebook

[@zeeebooo86]

Thank you man!! Appreciate it!

[@kanodekoubillybrown3025]

I'm finally able to wrap my head around hooks ,I've mostly been using useEffect and useState, I just realized i've not been using the right approach.

[@MasterOfMisc]

Thanks for this video and for walking through all these. I especially like the idea of using Zustand. Will you ever make a video tutorial on this state management library?

[@ciphergirl9038]

Awesome content as always. This beign a React hooks crash course, the project name 'my-vue-app' got my eyes hooked! 😂

[@AlexSmith-ms9xb]

Thanks for such amazing content. Please, please, please make a Zustand crash course!

[@yajirushik2871]

About the useTransition I din't knew it works like that, what I used every time for real time filtering with fetch was a fetch api with abort signal, this makes things easier 👌

[@novanoskillz4151]

your useMemo example was the first time ive seen someone make sense of usememo. even my senior dev has had a hard time explaining it. all he ever says is use useMemo to memoize your function hahaha wtf!!! thanks for this video.

[@pedrobarbeitos]

this was great thank you !

[@ashutosh_tiwari]

hey Ed thanks for this amazing video, can you please use all of these hooks in a project and show us a glimpse of why it is used and where to use the specific hook. Except (useState, useRef, useEffect, useEffectLayout)

[@jensadria]

"At what point do we just stop and switch over to Svelte" - Truer words have never been spoken. At this point the entire dev world is just suffering from React Stockholm Syndrome

[@abhishektomar7306]

Thanks Ed !!!

[@RichardWalterLanda]

thanks mate

[@chiragsharma4102]

Added to "pre interview revision" playlist

[@cggs3001]

Svelte series!

[@muhamadbadriyusuf5686]

Hi ed..i need nextauth tutourial from you .. thanks ed

[@benixmaximus]

Hello. Do you ever run specials on your full stack course? I love the stack that you have chosen by the way.

[@abuzubaer3083]

thank you

[@bakhtiyor_sulaymonov]

You made me think about svelte )

[@HoNow222]

"I'm tired of all this React shite"
Us too brother, us too. ahah

[@iedi3]

It’s funny the last part, Svelte. I’m learning React, due to popularity, while already using Vue. But I would’ve wanted to try Svelte… but there’s only an amount of time you can spend learning new things, while also having commercial skills, I’m also learning node/express, again, I wish I would’ve learned Nest…😂

[@wajdwael8775]

We need videos about React & TypeScript...

[@user-fj6sj7pu2x]

good

[@user-uc2ct5dl4c]

We need 3d website tutorials 😁

[@PoprostuTaki]

Can you make a video about useSyncExternalStore? For example with data synchronization from localStorage?

[@hiberniankingy]

A thumbs up for questioning why we haven't moved over to Svelte lol

[@yathink2406]

Can you make video on most underrated hook “useImperativeHandle” which is most useful

[@libock_serge]

Terrible joke right off the bat? Instant like 😆👍

[@GamingZone11]

Hey bro create a video on how Javascript behind the scene work and also console.log behind the scenes work. Try to add more interviews stuff in your video so we developer knows everything thing

[@GamingZone11]

I will be waiting for your next videos😊

[@daromacs]

hey Ed some arduino or ESP32 projects with react interaction would be amazing!

[@Lazllb]

Just recently jumped into React, coming from mostly a C/C++ background. It’s funny that l was literally looking these up yesterday. Thank you for these videos.
I think my biggest confusion is with useCallback specifically and the dependency array. When using useCallback with an empty array, variables from useState are automatically updated but when using for example the result of a TanStack query inside the callback, they won’t update without specifying the dependency. Is this because in order to use an empty array, the variables should be referentially equal to each other?
What sucks about React from a newbie perspective is thinking you know how all these hooks work and then realizing they do something internally completely differently than what you expected.

[@tseringlama2146]

hello brother please make a video on (express js) backend and (next js ) frontend about "server side " filtering data and pagination not using server action

[@adhdGameDev]

H we j❤😊

[@tjbechard7059]

🔥 🔥 🔥

[@sreeharshad1760]

hi
when ever i use hooks in my own custom library i getting the error saying cannot read the null with the hook i used

[@kanodekoubillybrown3025]

Could you make a short video no how to make jquery work in nextjs13 app directory

[@bayandamabuza6587]

What's the diff of setCount(count+1) and
setCount(prev => prev + 1)
When updating the count
Which to use?

[@thisbevibhor]

setCount(count+1) would run with the current value of "count" which could be stale and you don't want to use it, setCount(prev => prev + 1) updates using the previous state where prev represents the previous value. This approach ensures that you're working with the most up-to-date state value because React guarantees to provide the latest state snapshot to the functional update.

[@skyhappy]

Use the later one, it makes your life easier, it works like await where it updates the state immediately and not async

[@JaiRaj26]

@thisbevibhor is right. Also Read about 'React Batching'.

[@Nab_001]

I already know how they work I just want to relearn them your way

[@DeMayzr]

You should add chapters to this video

[@duwainevandriel9816]

when to use useMemo and when to use useReducer

[@sunbertyv3947]

I have this problem, i downloaded node, and installed react with all packages, but then when i do localhost3000 i don't see my page, what can i do

[@AhmedZahid-fq3ky]

wow

[@DavidWTube]

Content with value. Something The Primeagen will never grasp the concept of.

[@SatyamSingh-nr9tm]

[@Raphael-bq1fc]

can someone explain at 9:24 again? why does it skip the count by 2?

[@bartek_szajna]

little late but: probably the component wrapping the whole app, it renders it twice for debugging purposes

[@OCEMTechZone]

🎉

[@suvigyabasnotra7378]

30:45 Is that his vape on the table??

[@Seven77tw]

i love you

[@VikramSharma-cd4oy]

I just reached this topic today 😂 while revision 😂😂

[@dharmikjain5288]

From where you are learning react

[@jamesmanjada9553]

👍

[@VikramSharma-cd4oy]

@@dharmikjain5288 well my learning methods are weird but currently revising from w3

[@VikramSharma-cd4oy]

W3school just revising to create some project

[@rowsncols]

Does anyone know what color theme he's using?

[@amyjaks]

jellyfish

[@meharsain728]

@developedbyed Can you make a video on React Error Handling? like there's error boundry which react provide idk why these component are class component and theirs also react-error-boundry npm which actually provide you with hooks..... please NATURE DO SO ACTION MAKE ed SEE MY COMMENT & MAKE VIDEO ON IT

[@aryankalra5640]

When you are trying to understand useMemo and useCallback by yourself 30:25

[@b1mind]

useSvelte()

[@mohamedGado3]

what's the extension name?

[@sajidhssi3445]

React Developer Tools

[@stefansweb]

Can we get a link to Github with these examples?

[@Mr-Yuki]

Bro i started learning react 2 days ago or so.... Stop READING MY MIND!

[@user-js1ym3xs9q]

import React, { useEffect, useState } from 'react'
const Test = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const vv = setInterval(() => {
setCount(prev => prev + 1)
}, 1000)
}, []);
return (
{ setCount(prev => prev + 1) }}>{count}
)
}
export default Test
i have no problem`` why?

[@joshuamodiba853]

🤦oh man i liked the components by what's up with these hooks limitations and easy to make bugs

[@juanmacias5922]

Crying in SolidJS ;_;

[@nuke7]

23:34 Love Svelte, tired of this react shite...

[@nope00372]

perso

[@carlosdavid4800]

First 😁

[@rajeshp9319]

I was first comment

[@Briefklammer1]

React is a mess

[@solomonforjesusfoundation830]

I want to develop a world standard social media app with over 25 different features, please can you help me or introduce me to a professional company ??

[@fadynader8778]

hey man
just out of curiosity.. are you gay ? 😅😅

[@sajidhssi3445]

he made a video a few months/a year ago with his girlfriend...

[@dragx26]

If I get it 👈
I'll subscribe 😐🙂

[@GoeHybrid]

I hate hooks. They make code so hard to reason about + easily create bugs.

[@paulclarke4099]

I second the useSvelte() comment, its time to move away from all this ridiculous complexity 💯😃👍

[@mawrez0098]