The Psycological Effects of useEffect

Let us know in the comments below. And as always, thanks for watching.

Hello, everyone, and welcome to React Summit. I hope you're having fun so far, and I hope you enjoy this talk that I'm about to give and it doesn't ruin your fun. That would be great since we're all stuck at home.

OK, so I like to start my talks with a story so you can sympathize with me. And that's mostly it. And you can understand is like she's seen some stuff. Yeah.

OK. So this story dates back to Octoberfest last year. So last year, I was already working on code sandbox, and we had Octoberfest, which is a great idea. Don't get me wrong. I love Octoberfest. I work on an open source project. So I just get a free t-shirt. That's about what it is to me. And so we decided that we should like update our code to hooks like we had some stuff on hooks. But we have pretty much still everything on glasses. And we were like, OK, so we can get the community to update this file by file. This sounds like a great idea. Like we didn't think that it was going to blow out of proportion and we'd still be reviewing PRs four months later. But guess what happened? We still reviewed PRs four months later because we, turns out, we did not understand news effect like we thought we did. Like we made a code, edited it on the Internet. We were like, we know this. Turns out we didn't. And like there were things that just didn't work. And we didn't quite know why. And there were things that worked but didn't make any sense. So this is when I started to look deeper into use effect.

And then eventually started like changing the rest of the stuff. So the good news is that all our code is in Hooks now. I think. I mean, there's probably like two files that are not in Hooks. Because no one wants to touch them. But in general, all our code is in Hooks. The bad news is it took a long time. It took so long I even wrote a book in between to try to explain Hooks to myself.

So let's go, right? Okay, so my talk's title is the psychological effects of use effect. Because I realized that the best way to get people to watch your talk is to give it a funny title. And probably, that's funny. And I'm like, yeah, I know. I try my best.

Okay, so my name is Sarah. My last name is Vieta. But you don't have to pronounce that. I know it has two i's. And unless you're Portuguese, it just sounds weird. And I'm a developer at Consentbox. Like I said, I'm from Portugal, also known as tiny Spain or the country where Ronaldo is from. And I am NikitaFTW on Twitter. You can ask me two q's, because the first one was taken by the TV show.

Okay, so we're gonna talk about React, right? Are we excited? React? Yes. React is JavaScript. And JS stands for Job Security. I will share this weed in every single talk I do, because I think it's too good. It's so good. It's also very true. Okay. Are you hooked yet? According to this counter that is here for no apparent reason, you are not.

But let's carry on. Okay, so let's go back to the time where we had component life cycles. Back when we were all sweet summer childs, we had component life cycles. And there were a lot of component life cycles. So you had like component amount... Okay, you had a lot more, but they're all unsafe underscore now, so I'm not gonna count those. So you had component amount, component update, component did update, and components will unmount. When is... There were a lot, but... And here's the trick. Can you guess when component did update ran? This is not like an actual talk in front of a human being, so I can't wait. But it ran when the component updated. Because the names were pretty straightforward. Like component to amount will run when the component mounts. It makes sense, right? Thanks, slides.

Can you guess when useEffect runs? That's the thing. It runs everywhere. So you have this tiny function that's supposed to take the place of... or component lifecycles. Math. Okay. So this is the base of a useEffect. So you have useEffect and then it returns a function in which you do all your beautiful code magic. None of us actually do code magic. And then you return. And then you need to also return a function, and this is where you do all your cleanups. So, for example, if you're attaching event listeners, this is where you remove your event listeners. Great. And this right here, this beautiful summer child, is the dependencies array, and this is where you put your dependencies. We'll get into the dependencies array later because I think that's the trickiest part to get a hold of. So, to do all of that stuff, we have three things to play with. Okay, cool.

So, this is the sandbox that we'll be working with. Because if I don't use code sandbox in a presentation, I don't know what will be of me. Okay, there we go. So, all good. So, let's first go over the return and what I have here just so that it all makes sense to you. So, I have something called React Spectrum that just does this, which is, like, a fence. Just do not show lorem ipsum text. And then I have a button that toggles the fancy text. And I have a button that increases the counter, the number of years that's there. And then we also have this div that has the show text. So, nothing major is going on here, okay?

Okay, so, let's do the first one, which is the first thing that I also showed you. So, let's come here and say, const for some reason, useEffect, and yeah. So, now here, we run our magic. And in case you were having any doubts, my magic is console.logs. So, I'm going to do a console.log, which I know is not very exciting, but. Can you hear my keyboard? There we go. Hey, okay. So, if I toggle the text or if I do anything, it updates. Okay, it runs. Sorry. So, what does this actually mean? So, you don't have a dependencies array, so every time useEffect, your component remounts and, sorry, re-renders, we'll get to the remounts later. Uh-huh. I'm kidding. I'm not kidding. Actually, we'll get to it later. So, the console.log runs again because the useEffect runs again and there's a console.log. Cool. All of that makes sense, right? Let's restart this, clean all those console.logs.

All of that makes sense, right? Let's restart this, clean all those console.logs. So, the next thing that we had was that you could run it on start, right? Let's run it on start. I mean, it's not here. Sorry. I don't know anything that you don't. I just screwed up typing it.

Okay, so let's reload this page. Yeah, there we go. So, I'm going to reload it a bunch because Code Sandbox tries to keep the state and I don't want that. In this case, you usually want that.

Okay, so, cool. So, now it runs on start and now let's toggle the fancy text. We purse the counter, do all the stuff, and nothing happens. Okay. So, when I read about useEffect, it said, and if you use an empty array, so, like, whatever is in the array gets triggered. So, whatever is in the array, when it changes, the useEffect runs again. So, if the array is empty, then it never runs again. And the thing about that is that if you say it like that, it sounds like a hack. Like, if you say it like, oh, it's because it's an empty array and technically if it's an empty array, it never runs again. It just kind of sounds like a hack.

So, let me, actually, so, let me create a const here. And I'm just going to create a const called Conference. I'm going to call it React Summit. And I'm going to put the conference in here. And now let me reload it again, apparently two times. And if I do this, nothing happens. That's because this never changes. So, that's what you need to think about. It's not that it's an empty array. It's that whatever is in the array never changes.

So, that's the magic of it. The fact that it's an empty array mostly just means like nothing's ever going to change in the array. Like, I can put numbers in here. I can put text. I can put, I don't know, sup. Sup will never change. Exactly. It's not a valid dependency because it never changes. So, if it never changes, then it never reruns. So, that's how you must think. Okay.

So, this is because of the state that we talked about. I promise. Exactly. That's what you need to think about. I guess, I hope that makes sense. Okay.

So, now let's do something only when the counter changes. So, what I want to do is say, like, okay, toggle the fancy text, increase the counter, but I don't want it to run when the fancy text is toggled. So, let's put it here. Here. So, what we need to track is the years-past. So, we want to keep years-past, and the same, we want to say what, sorry, I forgot the English words, I'm just gonna go with, like, I'm just gonna go around it, around the English word. So, we want to say, whenever years-past changes, we want to run this again. Okay, cool. That makes perfect sense. Right? Yay! Okay, cool. So, when I increase the counter, it runs. But, but, and that's gonna, it runs on start, right? That's a problem, because we said we only wanted to run when years-past changed, but that's the catch, right? When your component bounds, years-past changed. I have an unmount for this component here in the index.js, and we can test that it runs again.

So if I uncomment this button right here, look at this very pretty button, and I toggle home, and then toggle it again, you can see that it runs again. Let me go back. No one needs to see this button anymore. You can see that it runs again. And this is because when it mounts, it technically goes from zero to setting the state. Like, it's a fraction of a millisecond. I don't know, I think it's a nanosecond that's below a millisecond or something, weird thing like that. I don't know, I failed math. But yeah, it runs again. But we don't want that.

Okay, so let's do like the really terrible way. And I don't do this, but let's do the terrible way so that we can see why that doesn't work. So if it equals five, if it's different than five, then we want to run this because it starts as five. And if I reload, I get nothing. And then I increase the counter, and I get that. So that's great. But you can't do this with something that's a boolean.

Okay, so let's try this again. Okay, so let's create a new state. So I'm going to say const isMtnMobtinMob. I screwed up two letters, that's amazing. Set is mounted. And this is equal to useStates. And it's going to start as false. Okay, so what I want to check is that if it's mounted, right? And I need to add isMtn here. And I want to say set isMtn equal to true. And I want to reload this page. And it still runs. And you may be wondering why does this even run on start. That doesn't make any sense. If I increase the counter, it still runs, right, all good. Let me move this down. And let's reload the page. And you can see, like, nothing basically changes. And now let me do this and increase the counter, and now it doesn't run.

Okay, so let's go over what the hell just happened, okay? So if I put isMtn here, right, so this means that the value tracks if the integer is passed changed and if isMtn changed. So what does it do? It renders the first thing, and it says, okay, isMtn is false, so set isMtn to true. So then it re-renders the component again. And what React means, or what I mean when I say re-renders, it means that it literally runs this function again, but says, okay, so now that we changed this isMtn to true, let's pass it as basically a parameter to this function. So technically everything in React is a prop.

Not really. So basically it runs the function again, and in this case isMtn is already true. So we console.logs it. So that doesn't work. I mean there are ways to make it work obviously, so you just need to put it in another way or remove the isMtn. And why does it work when there is no isMtn? So if I reload this page, now it does exactly what we wanted. That's because it doesn't track the value of isMtn. It only tracks this value. So this one builds the first time, and it's like, okay, this is changed, and it goes all rushing. I don't know why React is rushing. And it says set this mounted to true. But then when it renders, when set is mounted to true, it actually doesn't run this because it's not tracking it. So a lot of the times I just want to say that you may get this error, which is a warning or an error, whatever you want to call it, and it says that it's missing a dependency, sometimes that's what you want because sometimes you don't want to keep track of something that you're using because you're using it for a very specific reason.

Okay, but that's hacky, right? Because literally we get React yelling at us, and that's the least we want. Imagine like just Dan yelling at you from your window. Where is the dependency? Okay, keep carrying on.

So let's talk about refs, right? I don't know why I said write, but let's talk about refs. So what do you usually use refs for? We usually use refs for jQuery-ing the hell out of our code, so if I'm going to create a ref and I'm going to remove this, and I'm going to say const. I'm going to call it isMounted so that I don't have to change the name later because otherwise I'll forget. It calls useref. And then what we usually do is that we set a ref here, and we say that the ref is mounted, and then we can console.log. So if isMounted.current. So when this is actually mounted, just console.log isMounted.current. And if I reload this, you can see that we get the button, and I can do weird stuff like click on the button or something like that if I want to, and it toggles the fancy text. Isn't that beautiful? Not the point, though.

But let's come here, and let's copy this into here. Wait, sorry. Okay, there we go. And let's set this to false. Okay, cool. So if I reload this page now, you get hey, because I forgot to remove the red from here. So that was not too bad. I realized in time.

Okay, it's been five years, no console.log. All is perfect. How do we make this run? So let's come here, and let's say isMounted.currents equals true. And it still doesn't work. Okay. And I'm going to do something, and you're going to go what the fuck is she doing. So if I do this, it now does exactly what we want. And this one I can explain very well.

So what's happening here is that is mounted so a ref actually doesn't re-render your component. A ref is mutable. A ref is reactive. So that's really good. So which means that if I put it in here, it actually just carries on. So it's like as mounted is true. Okay. Cool. It's not true. And then it says if it's mounted and is mounted is true. So one really good way to do this and cheat the system is to put it afterwards. And then when it actually re-renders the component, when you change it, is when it actually runs because it's mutable. So that's a very interesting thing about useRep is that besides being a fancy way to do, you know, what do you call it, jQuery fancy stuff, it's also a mutable value that doesn't require your component to re-render. Cool.

Okay. So now let's talk about unmount. Right. Okay. So I'm going to remove all of this. And actually, I'm not going to remove this. So if it's mounted at current, and what I want to do is that, actually, I'm going to remove all this. Sorry. I'm just having issues keeping to a script. So return. And I said, okay, let's return something. And let's return a console log that says unmounted. Okay. Cool. So we got a hey. Okay. Exactly what we expected. We got a hey. And let me reload. But if I increase the counter, we get unmounted. Because the way that unmounted works on hooks is not exactly the same way it works on the old component life cycles. Because the thing is, a hook, the return function of a hook runs the unmount function after the hook has finished running. So in this case, it actually doesn't run when the component unmounts. It runs when the hook unmounts. So it's a cleanup effect for your own hook. I don't know why hook is starting to sound weird. But it's a cleanup effect for this hook. So when you run it on unmount, actually on component unmount, what you need to do is run it without anything here. And then, that's what the button was here for. Let's unhide the button.

Again, so this basically just removes home. Oh, I removed actually the button. There we go. So actually this toggles home. So if I toggle home here, you can see that it unmounts. And that's the way that you can get it to unmount like that.

And now, let's look at some weird stuff. Okay, one thing that keeps happening to me – so one issue that I have is that I'm used to running functions. So I'm running functions, so just going to end and blah, blah, blah. Function. Beautiful. And then I'm like, if not blah, just return false or return null or something. Like I do this a lot. And you may have something in here that's like – so if I do if years past is different than 5, return null. Sounds good, right?

So increase the counter. And otherwise, puzzle.log. There we go. Beautiful. There we go. So now increase the counter. And actually, nothing happens. Oh, sorry, because I'm not tracking the years past. It's like, actually, nothing happens. Isn't that weird? Okay, so now increase the counter. And this doesn't run. Wait, give me a second. Years past is different than 5. Return null. Oh, I screwed up. Sorry.

Okay, so let's just return null from this. Oh, let me reload the page. Why does this one keep bugging me out? Every time I try to do this. Return. Okay. Okay, so I know exactly what happened. And you're going to probably have to cut this. But I trust you, man, you can do this. Okay. Okay, and nothing happened. And that's because we're literally not returning anything. So let's try to do one thing. That is going to make you padlock. So you're supposed to return a function, right? So let's do something like if usePassed is different than 5. Okay, let's do 6. Whatever. Let's just return null. So this is something like shh, don't look at the error. It kind of tells you what's going to happen. Okay, so if usePassed is different than 6, then return null. Do you like that? So, okay, so I'm just going to tell you this, you cannot return null from a useEffect. Because it will give you the type error DestroyIsNotAFunction. Which is very emo, I like it, I'm not complaining. But it's very aggressive and, like DestroyIsNotAFunction is not just... yeah. So what happens is the internals of React probably name the function that you return, so this, as Destroy, and it basically says DestroyIsNotAFunction. But I want to show you also something funny, which I know there's a reason for this, but if you put on Define it's good. Anyway, okay, that's good.

Okay, let's do one last thing. And just because I want to show you how you can take this to a stupid, very aggressive extreme, so let's say setShowText equal and let's get the previous value of setShowText, so now you can do that by saying, by doing this, so you can also call setShowText and pass it a function and that gets the previous value. and equal to not show. Okay, so basically this does this. Oh, sorry, and we need to run this on showTextChange. And basically this does this. And why is that? This is because I think I'm going to break code sandbox, so let me just give it an error. Did I already break code sandbox? I think I did. Oh, no. Okay, all good. So this is because what we're doing is that we're setting, okay, setShowText to the opposite of what it has, which makes sense. So it basically toggles it. But when you toggle it, this runs again. So I can show this with another thing. So let's add the ref back. So ref equals a button, and let me add a ref. So console.button equals useRef. Okay, so now let's say setCounter equal to counter plus one. And I need to get this value. Counter plus one, all good. Actually not all good. There's an error here. SetCounter is not defined, because I called it yearsPast. It gets the counter. And now if I... And I add showText here. So, like, if I increase the counter, actually, nothing happens. But if I do this, one value goes up. But it doesn't keep running. What if we do something worse? So I say return.

And in order to return, what I'm going to do is say button.current.click. Button.current.click. Oh, okay. Sorry. Don't yell at me. And now it does this. Isn't that great? Isn't that just 10 out of 10? Okay. So what's happening here? You start this effect, and it says set yearsPast to 1 more year. All makes sense, right? But when you return it, and it actually doesn't track if you change this, so it's all good. Sorry. And comment. Add line comment. So if I do this, and I increase the counter, it's all good, because it runs when the show text changes. But what happens in here is that add line comment. Thanks, Goods and Wants. What happens here is that, whenever this effect finishes running, I then click the show text button, and that just makes everything go banana. So if I click this, everything goes bananas. I just wanted to end with this, because I think it's important. And I think I'm out of time. Just look at it. It's beautiful. And that's use effect, everyone. Okay. Cool.

Okay. That's all I have for today. I hope you like it. If you like my style of teaching, I wrote a book, like I mentioned in the beginning, and you can find it at the Pina Data Guide to React. It mostly goes about the ecosystem of React and explaining a lot of the hooks and what are some stuff that I use that help me to learn React and to use it more efficiently. Yeah. And that's it. Thank you so much for having me. I hope this has taught you something. And I hope it was fun. And enjoy the rest of the day. Have a good day. Bye.