You might not need useEffect() ...

Рет қаралды 138,723

Күн бұрын

Learn all about useEffect() & React in-depth: acad.link/reactjs
🖥️ Official Website & Courses
academind.com/courses/
💬 Academind Community
academind.com/community
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
/ maximilian-schwarzmueller
/ manuel-lorenz-808b5185
/ academind-gmbh
/ academind-pro
/ academind_real
00:00:00 useEffect() is often used incorrectly!
00:01:58 useEffect() basics
00:03:16 Setting dependencies correctly
00:08:27 Avoid infinite loops
00:09:56 Introduction to the problem of using useEffect() unnecessarily
00:10:20 Example 1: Use derived state instead
00:12:49 Example 2: Reset state with keys instead
00:17:15 Example 3: Don’t wrap synchronous APIs with useEffect()
00:18:32 Sometimes you DO need useEffect()
00:19:32 Consider replacing direct useEffect() usage with specialized libraries

Пікірлер: 182

@christopheradolphe 2 ай бұрын

Hey Max @academind thanks for this great video again. I already completed your React course a while back and I'm just catching up on the course update announcements. I am mind blown by these new lectures and projects you have added. I am thankful for your relentless efforts of keeping course content up to date and for free. Currently, I am actively job hunting for an opportunity as React developer and those new course projects are a great way to practice and refresh my React knowledge. Thank you

@EstebanInTech Ай бұрын

Thanks for all the knowledge you share! I’ve learned so much from you for over a year now! 🔥

@11r3start11 2 ай бұрын

i found these videos of Maximilian so helpful and easily expained, thanks a lot!

@shubhankarmaheshwari9428 2 ай бұрын

You always helped me to learn at least one new item, as you told we always being around key concept , but never though it can be used to mitigate unnecessary use effect for state update 👍

@tigranharutyunyan7674 Ай бұрын

Thank you for a topic and info.The "key" trick works for Vue too. It is a good reset for "cheap" components.

@marcpanther8515 2 ай бұрын

The localStorage example is kind of bad because it causes the localStorage to be accessed on every render. Use the function initializer of useState instead.

@clintkennedy8387 19 күн бұрын

Yep. He traded one problem for another.

@codeNameMoose907 16 күн бұрын

Max is always so passionate whenever he talks about programming. How can you not love this guy? 🤗

@konradmleczko3810 2 ай бұрын

thanks for example with key - is amazing!

@mohammadpanahi9408 Ай бұрын

Hello, dear Maximilian This video was suggested to me by KZfaq and I watched all the videos. To be honest, I really like you and I missed you a lot and I was very happy to see another great tutorial from you. I hope you will always be successful.

@abbaskareem5281 2 ай бұрын

the (key) trick is really useful , thank you

@user-lc7hl9to8p Ай бұрын

It's a dirty hack, not a good practice. You writting components, which cannot be used without key, and other dev's don't know about this required hack. And this absolutely terrible hack, when your component uses 3 or more props, which u need to hack with key. It's looks fine, but creates problems in future, when your project will grow. In case with a lot watching props, better choice to write useEffects, because any other dev can read and understand how it works, and he don't need to check all usages of this component for understanding.

@TokyoXtreme Ай бұрын

@@user-lc7hl9to8p Using the key is the correct approach, but it belongs on the textarea element within the component - not on the component itself. It's not a hack either, just a way to bind the identity of the element to the state of the component; the new React official documentation explains it more deeply.

@MakanaTheCoder 3 күн бұрын

@@user-lc7hl9to8p it is not a hack, but expected behavior. The key changes so react knows to re-render the component. However I know from experience this does cause issues if you don’t know that it’s being used. I had an issue with my refs and states being reset and it was because the router path was being used as a key on my pages.

@the_proletariat Ай бұрын

Thank you for this! That "key" trick was cool!

@ZawCodes Ай бұрын

I think I don't get that part. Even if you don't include key there, that component will still re-render if the state was changed, no?

@jasonfavrod2427 Ай бұрын

@@ZawCodes I believe that is correct. I see how the key could be useful to do what he mentions, but I figure it's redundant in his actual usage.

@_Pitza 7 күн бұрын

@@jasonfavrod2427 No It isn't redundant, because the default value of useState won't change, it always keep the default value that it has in the first render, that's when the key props comes into play.

@abdullahrafique2883 Ай бұрын

pretty helpful tutorial. I spent some considerable time to read the official guide but this almost 20 minutes tutorial is lit.

@pabloide86 2 ай бұрын

Finally someone with common sense!!! 👏👏👏(btw, that trick with the key to reset the state was cool! thanks!)

@StuartLoria 2 ай бұрын

Best practices is what I need, for typescript, React, etc

@inthisarhamza7182 Ай бұрын

It's very clear and important technique that can used to avoid some delays !

@jubert2096 Ай бұрын

Bro your god man;) I used to follow you since you were too much in angular. I subscribed your courses in angular but later I changed to React since I was tired brushing my self with new thing on angular every year and then I again moved to react after that I subscribed your courses in React I feel it’s heaven

@equiman 2 ай бұрын

Hi Max, excellent material, thanks. I would like to know what tool you are using to create those orange squares to highlight something on the screen?

@eavs772 Ай бұрын

One thing I don't understand is why do you need to send the key? Your component will re-render again if any of your props change, so your computed value will be evaluated again anyways...

@danielcspaiva 11 күн бұрын

exactly

@Michaeljamieson10 2 ай бұрын

definitely need more videos on how react keys work! awesome video

@code75581 Ай бұрын

thanks a lot for the explanation. Please one question. @academind How do you manage to go so deeper in different subjects ? I mean diferrents you teach about like react, angular , docker , kubernetes etc...

@dmons24 Ай бұрын

Very elegant design and great job!

@Shuja709 2 ай бұрын

17:15 the useState hook can alternatively take an initializer function, so you can also use that initializer function to get the required value from local storage. I believe its a bit cleaner this way because the logic of initializing the state stays coupled with the hook instead of lying somewhere else in the component.

@chelseaGPT 2 ай бұрын

I want to ask a very basic question does initial values in usestate get computed when the component refreshes?

@Shuja709 2 ай бұрын

@@chelseaGPT nope. As the name suggest, these are just initial values, so they're only calculated/set when the component first mounts. On subsequent re-renders, these values don't have any effect.

@Luis-fh8cv Ай бұрын

This is super critical. In his example the component was super simple and wouldn’t be rerendered many times. But if it had more state or props it would be getting from local storage multiple times for no reason

@Shuja709 Ай бұрын

@@Luis-fh8cv very fair point indeed.

@TokyoXtreme Ай бұрын

useEffect is the correct way to initialize a component's initial state with localStorage, since localStorage is an outside system, regardless of it being synchronous.

@raphauy 2 ай бұрын

Helpful, thank you!

@jomoc6112 2 ай бұрын

commended!! i already knew about keys but cant find a way to use it. additionally it scope base, so it will not work outside the div if the child has a key too.

@mjaso Ай бұрын

Great video. Spot on guidance IMO.

@Jose-fr6lp 9 күн бұрын

Reset state with keys 🔥thanks for sharing

@iranRevolution7 Ай бұрын

thanks for teaching us 😍

@CleverGeneration 2 ай бұрын

The explanation on using a "key" is really nice, thanks for that!! Now I want to refactor all my useEffects. I'm curious to know if there's any difference between using a key or a useEffect in that case other than a key being a "neater" option?

@stefantholet4036 Ай бұрын

Well, if you use a non-state value as a key then you can avoid re-render of the parent component and isolate the re-render to its child component which could greatly improve performance as it will not unnecessarily re-render the parent component and all of its child components.

@petarkolev6928 Ай бұрын

High quality content as always!

@soumikmahajan6317 2 ай бұрын

any update for you new angular 17 course?

@user-vw5fm9lv9v Ай бұрын

Hey Max, I really appreciate your unique training strategies, I have studied a lot of courses with you and you are my number one teacher... By the way, In my opinion, we can use "useMemo" hook in the second sample (14:04) to set the "selectedTopic" value to prevent extra memory address definition in every render. Am I wrong?

@bibhuprasadsahoo854 Ай бұрын

5 star instructor for a reason 💌

@akvirus2 Ай бұрын

localStorage is available only in the browser. so in useEffect was correct if you use something like next js, ...with server components

@TokyoXtreme Ай бұрын

Furthermore, setting initial state in useState with an external API call makes the component impure. Calling a functional component with the same props should always return the same JSX.

@jahongirbektemirov6516 2 ай бұрын

Useful! Keep going with it

@irfanali17899 Ай бұрын

Thanks I think the useMemo should have been wrapped on topics finding if i am not wrong?

@nanonkay5669 2 ай бұрын

Use useEffect if you need to do an operation that is not part of your React application, like a db call or data fetching, that's the best use case and they're both asynchronous

@TokyoXtreme Ай бұрын

Should also use useEffect even for synchronous external APIs (like localStorage), since setting initial state directly through an external system makes the component impure.

@BilalAulakh23 2 ай бұрын

Weldone young man❤❤❤

@maheshkanojiya4858 Ай бұрын

Maximilian's udemy courses are also superb to watch, great guy Love from India 🇮🇳🇮🇳🇮🇳

@ademineshat 2 ай бұрын

Very helpful. Thanks

@MrOpolo91 Ай бұрын

very helpful ! thanks Max :)

@MohabAyman Ай бұрын

Tlr, use key prop to force refresh on a comp ones

@cintron3d Ай бұрын

Thank you! It does feel like a religious movement and it's weird. I get people like ready query etc... but real world code still has use cases for use effect.

@pp-studio Ай бұрын

Thank you for your great content :)

@zweitekonto9654 12 күн бұрын

18:10 wouldn't this now run everytime the component is rerendered? with useEffect with empty dependencies, it would only get run once and thats what we want?

@danielmaldonado5954 Ай бұрын

I can't undestand why you only have 3K of likes, thank you Max!

@opencode1 Ай бұрын

Finally you are out of Udemy and here on youtube. You the best

@CodeZakk 2 ай бұрын

the last example you gave us still give error in nextjs because if you use localStorage inside the 'use client' it says localStorage is not defined so in nextjs you should use useEffect in that case I think. thank very helpful!!

@TokyoXtreme Ай бұрын

localStorage should be initialized through useEffect, otherwise the component becomes impure

@filipjnc 2 ай бұрын

12:24 that value computation runs on every render and it would get your app slow if that array is big enough. In that case wrap it in useMemo or wait for the new React compiler to ship.

@ant_code 2 ай бұрын

For this specific case this is ok as component has only one prop. But yes, you are right. If in future some developer will add additional prop beside selectedTopicId, this dummy_topics.find will be invoked on each render. And in this case definitely const selectedTopic should be wrapped with useMemo. Good catch 👍

@mansurhamidoff1853 Ай бұрын

Yes, this guy has a good knowledge of technology but in this video he propagates bad habits)) He tries to save devs from making mistakes offering even more dangerous tricks. Although in this case his solution is good but abuse of this method can lead to performance issues

@TheNiters 8 күн бұрын

Never start adding useMemo unless it actually is a performance problem. Use your profiler to determine if you should add complexity like useMemo.

@cusematt23 2 ай бұрын

I am glad brad traversy said it and i know longer have to question my sanity. React really does overcomplicate stuff.

@cant_sleeeep 2 ай бұрын

future is vue

@birukgetachew9084 Ай бұрын

thanks

@user-mb9pu4pg4r 2 ай бұрын

Will the key trick result in DOM updates?

@bhrajgopal Ай бұрын

Hi Max , Can I reset the react context inside useEffect ? Can I reset the state of component in that way ?

@stefantholet4036 Ай бұрын

You absolutely can. Unless the state / context that you are changing is added in the dependency array of the useEffect.

@chandrasekharrachapudi5758 Ай бұрын

Hi Sir, Can you please do a full course for Jest no one has done a proper course for that with in-depth knowledge. Struggling in realtime projects like anything 😢

@yoshiokiyamu8552 2 ай бұрын

Maximilian please also teach us examples of How to apply react using any AI api service like open ai or whatever

@medeuamangeldi6279 Ай бұрын

you need useEffect for localStorage if it is a NextJS project (SSR)

@eleven2435 2 ай бұрын

Hey cool video! So recreating/"remounting" the component with a key is better then using useEffect? Won't it affect performance on a large component tree? If the component with a key recreation approach has a child component with its own state management, would not that state reset?

@mansurhamidoff1853 Ай бұрын

You are right

@TokyoXtreme Ай бұрын

The new React documentation explains it better. The key is used for DOM element identity, and in the example, the text field needed to be cleared, which is not the default React behavior. So adding the key couples the DOM element to the state, which forces the element to be repainted when state changes. The documentation example is almost exactly the same situation as shown in the video here.

@saikrishna4661 2 ай бұрын

PLease update the angular course max, pleaaaaaaaaase

@JakeTheChav 6 күн бұрын

You shouldn't be using that key trick. It causes components to remount, which breaks the performance and may cause the component/page blinks/jumps if it's big.

@jaymartinez311 Ай бұрын

I’m waiting on that qwik framework course. Give it a shot. You’ve done almost all the frameworks already 😂

@thestreamer1481 24 күн бұрын

please any ETA for Angular 17 course ?

@TheSergy12 Ай бұрын

JUST USE IT! haha Loved the video

@egorovsa Ай бұрын

I thought I knew all about key prop.. this is a new feature for me)))

@xxxxxx89xxxx30 Ай бұрын

Thanks Max! Thanks for all the money i made watching your tutorials as well xD

@code75581 Ай бұрын

Having a question here(kzfaq.info/get/bejne/jJeWa7CAts-sgqs.html). You put the line(23) where you initialize the selected value before the line(24) where you initialize the enteredNote. In the react documentation it's mentionned that the hooks must comme first at the top of the function before other lines. What do you think about ?

@onlineaid 2 ай бұрын

Great one useQuery is better the useEffect 😊

@mohammadkhayata2042 2 ай бұрын

You are amzaing 💙💙

@johnconnor9787 2 ай бұрын

6:55 ok, but what should we do if we use object or a function? In this case the meaning of a dependency array disapears

@TokyoXtreme Ай бұрын

You should memoize an object if you want to add it to a dependency array, although it could define the function within useEffect itself (or use useCallback to memoize it outside).

@kunalawasthi9337 2 ай бұрын

Didn't know Seth Rogen knew ReactJS.

@saurabhnegi3932 2 ай бұрын

"Hey Maximilian , did you know that you are improving and enhancing people's knowledge by providing these types of videos?" 🥰

@justinpearson25647 2 ай бұрын

Really? I think that he doesn't know that, and actually he's doing the videos for his nanny to watch

@avwie132 2 ай бұрын

Why in quotes? Are you AI?

@saurabhnegi3932 2 ай бұрын

No I'm not a AI.. , It is a Way of Writting Something and try to get Attention of SomeOne...

@lronmate Ай бұрын

@@saurabhnegi3932but why quotes

@avwie132 Ай бұрын

@@saurabhnegi3932 That's exactly what an AI would say though....

@Gaijin101 2 ай бұрын

please make a video about Nitro

@Rebel101 11 күн бұрын

Using a key is a terrible idea as it cannot be enforced, hence your component depends on the attribute you are unable to control. And yes, you can define an interface, but not its implementation! You should never use this pattern.

@ferdossi Ай бұрын

I don't get it, a component re-renders whenever one of its prop changes, I don't see the use of key, what is the added value ?

@shehrozmalik773 Ай бұрын

The component re-renders whenever a prop changes (a re-render doesn't reset a state to initial value), A component re-mounts when the key changes hence resetting the state. hopes that clears it.

@tomekbednarek2672 2 ай бұрын

The trick with the key is a stretch in my opinion. This approach puts the responsibility of "resetting" the component on the parent by providing the key attribute which is not required by the props. Don't you think this is a risky practice?

@rafarkstudio 2 ай бұрын

I’m more worried about performance, the entire component will probably have to be mounted every time the key changes

@TokyoXtreme Ай бұрын

@@rafarkstudioYeah, the correct way to use the key is to go into the TopicEditor component and add the key to the textarea element. The prop is already being passed, so it'll be accessible when providing the key. The new React documentation shows the usage more clearly and with a detailed explanation.

@tiagox9 Күн бұрын

Well with React 19 useEffect it's becoming obsolete. The use() hook will take care of it

@ngocngan4422 Ай бұрын

It's only the trick. It make remount component instead rerender component

@biomatrix8154 2 ай бұрын

IDC. I want my Angular course! 😭

@user-cs2py4wg3p Ай бұрын

15:14 but the id is already a props, why would i need to put it in the key props ?

@shehrozmalik773 Ай бұрын

The component re-renders whenever a prop changes (a re-render doesn't reset a state to initial value), A component re-mounts when the key changes hence resetting the state. hope that clears it.

@user-cs2py4wg3p Ай бұрын

@@shehrozmalik773 Thanks. I didn't know that.

@drksy-wf7of 3 күн бұрын

1.75x playback with Max. Every time. Good video tho.

@LarsRyeJeppesen Ай бұрын

Still use React?

@borisbarzotto5785 Ай бұрын

gold

@chandrasekharrachapudi5758 17 күн бұрын

Hi, Sir with real-time projects there are no courses jest React unit test cases with in-depth knowledge. So Can you please do one course on udemy sir will learn from u please....

@VidmantasB Ай бұрын

I am suprised that I already knew all the stuff.. I guess I am not a junior react developer anymore 😅

@OleksandrIsaryk 2 ай бұрын

As you say master =)

@dufifa 2 ай бұрын

Why useEffect on componentDidMount is worse then getting localStorage on every render? and why is even an extra effect bad? No much perfomance loses. Using keys is not good idea too because you move out critical logic out of component, better to incapsulate it inside and do clear state obviously. This is what any UI component actually DO>

@filipjnc 2 ай бұрын

Don’t get it either how getting state from localStorage on every render is better than doing it only once on mount.

@TokyoXtreme Ай бұрын

useEffect is absolutely the right way to sync with localStorage, otherwise the component becomes impure. And the identity key should've been placed within the TopicEditor, on the textarea element.

@arian5126 2 ай бұрын

I still don't understand why he used a key. Isn't it that every time a prop changes, the component re-renders. So why use a key?

@Zaheer__zk40 2 ай бұрын

using keys is essential for efficient list rendering, especially when dealing with dynamic lists where items can be added, removed, or rearranged. While it's true that React re-renders components when their props or state change, using keys helps React identify which items have changed, been added, or been removed within a list.

@arian5126 2 ай бұрын

@@Zaheer__zk40 Thanks but it was just a generic description. Still don't answer my question.

@filipjnc 2 ай бұрын

@@arian5126his example sucked. Same key was passed as prop, so the key was redundant.

@gerkim3046 2 ай бұрын

dont use AI to generate responses@@Zaheer__zk40

@mansurhamidoff1853 Ай бұрын

when the key prop is changed react accepts as a new component appeared in virtual dom like it was not there before. So in other words it causes 'componentDidMount' not 'componentDidUpdate'

@sebastianestrada1311 2 ай бұрын

Clickbait, useEffect is necessary 🤦🏻

@ChristianKolbow Ай бұрын

🤔 He never claimed that it is not necessary. But there are many situations where useEffect is not necessary.

@souvikghosh6025 Ай бұрын

Thanks for saving time

@DevastaingDj Ай бұрын

Thanks

@rahmatullahmohammadi4918 Ай бұрын

Thank you so much, it was very helpful❤❤❤

@jasusyb2734 26 күн бұрын

that is what the title tells, that is what click bait means.@@ChristianKolbow

@evolopterus Ай бұрын

You missed one major issue with useEffect... adding dependencies of objects and arrays.

@disinfect777 2 ай бұрын

therefore

@juma2808 Ай бұрын

This is the problem with our industry. You’ll get people that see this as a bad practice, no matter the logic because they read it somewhere. We have too many people on auto pilot, rather than actually thinking critically. AI is going to make this worse, people will not understand what they are actually doing, they will shortcut every step of the way, but act like experts as they go.

@destinygames3449 Ай бұрын

My opinion about react is, this library does many things in hook way, and react way. It is not like programming way. It is not understandable in programming way. Need to learn custom syntax that not make sense in programming way. Instead of understanding, I need to memorise how this hook work. And there is unnecessary hook and unnecessary step and unnecessary package like react-hook-form .

@atroutopia427 Ай бұрын

basically you can write javascript in js/ts files, then add them to standard react mechanism, which is made to make your and your colleagues life easier when contributing to one project.

@xhbr93 2 ай бұрын

2018 : Still using class components and lifecycle methods ? (functional components + hooks ftw) 2024 : Still using useEffect() ??? 2028 : ???

@imdtap1448 2 ай бұрын

Still using react??

@nevermindmepls6773 2 ай бұрын

could u tell me better alternative? starter at front, so wanna know smth better than react

@supernova82 2 ай бұрын

@@nevermindmepls6773 If you wanna get a job, learn React or Angular. The other frameworks might be better for some situations but you don't have to worry about them when you are learning.

@saurabhnegi3932 2 ай бұрын

React + TypeScript

@pabloduran3257 2 ай бұрын

@@nevermindmepls6773 React is at this moment the most requested and popular library by companies, so if you learn react you will find jobs. Now if you want to learn something diferent, there is libraries like Solidjs that works better than Reactjs and is kind of the same logic, also vuejs, sveltejs, but these aren't as popular and demand as React.

@blacklotus1606 2 ай бұрын

@@nevermindmepls6773 if you want to build the most complicated UIs easily, react is the best options. own experience

@enlightened3945 Ай бұрын

I just came accross the key update based solution 3/4 days ago to clear Material UI Autocomplete. Applied that and commented separately in the code as I thought it was a nasty/weird hack. Now here I am, learning it as a best practice. 😂😂😂🎉🎉🎉

@mdlindsey 17 күн бұрын

Do people really make these mistakes in their code?

@mansurhamidoff1853 Ай бұрын

Still using React? You might not need React))

@alexandergeorgesquire220 Ай бұрын

😂

@DhartiMainAkash Ай бұрын

Honestly I didn't find any thing new in this video. This is the very basic things. What's new?

@dheerajsinghnagdali 2 ай бұрын

TIP: Avoid using useEffect as much as you can

@TokyoXtreme Ай бұрын

useEffect is for syncing the component with an outside system - even synchronous APIs like localStorage

@ozgurNY 2 ай бұрын

React to the Hell. Alternative FE frameworks to the future/heaven

@cse6055 3 күн бұрын

I hate 21 minute videos that could have been 2

@MrLuckfinder 2 ай бұрын

Does this really need to be explained?🙄

@ChristianKolbow Ай бұрын

Yes, because this video is seen by people who want to learn.

@MrLuckfinder Ай бұрын

@@ChristianKolbow I mean this is the basics, but the video title announces something really new.

@ChristianKolbow Ай бұрын

@@MrLuckfinder I think you will hardly find anything on KZfaq that will surprise you as an experienced developer. Most of the content is aimed at beginners. But you are right, this is the basics.