React Hooks useEffect Tutorial

Learn how to use the useEffect hook in React.
Code: github.com/ben...
Links from video:
numbersapi.com/...
overreacted.io...
• React Hooks Closure Pr...
Playlist: • React Hooks Tutorial
----
If you like cooking, checkout my side project: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/ben...
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad ​
​
----
Follow me online: voidpet.com/be...
#benawad

[@ablanchi]

Wow, this practical react series is like the distillation of so many long-ass tutorials where they basically treat you like you know nothing about anything for 3 hours. Please make more, these are gold Ben!

[@JonathanJumper]

best comment, best video (y) suscribed

[@marcelnunez1658]

Honestly I'd prefer it to be slower but it's good nontheless

[@habibsspirit]

Jesus Christ, MAN! How is this even possible?!?!? In under 2 minutes I understood more than I ever did with hours of reading those sophisticated lexicons some people call Documentation.

[@jorge28624]

Documentation aka "THE HOLY SCROLLS!!!1!"

[@nabil14409]

Literally my experience.

[@Mia-cw1du]

so true

[@code_Jedi]

Me Too

[@soklayvann8980]

@@code_Jedi too

[@valiknows]

Always prefer this type of tutorials vs React Docs 😂. All the best Ben !

[@muhammadwildan5941]

TRUEEEE LOL

[@edwingarcia5043]

React docs are fine.

[@RACAPE]

I just started to use hooks at my job on a new project and this is super useful. Now all makes sense.

[@timmyfrank3]

Thank you. Way better than other tutorials or react docs. Life saver.

[@timothyn4699]

Concise yet also well detailed, best explanation ive heard on effects so far, thanks! Also +1 for the keyboard tip on how to quickly comment out highlighted code

[@yotaraonvideo]

Well, I'm gonna parrot everyone else's comments by saying that now I understand useEffect and React Hooks much better. Good stuff, Ben! 👍🏻

[@ehodges2004]

Great series, look forward to more!

[@darkpsypher8567]

Thank you so much for doing these types of videos. You've improved my understanding of useEffect by a ton!

[@mostinho7]

UseEffrct is called whenever react rerenders but can limit the number of times it’ll be invoked by providing dependency array and then it’ll only be called when one of the vars in array changes

[@highzenburger1829]

Great tutorial and great typing speed!

[@jamesfoley4426]

Ben I like when you explain the theory shown in the React Doc's with a simple example. A lot of time the language in the React docs makes me have to look up what they are talking about....thanks for the help

[@AhmedBesbes]

I'm totally hooked to this React Hooks series!

[@nathanbrachotte]

16:56 I don't think I understand why you're adding setState to the dependencies array.. Is the value of setState ever changing? Otherwise great video thanks a lot!

[@bawad]

the value of setState shouldn't change but if it were to change, we want the latest value so we add it as a dep

[@jimioni9982]

@@bawad but setState is a function, how come it has a value? Unless you mean anytime setState is called/invoked. Please shed more light

[@bawad]

The value of a variable can change even if it stores a function: let add = (a, b) => a + b // I change the value here add = a => a

[@timtomgouda]

​@@bawad I understand a function's definition can change in case of custom functions, but in this case will setState's definition change, since it is provided by React ?

[@TechnoTube001]

@@timtomgouda Yes, you are right. setState definition will not change. I created this sandbox to test this: codesandbox.io/s/naughty-breeze-5kzky (I am not so sure if this is valid test, may be you or someone can check/verify it). I hope Ben answer this.

[@DevlogBill]

Hi Ben, how you doing? Your video is now the 3rd video for React and the reason being is because I am having a real tuff time learning the useEffect method. Please correct me if I am wrong but the useEffect is used to refresh the state and for API's? My issue is understanding what the useEffect is for and how to properly write it. From what it seems you need the useEffect to connect to an API to gather data and use the try catch method to report errors? This is what I did in another tutorial. Hopefully 3rd time is the charm. I guess this time around if I don't understand it, I will simply repeat the process with this video over and over again until I finally understand what I am doing. Haven't seen the video yet but I am doing so now, and I would greatly appreciate any feedback, thank you.

[@bushigi5913]

15:38 even though we use (state=>({data:state.data, loading:true})) we still injected a new object(from the hooks point of view) how is this working?

[@geekofia]

he cleverly used data to show loading, infact that loading variable is not at all used. sate.data saving current state that is passed to hook ( null for first time and later old state of api response)

[@xerxius5446]

Note that you don't need to add setState in dependency array because it is a stable function and it does not change its identity across renders and this is why ESlint will not complain about it either

[@LautaroGruss]

Nice Ben, keep it up! Thanks for the videos!

[@som.shekhar]

At 15:47 What's the point of having loading in the state, when we are almost never using it. { !data ? "loading..." : data} "loading..." only shows before the first data is fetched and then for subsequent fetches no "loading..." Is it intentional or by mistake?? Generally data fetching is not this fast so we would need loading before each fetch.

[@anthonygayflor6168]

Thank you for this! I really dislike the videos that explain things as if I’m learning code for the first time. But I REALLY like your style or tutorials, keep it up

[@HCforLife1]

Why to dislike videos like that? Lol. Just don't watch and skip it. There are people on different lvls - why to downvote helpful content. Just get to the habit of liking what is useful for you lol

[@gokubadgoku]

DUUUUUUUUUUDE WE CAN MAKE SEARCH FILTERS USING THIS LOGIC I THINK IM NOT SURE BUT I THINK I HAD AN EPIPHANY

[@shakibahmedshaikh7152]

Hey, I thank you for this. I understood it better.

[@TheAmeer3881]

Nice use of short-circuiting

[@consoledoterror971]

Huge Thanks for sharing this.

[@mauricepheyton1386]

Great explanation!

[@Mike-xr1fk]

const [countFetch, setCountFetch] = useState(() => JSON.parse(localStorage.getItem('countFetch') || 0));

[@ibrahimalshubaily9520]

pretty pretty good (with Larry David voice)

[@davidallen2343]

These are great videos. Looking forward to the next already. Love your channel.

[@АртурМорош]

Watch you from Ukraine. Thanks you

[@tkeo12]

React Hooks example (must have): everhint.com/hintlink/cc24ac88-5db5-40ba-8c01-8572961db9a2.html

[@logigunaratnam6870]

Hi, can someone explain why when you are setting the count in local storage, you use ```useState(() =>JSON.parse(localStorage.getItem("count")))``` instead of useState(JSON.parse(localStorage.getItem("count"))). When I tested both it didn't make a difference. Thanks in advance :)

[@geekofia]

that only gets count from local storage for the first time (once to be precise)

[@vorname1485]

16:56 I would recommend only add stuff when lint asks for it. In this case lint is okay without setState because setState from useState will NEVER change once emitted. So the captured setState value inside the closure will never be stale. IN fact the lint plugin has this check for known cases backed into its implementation.

[@TechnoTube001]

I was thinking exactly same, that I believe setState itself never changes so does it makes sense to include it in []

[@kenhilliard5845]

When you call useFetch you destructure the returned object into const data = null and , const loading = true. Sometime later the fetch's promise completes. At this point useFetch updates "data" and "state" using setState. But how does this action update the App component's "data" and "loading" const values. They are const values, not references, so how does this happen? How does useFetch "reach up" and change the App's const values when the promise completes. It would seem to me the only way this could happen is if useFetch's setState call somehow causes the App component to re-render, resulting in a new call to useFetch which would return current state (data='retrieved data', state=false). Could you explain this. BTW: I really like your videos as they provide a much deeper insight into react along with best practices.

[@bawad]

"t would seem to me the only way this could happen is if useFetch's setState call somehow causes the App component to re-render, resulting in a new call to useFetch which would return current state (data='retrieved data', state=false)" that's right, when a hook calls setState the component it's in will rerender with the new state

[@albinj20]

why do we want to call localStorage.getItem inside a function ? It will be called on every first time render that's what we want right ?

[@mohamedamarfilali]

Great video, thank you

[@szliang3974]

the 'useFetch' is actually a 'React component', however every time App component re-render, the 'useFetch' component get re-rendered too(called), even though inside useFetch, the useEffect shadow comparing [url], should useFetch wrapped into memo(useFetch)? another confusion is that: let us say the api response is delayed in few seconds, when App is doing rendering, the {data, loading} =useFetch(), have obtained the init value, which is null and true, is used in App rendering. few seconds later, not sure whether the App render the latest value? , i assume it works only like doing const state=useFetch(), in App return area use state.loading? 'loading': state.data

[@nodirbekvositov]

Hello what happens if we remove cleaning up from this part 08:20

[@keeganfargher6418]

I always wrote it as {showHello ? : null} but your condition is so much cleaner

[@CodingwithElias]

good job!

[@restuwahyusaputra7764]

Thanks Ben for this tutorial, very helpful for me

[@sstawecki]

Thanks dude! great explanation

[@ChandanKumar-of1je]

which mechanical keyboard do you use???

[@denpol9956]

Good. But with debouncedCounterValue hook will be better )

[@TheYari1210]

Wow! This guy is a bad ass! sub++

[@bawad]

thanks and welcome :)

[@succatash]

15:38 what exactly is the difference between setState({data:null, loading:false}) and setState(()=>({data:null, loading:false})) and what does making it a function do. does it just become a callback function, so if setState is rendered then we change the state of the object?

[@geekofia]

​ @Ben Awad shouldn't we check localstorage value for null ? cause for the very first time we run, the number will be null ?

[@sreekumarmenon]

if you declare async function inside useEffect , you can still use async/await , like so - const MyComponent = props => { useEffect(() => { async function myFunction() { await fetch(url); } // Execute the created function directly myFunction(); }, []); return Asyncly!; };

[@DanishAnton]

How come you have eslint validation without any eslint config file? Is it configured in vscode?

[@bawad]

Actually, I'm not sure

[@CynthiaSotoCaballerolYEAHl]

I think eslint validation comes already with create-react-app

[@MarcWilsonActual]

Great tutorial! A question regarding the functional component useFetch... It returns data, versus a react component (JSX). It's clearly ok, since it works, but I'm surprised about that. How is that a valid return value for a react stateless functional component?

[@chujunlu919]

If anyone else experience the same issue? The first render of Hello, the console logs "render", "unmount", "render", instead of one single "render". That means the clean up function executes. I toggle button, console shows one "unmount" as expected. When I toggle again, three console logs: "render", "unmount", "render", where there should only be "render". I wonder why is this happening. Thank you!

[@chrisstucker1813]

you must have react strict mode on. it makes useEffect() render twice, just turn it off

[@abhinandankhilari9729]

Could anyone explain why functions need to be passed in dependencies array? I got that on each render, the functions would get new references, but what would actually affect their behavior in such a way that effect needs to be run? Is it just a convention to specify functions as dependencies or would be there any actual scenarios when functions not passed in dependencies array leading logical errors?

[@irvinghenriquez8231]

wow great video. subscribed!

[@thomasboittin9626]

Thanks for the tuto :) Quick note to add my experience: When I did the mouseMove event listener, I noticed that when I displayed the console while I was in responsive mode, the event was only triggered when I clicked. Removing the responsive mode makes it work. Noobies issue but it took me a bit to understand what was happening so I figured that it might help someone else :)

[@maksatbekburkanov4522]

What keyboard do you use Ben?

[@errinwright]

whoa Ben Damian Musk !1

[@moayedmustafa9673]

I get a weird feeling when I see Ben code? how does your brain work so fast and in unison with your fingers! I have a long way to go!

[@nischalsehrawat2130]

Hi When does the useEffect hook of the usefetch run because there is no render method? i am a bit confused about the control flow here. Can you please explain a bit?

[@EddieCheng174]

Can anyone told me how to do 2:07 thx?

[@kevinhuang8733]

What is useForm?

[@fotoflo]

hi hi, wonderful tutorial here. Just one question - you use the initializer function of useState at 18:56 and you initialize it with a localstorage value.... how do you set the initial local storage value? let's say you wanted to start at 1 for example?

[@bawad]

JSON.parse(localStorage.getItem('count')) ?? 1

[@fotoflo]

@@bawad Thank you Ben!

[@fotoflo]

@@bawad BTW why didn't you suggest using the || operator?

[@fotoflo]

localStorage.getItem("null") ?? 1; // works in my code but returns an error in the chrome js console. localStorage.getItem("null") || 1 // returns 1 in the js console, also works in my code Uncaught SyntaxError: Unexpected token '?'

[@bawad]

?? needs babel plugin or typescript 0 || 1 => 1 0 ?? 1 => 0

[@StephenRayner]

An iffy is a good structure to use for the asynchronous useEffect. Can even make that its own hook. UseAsyncEffect

[@worldclasscode1847]

Great video! :)

[@princejoogie]

19:42 "useEffetch"

[@ahmad-ali14]

awesome !!

[@LukeryaPereprygova]

not for beginner

[@amanbhayani65]

so happy to have found videos like this that just cut the BS, and are just focused on quick concepts. Definitely subscribed.

[@ruirui7344]

how to build hybrid (single + multi) page application using reactjs

[@jerrylove1759]

I can't thank you enough. I've been using react for over a year now but had never gotten to understand the useEffect hook. After carefully watching this video, I perfectly understand how and when to use it. I've also been able to fix some bugs in my code

[@eric7758]

Thanks ben.... this video saved me a bunch. hehehehehehehe. I'm so happy.

[@curlybrackets5049]

great!!

[@frogger832]

Omfg I searched high and low for a simple explanation and here it is. Thank you.

[@hellofriend3091]

Dope

[@ryunosukeakutagawa6403]

It's very useful to understand useEffect than react website text tutorial.

[@Sindoku]

Could you use the unmount for security purposes? Like, if you have some data that temporarily needs to be displayed and is sensitive, so if the user closes a modal it then triggers the unmount?

[@krimo10]

For some reason my component still renders twice even though I want it to render just once

[@dragonburger5676]

Nice work Ben. Very helpful and great explanations!

[@zacktaylor1143]

Is useForm a custom hook?

[@uusa35]

thank you amazing i really appreciate sharing your knowledge

[@kavinduchamiran4869]

3:59 You can set chrome devtools' *preserve logs* to true to keep the logs even when the tab is reloaded.

[@Eminence43rd]

You really enjoy typing.. I can tell..

[@kishorrathva4097]

Why i am getting ""Warning: A component is changing a controlled input of type password to be uncontrolled". this warning initially ?

[@clydegrey5060]

At 18:52 you say you don't want local storage to be called on every single render so you are initializing count with a callback function passed to useState. Even without doing this work in the passed function, it would still only access local storage one time (on the first render) and not on every render. Passing a function is not required to get the result you want. I agree that using the function will allow this fetching from local storage to happen asynchronously and is the better way of doing it. Am I mistaken?

[@bawad]

You're correct that it only sets the initial value once, but I think the code for JSON.parse and localstorage.getItem still run on each render

[@clydegrey5060]

@@bawad Oh I see it now. It gets evaluated at each render as it is an argument to useState, irrespective of the fact that useState only uses the value once (on mounting). Thanks! Great series.

[@bawad]

exactly

[@AnilPai]

@@bawad I think you missed a return statement on Line 13. While fetching from localStorage always have a default value :-) return JSON.parse(localStorage.getItem("count")) || 0

[@bawad]

return is only needed when you use curly braces

[@bulletsblastsandbeasts6896]

This is just great! Exactly what I was looking for. Thanks, Ben!

[@bjul]

Goddamit Ben, you are da bomb 🔥 God bless ya soul.

[@jamoliddinz]

thank youuuuu!

[@lebroncode]

Why did you add setState to the dependency list in the useFetch hook?

[@bawad]

Because it’s used inside

[@lebroncode]

@@bawad But it doesn't matter if it changes right? Its just a function so it seems weird to me you would want to depend on that value

[@Cmxmxmmx7]

Hello,Ben! Thanks for tutorials. Recently I was trying to small game , where after user click button timer starts count down from 10 to 0. I am using hooks. I add clearInterval when seconds ===0, but infinite loop occurred. And one more questions. In one of your videos you suggested that react developers should learn PostgreSQL. What is the reason for that? Is mongoDb not enough? Thanks.

[@bawad]

hard to say without looking at the code I think SQL is a more versatile skill, but I don't think it's bad to learn mongodb

[@MrNsaysHi]

11:04 ...OR! use an IIFE :3

[@0the0ambient0]

Nice explanation. Thanks!

[@rajatsharma280]

Hey superb !!! I have a doubt if you could help me out in clearing this How to fetch get API which takes input parameter from form using axios using react hooks

[@jandurcak8500]

const req = async () => { const { data } = await axios.get(url); // setquote({ data, loading: false }); setquote({ quote: data, loading: false }); }; return req();

[@joerivde]

Godlike explanation, thanks man!

[@Anonymose43]

Hey Ben , i have one question please over using redux inside hooks, the problem is that my list in hooks component doesn't rerenders after i dispatch an action , but i see that the state in redux store is changed ???

[@bawad]

hard to say without looking at the code, could you put it in a codesandbox?

[@Anonymose43]

@@bawad Here is my code : i paste just related file's codes it consist of 3 files (action, reducer and the hooks function's component) , here is the link on codepen : codepen.io/shadoo77/project/editor/AnqMKr

[@alexfvcruz]

i like React but I'm not a fan of the way they do implement some stuff. Returning a function inside a function doesn't seem like a practical way to fire componentWillUnmout

[@VincentOldMark]

He Pro

[@JaeTask]

very clear, thanks ben

[@meaningmean]

Thanks so much ♥

[@katielamber0238]

I am very happy I got the time to watch the whole video series of yours. You rock! Love what you do. Many thanks to you!

[@bawad]

awesome :)

[@kareemsakr41]

Great work, thank you.

[@chubbyshady]

Can u make ur editor bigger? I watch on my phone and it's getting hard to read ur code

[@bawad]

yeah I'll trying zooming in one more level

[@MDM666666]

Great tutorial, concise and straight to the point. Keyboard sounds amazing by the way, which board is it?

[@bawad]

Thanks benawad.com/keyboard

[@Septem_150]

Ben Awad 104-key gang rise up