You might not need useEffect() ...

День тому

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

КОМЕНТАРІ: 161

@christopheradolphe Місяць тому

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 Місяць тому

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

@shubhankarmaheshwari9428 Місяць тому

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 👍

@the_proletariat Місяць тому

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

@ZawDoesStuffs 21 день тому

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 19 днів тому

@@ZawDoesStuffs 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.

@abbaskareem5281 Місяць тому

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.

@abdullahrafique2883 Місяць тому

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

@tigranharutyunyan7674 Місяць тому

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

@konradmleczko3810 Місяць тому

thanks for example with key - is amazing!

@mohammadpanahi9408 Місяць тому

Hello, dear Maximilian This video was suggested to me by UKposts 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.

@pabloide86 Місяць тому

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

@inthisarhamza7182 Місяць тому

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

@StuartLoria Місяць тому

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

@jubert2096 21 день тому

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

@marcpanther8515 Місяць тому

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 15 годин тому

Yep. He traded one problem for another.

@equiman Місяць тому

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?

@Michaeljamieson10 Місяць тому

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

@filipjnc Місяць тому

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 Місяць тому

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

@jomoc6112 Місяць тому

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.

@dmons24 Місяць тому

Very elegant design and great job!

@soumikmahajan6317 Місяць тому

any update for you new angular 17 course?

@Shuja709 Місяць тому

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 Місяць тому

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

@Shuja709 Місяць тому

@@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 Місяць тому

Helpful, thank you!

@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...

@danielmaldonado5954 15 днів тому

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

@irfanali17899 Місяць тому

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

@CleverGeneration Місяць тому

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 12 днів тому

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.

@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.

@iranRevolution7 Місяць тому

thanks for teaching us 😍

@bibhuprasadsahoo854 Місяць тому

5 star instructor for a reason 💌

@mjaso Місяць тому

Great video. Spot on guidance IMO.

@MohabAyman 21 день тому

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

@jahongirbektemirov6516 Місяць тому

Useful! Keep going with it

@maheshkanojiya4858 Місяць тому

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

@nanonkay5669 Місяць тому

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 Місяць тому

Weldone young man❤❤❤

@CodeZakk Місяць тому

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

@ademineshat Місяць тому

Very helpful. Thanks

@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?

@user-mb9pu4pg4r Місяць тому

Will the key trick result in DOM updates?

@MrOpolo91 23 дні тому

very helpful ! thanks Max :)

@opencode1 Місяць тому

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

@cusematt23 Місяць тому

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

@cant_sleeeep Місяць тому

future is vue

@petarkolev6928 Місяць тому

High quality content as always!

@medeuamangeldi6279 26 днів тому

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

@pp-studio 20 днів тому

Thank you for your great content :)

@eleven2435 Місяць тому

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.

@yoshiokiyamu8552 Місяць тому

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

@saurabhnegi3932 Місяць тому

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

@justinpearson25647 Місяць тому

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

@avwie132 Місяць тому

Why in quotes? Are you AI?

@saurabhnegi3932 Місяць тому

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....

@eavs772 22 дні тому

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...

@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.

@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 😢

@bhrajgopal 19 днів тому

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

@stefantholet4036 12 днів тому

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

@saikrishna4661 Місяць тому

PLease update the angular course max, pleaaaaaaaaase

@jaymartinez311 Місяць тому

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

@xxxxxx89xxxx30 Місяць тому

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

@birukgetachew9084 17 днів тому

thanks

@egorovsa Місяць тому

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

@code75581 Місяць тому

Having a question here(ukposts.info/have/v-deo/jmGXbIOGiJ95s6s.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 ?

@thestreamer1481 5 днів тому

please any ETA for Angular 17 course ?

@TheSergy12 14 днів тому

JUST USE IT! haha Loved the video

@johnconnor9787 Місяць тому

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 Місяць тому

Didn't know Seth Rogen knew ReactJS.

@Gaijin101 Місяць тому

please make a video about Nitro

@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 24 дні тому

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.

@mohammadkhayata2042 Місяць тому

You are amzaing 💙💙

@LarsRyeJeppesen Місяць тому

Still use React?

@user-cs2py4wg3p Місяць тому

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

@shehrozmalik773 24 дні тому

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 24 дні тому

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

@onlineaid Місяць тому

Great one useQuery is better the useEffect 😊

@tomekbednarek2672 Місяць тому

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 Місяць тому

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.

@biomatrix8154 Місяць тому

IDC. I want my Angular course! 😭

@ngocngan4422 Місяць тому

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

@VidmantasB Місяць тому

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

@borisbarzotto5785 Місяць тому

gold

@arian5126 Місяць тому

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 Місяць тому

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 Місяць тому

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

@filipjnc Місяць тому

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

@gerkim3046 Місяць тому

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'

@dufifa Місяць тому

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 Місяць тому

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.

@amivag77 22 дні тому

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

@OleksandrIsaryk Місяць тому

As you say master =)

@disinfect777 Місяць тому

therefore

@xhbr93 Місяць тому

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

@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.

@sebastianestrada1311 Місяць тому

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 20 днів тому

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

@jasusyb2734 7 днів тому

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

@imdtap1448 Місяць тому

Still using react??

@nevermindmepls6773 Місяць тому

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

@supernova82 Місяць тому

@@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 Місяць тому

React + TypeScript

@pabloduran3257 Місяць тому

@@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 Місяць тому

@@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. 😂😂😂🎉🎉🎉

@xxXAsuraXxx Місяць тому

You might not need React

@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.

@DhartiMainAkash Місяць тому

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

@dheerajsinghnagdali Місяць тому

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

@mansurhamidoff1853 Місяць тому

Still using React? You might not need React))

@alexandergeorgesquire220 Місяць тому

😂

@ozgurNY Місяць тому

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

@MrLuckfinder Місяць тому

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 UKposts that will surprise you as an experienced developer. Most of the content is aimed at beginners. But you are right, this is the basics.

@thestreamer1481 5 днів тому

please any ETA for Angular 17 course ?