All language subtitles for 011 Updating State That Depends On The Previous State_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
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
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,050 --> 00:00:03,700 So in the last lecture I showed you 2 00:00:03,700 --> 00:00:06,630 how you can use one state instead of multiple states. 3 00:00:06,630 --> 00:00:08,630 And I did talk about it there. 4 00:00:08,630 --> 00:00:10,790 Now the way I'm updating my state here 5 00:00:10,790 --> 00:00:13,160 is not entirely correct though. 6 00:00:13,160 --> 00:00:15,500 It technically would work, 7 00:00:15,500 --> 00:00:18,700 but in niche cases it could fail, 8 00:00:18,700 --> 00:00:23,120 and it's simply not a good practice to update it like this. 9 00:00:23,120 --> 00:00:25,100 So what's the problem here? 10 00:00:25,100 --> 00:00:28,290 Here, I'm depending on my previous state 11 00:00:28,290 --> 00:00:29,960 for updating the state. 12 00:00:29,960 --> 00:00:32,670 In this case, we depend on the previous state 13 00:00:32,670 --> 00:00:34,660 because we used this one state 14 00:00:34,660 --> 00:00:37,070 instead of three-states approach 15 00:00:37,070 --> 00:00:39,560 and we need to copy in the other values 16 00:00:39,560 --> 00:00:41,530 so that we don't lose them. 17 00:00:41,530 --> 00:00:44,920 Hence we depend on the previous state snapshot 18 00:00:44,920 --> 00:00:47,120 to copy in the existing values 19 00:00:47,120 --> 00:00:50,960 and then just override one value with a new one. 20 00:00:50,960 --> 00:00:53,980 Now whenever, and that's another key rule 21 00:00:53,980 --> 00:00:55,480 which you should memorize, 22 00:00:55,480 --> 00:00:58,170 whenever you update state 23 00:00:58,170 --> 00:01:01,500 and you depend on the previous state, 24 00:01:01,500 --> 00:01:04,150 so for example, as we do here in this object, 25 00:01:04,150 --> 00:01:06,500 but also if you would be managing a counter 26 00:01:06,500 --> 00:01:09,200 which you increment by one, for example, 27 00:01:09,200 --> 00:01:10,920 whenever you update your state 28 00:01:10,920 --> 00:01:12,940 and you depend on the previous state, 29 00:01:12,940 --> 00:01:15,120 you should not do it like this 30 00:01:15,120 --> 00:01:17,690 but you should use an alternative form 31 00:01:17,690 --> 00:01:19,983 of this state updating function. 32 00:01:21,350 --> 00:01:23,850 Instead of calling it like this, 33 00:01:23,850 --> 00:01:28,083 you should call it and pass in a function to that function. 34 00:01:28,960 --> 00:01:31,520 So you call the setUserInput function 35 00:01:31,520 --> 00:01:33,420 and you pass a function to it, 36 00:01:33,420 --> 00:01:36,373 for example, such an anonymous arrow function. 37 00:01:37,510 --> 00:01:41,580 And this function, which you pass to setUserInput here, 38 00:01:41,580 --> 00:01:44,580 will automatically be executed by React. 39 00:01:44,580 --> 00:01:48,930 And it will receive the previous state snapshot 40 00:01:48,930 --> 00:01:51,410 for that state for which you're calling 41 00:01:51,410 --> 00:01:52,430 the updating function, 42 00:01:52,430 --> 00:01:55,253 so in this case, for this object state here. 43 00:01:56,170 --> 00:01:59,210 So we'll get the previous state snapshot, 44 00:01:59,210 --> 00:02:04,210 and now here, we should return the new state snapshot. 45 00:02:05,630 --> 00:02:06,700 So instead of this function 46 00:02:06,700 --> 00:02:08,900 which we passed to the state updating function, 47 00:02:08,900 --> 00:02:10,833 we return the new state now. 48 00:02:11,720 --> 00:02:13,310 And that now could be, 49 00:02:13,310 --> 00:02:16,000 or in this case, should be, our object 50 00:02:16,000 --> 00:02:19,870 where I copy in the key value pairs from the previous state 51 00:02:19,870 --> 00:02:22,100 with the spread operator, 52 00:02:22,100 --> 00:02:24,240 but where we then also override, 53 00:02:24,240 --> 00:02:28,893 in this case here, enteredTitle with event.target.value. 54 00:02:30,600 --> 00:02:34,210 Now why should we do it like this instead of like this? 55 00:02:34,210 --> 00:02:37,200 In many cases, both will work fine, 56 00:02:37,200 --> 00:02:39,120 but keep in mind that I mentioned 57 00:02:39,120 --> 00:02:42,010 that Reacts schedules state updates, 58 00:02:42,010 --> 00:02:44,690 it doesn't perform them instantly. 59 00:02:44,690 --> 00:02:46,890 And therefore, theoretically, 60 00:02:46,890 --> 00:02:50,700 if you schedule a lot of state updates at the same time, 61 00:02:50,700 --> 00:02:53,070 you could be depending on an outdated 62 00:02:53,070 --> 00:02:54,970 or incorrect state snapshot 63 00:02:54,970 --> 00:02:56,653 if you use this approach. 64 00:02:57,550 --> 00:03:01,010 If you use this approach, React will guarantee 65 00:03:01,010 --> 00:03:03,930 that the state snapshot it gives you here 66 00:03:03,930 --> 00:03:05,650 in this inner function, 67 00:03:05,650 --> 00:03:09,110 will always be the latest state snapshot, 68 00:03:09,110 --> 00:03:13,030 keeping all scheduled state updates in mind. 69 00:03:13,030 --> 00:03:14,740 So this is the safer way 70 00:03:14,740 --> 00:03:16,810 to ensure that you always operate 71 00:03:16,810 --> 00:03:19,760 on the latest state snapshot. 72 00:03:19,760 --> 00:03:23,320 So you should use this function syntax here 73 00:03:23,320 --> 00:03:27,750 whenever your state update depends on the previous state. 74 00:03:27,750 --> 00:03:29,580 That is something you should memorize. 75 00:03:29,580 --> 00:03:32,230 If your state update depends on the previous state, 76 00:03:32,230 --> 00:03:33,733 use this function form. 77 00:03:34,950 --> 00:03:36,800 With all of that though, 78 00:03:36,800 --> 00:03:39,760 I wanted to show this because these are key concepts 79 00:03:39,760 --> 00:03:42,220 which you're also going to see again and again 80 00:03:42,220 --> 00:03:43,430 throughout this course 81 00:03:43,430 --> 00:03:45,720 and throughout a lot of React projects, 82 00:03:45,720 --> 00:03:48,230 but here I will actually comment out 83 00:03:48,230 --> 00:03:50,110 all of these alternatives 84 00:03:50,110 --> 00:03:51,150 and I will switch back 85 00:03:51,150 --> 00:03:54,590 to that multiple states approach instead, 86 00:03:54,590 --> 00:03:56,200 which we initially had. 87 00:03:56,200 --> 00:03:57,900 So let's comment out all of that 88 00:03:57,900 --> 00:04:01,200 and go back to this initial approach. 89 00:04:01,200 --> 00:04:03,060 I just wanted to show the alternative 90 00:04:03,060 --> 00:04:05,510 because it is a valid alternative, 91 00:04:05,510 --> 00:04:07,250 you will see it in many projects, 92 00:04:07,250 --> 00:04:09,780 you will have scenarios where you need it. 93 00:04:09,780 --> 00:04:12,240 And this thing regarding the, 94 00:04:12,240 --> 00:04:14,480 if you depend on the previous state, 95 00:04:14,480 --> 00:04:17,160 use this approach thing here, 96 00:04:17,160 --> 00:04:19,589 that's something you should keep in mind in general, 97 00:04:19,589 --> 00:04:22,750 because you will often depend on a previous state, 98 00:04:22,750 --> 00:04:25,500 not just if you merged state like this 99 00:04:25,500 --> 00:04:27,210 but also in other scenarios, 100 00:04:27,210 --> 00:04:30,070 like the counter which I mentioned, for example. 101 00:04:30,070 --> 00:04:31,620 So that's why I mentioned this. 102 00:04:31,620 --> 00:04:35,373 Nonetheless, let's go back to this multi-state approach now. 7774

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