All language subtitles for 019 Using the useEffect Hook_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,070 --> 00:00:05,470 Now, as a final step in this application, 2 00:00:05,470 --> 00:00:09,760 I wanna come back to this button in the header, 3 00:00:09,760 --> 00:00:12,040 to this HeaderCartButton. 4 00:00:12,040 --> 00:00:14,290 Everything works in this application, 5 00:00:14,290 --> 00:00:17,350 but I wanna play a little animation on this button 6 00:00:17,350 --> 00:00:20,200 whenever we add an item to the cart, 7 00:00:20,200 --> 00:00:22,150 or also when we remove an item, 8 00:00:22,150 --> 00:00:25,133 so whenever the amount of items in the cart changes. 9 00:00:26,200 --> 00:00:29,730 And for this, I already prepared something in the CSS file 10 00:00:29,730 --> 00:00:32,170 which I provided to you earlier. 11 00:00:32,170 --> 00:00:34,460 I set up a little CSS animation here 12 00:00:34,460 --> 00:00:37,823 which makes the button bump and change its scale. 13 00:00:38,780 --> 00:00:41,840 Now, we just need to make sure that this class, 14 00:00:41,840 --> 00:00:43,520 which starts this animation, 15 00:00:43,520 --> 00:00:46,433 this CSS class is added to the button. 16 00:00:47,340 --> 00:00:51,680 And for this, here I'll add a little const btnClasses, 17 00:00:53,810 --> 00:00:56,980 and I'll simply set this equal to a string 18 00:00:56,980 --> 00:01:00,270 using the template literal notation with back ticks 19 00:01:00,270 --> 00:01:02,430 instead of single quotes. 20 00:01:02,430 --> 00:01:05,553 And here, I will always add classes.button. 21 00:01:06,590 --> 00:01:11,100 But then, conditionally, I wanna add the animation class. 22 00:01:11,100 --> 00:01:13,840 Now, to show you how it works, I will add it right away, 23 00:01:13,840 --> 00:01:16,440 not conditionally but always for the moment. 24 00:01:16,440 --> 00:01:18,543 And that's the bump class. 25 00:01:19,850 --> 00:01:22,120 And now, here, for a class name on the button, 26 00:01:22,120 --> 00:01:25,223 I set this equal to btnClasses. 27 00:01:26,470 --> 00:01:27,327 If you save that and reload, 28 00:01:27,327 --> 00:01:29,810 you'll see this bump animation here. 29 00:01:29,810 --> 00:01:32,700 It only plays one, but later it should play 30 00:01:32,700 --> 00:01:34,713 whenever this cart changes. 31 00:01:35,800 --> 00:01:38,883 To make that happen, we can utilize useEffect. 32 00:01:40,220 --> 00:01:43,720 We haven't used it thus far in this application 33 00:01:43,720 --> 00:01:48,530 because we had no traditional side effect up to this point, 34 00:01:48,530 --> 00:01:52,610 no local storage access, nothing like this. 35 00:01:52,610 --> 00:01:54,540 Of course, you could add such features, 36 00:01:54,540 --> 00:01:56,190 but here we simply don't have it. 37 00:01:57,040 --> 00:01:59,900 Therefore, here I will utilize useEffect 38 00:01:59,900 --> 00:02:01,740 to play this animation. 39 00:02:01,740 --> 00:02:03,960 And therefore, here in the HeaderCartButton, 40 00:02:03,960 --> 00:02:05,707 I'll import useEffect, 41 00:02:07,190 --> 00:02:12,190 and then call useEffect here in this component function. 42 00:02:12,490 --> 00:02:15,020 Now, we pass our effect function to that 43 00:02:15,020 --> 00:02:17,693 and then our array of dependencies as you learned. 44 00:02:18,990 --> 00:02:20,900 Now here, in this effect function, 45 00:02:20,900 --> 00:02:24,220 I wanna do one simple thing in the end. 46 00:02:24,220 --> 00:02:25,790 I wanna change my btnClasses 47 00:02:25,790 --> 00:02:29,480 to include the bump animation class, 48 00:02:29,480 --> 00:02:33,610 and then I wanna set a timer which removes that class again 49 00:02:33,610 --> 00:02:38,230 so that when it's added again in the future, it again plays. 50 00:02:38,230 --> 00:02:41,560 So therefore, I will also import useState 51 00:02:41,560 --> 00:02:43,700 because we'll need to reevaluate 52 00:02:43,700 --> 00:02:45,520 and re-render this component 53 00:02:45,520 --> 00:02:49,053 when that animation class is added conditionally. 54 00:02:50,010 --> 00:02:51,513 So here, I'll call useState, 55 00:02:52,480 --> 00:02:56,210 set this to false initially because this will control 56 00:02:56,210 --> 00:02:58,960 whether or not the button should be animated, 57 00:02:58,960 --> 00:03:01,720 and I'll name it btnIsHighlighted, 58 00:03:05,310 --> 00:03:08,653 and setBtnIsHighlighted. 59 00:03:09,540 --> 00:03:12,480 Of course, the state names are up to you. 60 00:03:12,480 --> 00:03:16,912 Here, in useEffect, I'll then call setBtnIsHighlighted 61 00:03:16,912 --> 00:03:18,123 and set this to true. 62 00:03:20,970 --> 00:03:24,833 Then, as a next step, here for my btnClasses, 63 00:03:25,932 --> 00:03:28,570 I will not always add the bump class, 64 00:03:28,570 --> 00:03:32,160 but I'll check if btnIsHighlighted is true. 65 00:03:32,160 --> 00:03:35,130 And if that's the case, classes.bump is added, 66 00:03:35,130 --> 00:03:37,070 otherwise an empty string is added, 67 00:03:37,070 --> 00:03:40,223 so no extra CSS class is added then. 68 00:03:41,480 --> 00:03:44,170 And I do this here because, since I'm updating the state, 69 00:03:44,170 --> 00:03:47,790 the whole component will re-execute when that state changes. 70 00:03:47,790 --> 00:03:49,700 So this line will also change again, 71 00:03:49,700 --> 00:03:53,020 and the updated classes will be picked up down there. 72 00:03:53,020 --> 00:03:55,200 Now, of course, I don't always 73 00:03:55,200 --> 00:03:57,760 wanna change the state though. 74 00:03:57,760 --> 00:04:02,220 I only wanna change it if my items changed 75 00:04:02,220 --> 00:04:05,290 and if the length is greater than zero, 76 00:04:05,290 --> 00:04:08,853 so if there is at least one item in the cart, let's say. 77 00:04:10,120 --> 00:04:15,120 Hence, here I will check if cartCtx.items.length 78 00:04:15,670 --> 00:04:19,160 is equal to zero, in which case here I'll just return 79 00:04:19,160 --> 00:04:22,450 so that the rest of this effect function doesn't execute. 80 00:04:22,450 --> 00:04:24,060 Because this should only execute 81 00:04:24,060 --> 00:04:26,663 if we have at least one item in the cart, let's say. 82 00:04:27,620 --> 00:04:30,350 Now, we need to add this as a dependency. 83 00:04:30,350 --> 00:04:32,950 But if I add cart context like this, 84 00:04:32,950 --> 00:04:35,990 this effect would rerun whenever anything 85 00:04:35,990 --> 00:04:37,890 about my cart context changes. 86 00:04:37,890 --> 00:04:39,563 And that's not what I want here. 87 00:04:40,690 --> 00:04:44,780 Therefore, I'll use object de-structuring 88 00:04:44,780 --> 00:04:49,780 to pull out the items, to get them out of my cart 89 00:04:49,800 --> 00:04:52,940 so that here I can just refer to items 90 00:04:52,940 --> 00:04:56,670 and pass items as a dependency, 91 00:04:56,670 --> 00:04:59,970 so that not the entire context, but only the items array 92 00:04:59,970 --> 00:05:02,473 is a dependency for this effect function. 93 00:05:03,380 --> 00:05:07,120 Of course, we can also pull this out a little bit earlier. 94 00:05:07,120 --> 00:05:11,023 And, for example, also then refer to just items here. 95 00:05:14,330 --> 00:05:17,140 Now, if we save this, if I reload, 96 00:05:17,140 --> 00:05:20,630 if I click add, watch the button in the top-right corner. 97 00:05:20,630 --> 00:05:25,000 It now bumps, but only the first time I add something. 98 00:05:25,000 --> 00:05:28,430 The reason for that is that then this class is added, 99 00:05:28,430 --> 00:05:30,920 but since it's currently never removed, 100 00:05:30,920 --> 00:05:32,640 thereafter, it never changes 101 00:05:32,640 --> 00:05:35,190 because the animation is actually only played 102 00:05:35,190 --> 00:05:38,360 when this class is added for the first time. 103 00:05:38,360 --> 00:05:40,960 Therefore, we should also remove the class 104 00:05:40,960 --> 00:05:42,830 after the animation finished. 105 00:05:42,830 --> 00:05:45,083 And I'll do that by setting a timer here. 106 00:05:45,980 --> 00:05:50,110 I'll set a timer which fires after 300 milliseconds 107 00:05:50,110 --> 00:05:53,790 because that's the duration of this animation here. 108 00:05:53,790 --> 00:05:56,170 I played over 300 milliseconds, 109 00:05:56,170 --> 00:06:00,550 so after that duration, I trigger a function 110 00:06:00,550 --> 00:06:04,220 where I set btnIsHighlighted back to false. 111 00:06:04,220 --> 00:06:05,730 And if that's false, 112 00:06:05,730 --> 00:06:09,060 this here will ensure that an empty string is added 113 00:06:09,060 --> 00:06:12,720 to the classes string instead of the bump class. 114 00:06:12,720 --> 00:06:16,203 So that will remove that CSS class from the render to DOM. 115 00:06:18,070 --> 00:06:20,910 Now, I also wanna add a cleanup function 116 00:06:20,910 --> 00:06:23,500 where I clear that timer 117 00:06:23,500 --> 00:06:26,023 in case that component should be removed. 118 00:06:27,030 --> 00:06:29,270 This can't happen in this application, 119 00:06:29,270 --> 00:06:30,970 the button is always there, 120 00:06:30,970 --> 00:06:34,070 but it's still a good practice to clean up any timers 121 00:06:34,070 --> 00:06:37,440 or any other side effects that might be ongoing 122 00:06:37,440 --> 00:06:40,390 because you started them in useEffect. 123 00:06:40,390 --> 00:06:42,890 So here, I'll return my cleanup function. 124 00:06:42,890 --> 00:06:46,050 You learned that if you return a function in useEffect, 125 00:06:46,050 --> 00:06:47,800 this will be called automatically 126 00:06:47,800 --> 00:06:50,470 as a cleanup function by React. 127 00:06:50,470 --> 00:06:52,923 And here, I'll call clearTimeout and clear that timer, 128 00:06:54,850 --> 00:06:58,350 so that when this effect reruns, we clear the timer. 129 00:06:58,350 --> 00:07:01,890 And actually we do need this here now that I think about it 130 00:07:01,890 --> 00:07:04,530 because, of course, this timer can be set again 131 00:07:04,530 --> 00:07:06,140 before it expired. 132 00:07:06,140 --> 00:07:10,240 If we add multiple items rapidly after each other, 133 00:07:10,240 --> 00:07:12,650 we wanna clear the old timer 134 00:07:12,650 --> 00:07:15,310 and make sure that a new timer is set 135 00:07:15,310 --> 00:07:17,320 and the old timer is, well, cleared. 136 00:07:17,320 --> 00:07:20,330 So we definitely should have that cleanup function here. 137 00:07:20,330 --> 00:07:21,383 And now we do. 138 00:07:22,250 --> 00:07:24,980 And with that, if we save this, if I reload, 139 00:07:24,980 --> 00:07:29,350 you see, whenever I add an item, this button bumps. 140 00:07:29,350 --> 00:07:31,670 And that's just a little visual tweak, 141 00:07:31,670 --> 00:07:36,240 and in addition, as a nice side effect, no pun intended, 142 00:07:36,240 --> 00:07:40,220 it's another practice and exercise of useEffect, 143 00:07:40,220 --> 00:07:42,763 which you need for handling side effects. 11570

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.