All language subtitles for 031 Context Logic & Different Ways Of Updating State_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
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
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
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
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-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
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,160 --> 00:00:05,210 And of course we can do this with functions. 2 00:00:05,210 --> 00:00:06,570 We can add a function 3 00:00:06,570 --> 00:00:11,067 that's called the addFavoriteHandler() {} for example, 4 00:00:13,810 --> 00:00:17,203 and a function that we could call removeFavoriteHandler() 5 00:00:18,350 --> 00:00:20,950 and I will also add a helper function 6 00:00:20,950 --> 00:00:24,140 which I'll name itemIsFavoriteHandler. 7 00:00:24,140 --> 00:00:27,680 That's a function which will later help us determine 8 00:00:27,680 --> 00:00:30,183 whether a given item is a favorite or not. 9 00:00:31,640 --> 00:00:33,960 Now in the addFavoriteHandler item, 10 00:00:33,960 --> 00:00:38,150 I expect to get my favoriteMeetup as a parameter. 11 00:00:38,150 --> 00:00:38,990 And then in there, 12 00:00:38,990 --> 00:00:42,810 I wanna set my user favorites to the old array 13 00:00:42,810 --> 00:00:45,570 plus this new item. 14 00:00:45,570 --> 00:00:46,500 Now for this, 15 00:00:46,500 --> 00:00:51,360 we could use userFavorites.concat 16 00:00:51,360 --> 00:00:53,532 and add the (favoriteMeetup); 17 00:00:53,532 --> 00:00:57,320 Concat is like push but returns a new array, 18 00:00:57,320 --> 00:01:01,400 and it's then this new array with that added Meetup 19 00:01:01,400 --> 00:01:03,403 which we set as our new state. 20 00:01:04,720 --> 00:01:06,360 But there is a gotcha. 21 00:01:06,360 --> 00:01:08,160 We should not do it like this 22 00:01:08,160 --> 00:01:10,740 even though it's typically will work. 23 00:01:10,740 --> 00:01:13,370 When working with useState, 24 00:01:13,370 --> 00:01:17,382 it is worth knowing that React actually does not process 25 00:01:17,382 --> 00:01:19,570 state updates instantly 26 00:01:19,570 --> 00:01:22,380 but it schedules them behind the scenes. 27 00:01:22,380 --> 00:01:25,930 And it still then processes them very quickly 28 00:01:25,930 --> 00:01:28,053 but not instantly necessarily. 29 00:01:28,940 --> 00:01:32,080 Now because of that, when you update your state, 30 00:01:32,080 --> 00:01:37,050 and your state updates depends on the latest state snapshot, 31 00:01:37,050 --> 00:01:41,620 there is a scenario where the state snapshot 32 00:01:41,620 --> 00:01:45,000 does not really reflect the latest state 33 00:01:45,000 --> 00:01:48,463 because the last state update wasn't processed yet. 34 00:01:49,760 --> 00:01:54,760 And because that is the case, there is an alternative form 35 00:01:54,980 --> 00:01:58,260 of calling this state updating function 36 00:01:58,260 --> 00:02:03,150 if you depend on that last state snapshot. 37 00:02:03,150 --> 00:02:07,200 Instead of passing the new value as I did it a second ago, 38 00:02:07,200 --> 00:02:11,580 you should pass a function to the state updating function. 39 00:02:11,580 --> 00:02:16,220 And that function will be executed for you by React. 40 00:02:16,220 --> 00:02:18,530 That function will then automatically 41 00:02:18,530 --> 00:02:21,610 receive the previous state snapshot. 42 00:02:21,610 --> 00:02:24,380 So the (prevUserFavorites) here, 43 00:02:24,380 --> 00:02:27,020 and you should return the updated state here. 44 00:02:27,020 --> 00:02:28,923 So in this case, (prevUserFavorites) where 45 00:02:30,300 --> 00:02:34,823 we then concat the {favoriteMeetup}; we get as a parameter. 46 00:02:36,210 --> 00:02:37,400 This will guarantee 47 00:02:37,400 --> 00:02:40,510 that we always get the latest state snapshot here, 48 00:02:40,510 --> 00:02:43,950 because React will execute these functions, 49 00:02:43,950 --> 00:02:46,550 which we pass through the state updating functions 50 00:02:46,550 --> 00:02:48,630 in the correct order. 51 00:02:48,630 --> 00:02:51,470 So now, we have a guaranteed that we definitely work 52 00:02:51,470 --> 00:02:54,100 on the latest state snapshot here, 53 00:02:54,100 --> 00:02:58,230 and that's therefore the better way of updating your state, 54 00:02:58,230 --> 00:03:02,800 if you depend on a previous version of that state. 55 00:03:02,800 --> 00:03:06,690 And that's now how we could add a favorite item. 56 00:03:06,690 --> 00:03:09,120 Now in removeFavoriteHandler, 57 00:03:09,120 --> 00:03:12,010 we probably can expect a {meetupId} 58 00:03:12,010 --> 00:03:15,370 which identifies the meetup that should be removed. 59 00:03:15,370 --> 00:03:17,960 And then we can update userFavorites. 60 00:03:17,960 --> 00:03:22,810 Again, with this state updating a function, 61 00:03:22,810 --> 00:03:25,580 where we get the prevUserFavorites 62 00:03:25,580 --> 00:03:27,970 and return a new state snapshot 63 00:03:27,970 --> 00:03:32,630 because here again, we rely on that previous state. 64 00:03:32,630 --> 00:03:37,120 And here we then wanna return prevUserFavorites.filter(); 65 00:03:37,120 --> 00:03:39,860 because filter returns a new array 66 00:03:39,860 --> 00:03:42,570 where we can filter out items. 67 00:03:42,570 --> 00:03:44,790 And I wanna filter out the item 68 00:03:44,790 --> 00:03:47,690 where the meetupId matches this Id 69 00:03:47,690 --> 00:03:49,203 we're getting as a parameter. 70 00:03:50,160 --> 00:03:52,190 Filter is a built in method, 71 00:03:52,190 --> 00:03:54,720 which takes a function as an argument 72 00:03:54,720 --> 00:03:57,390 which executes for every item in this array, 73 00:03:57,390 --> 00:04:00,650 and we get that item as a parameter then 74 00:04:00,650 --> 00:04:02,670 and then we have to return true 75 00:04:02,670 --> 00:04:04,210 if we wanna keep that item 76 00:04:04,210 --> 00:04:07,900 or false if we wanna get rid of it in that new array 77 00:04:07,900 --> 00:04:09,290 which has returned. 78 00:04:09,290 --> 00:04:11,090 And here I wanna return true 79 00:04:11,090 --> 00:04:16,089 if meetup.id !==meetupId I get as a parameter. 80 00:04:16,690 --> 00:04:18,260 So, if it is equal, 81 00:04:18,260 --> 00:04:21,279 we return false here because of this check, 82 00:04:21,279 --> 00:04:25,420 and that means we drop the item where the Id is equal. 83 00:04:25,420 --> 00:04:28,360 And that means that the returned array will be missing 84 00:04:28,360 --> 00:04:30,960 the item which has this meetupId, 85 00:04:30,960 --> 00:04:32,680 which is exactly what we need here, 86 00:04:32,680 --> 00:04:35,053 since we want to remove that item. 87 00:04:35,940 --> 00:04:38,680 And in itemIsFavoriteHandler, 88 00:04:38,680 --> 00:04:41,610 I just want to return a response here, 89 00:04:41,610 --> 00:04:43,120 I return a value, 90 00:04:43,120 --> 00:04:45,540 and I want to check whether... 91 00:04:45,540 --> 00:04:50,540 Let's say an item with a given Id is part of our favorites. 92 00:04:50,610 --> 00:04:53,220 And for this, we don't need to update any state. 93 00:04:53,220 --> 00:04:55,170 It's just a helper function 94 00:04:55,170 --> 00:04:58,580 where I return userFavorites.some(); 95 00:04:58,580 --> 00:05:00,400 which is a nav built-in method 96 00:05:00,400 --> 00:05:03,200 which exists in Vanilla JavaScript. 97 00:05:03,200 --> 00:05:07,520 And some also wants a function as an argument 98 00:05:07,520 --> 00:05:10,520 which executes for every item in this array, 99 00:05:10,520 --> 00:05:13,810 and this function should return true or false. 100 00:05:13,810 --> 00:05:17,980 And if at least one of the items in the array returns true 101 00:05:17,980 --> 00:05:19,990 or false with that function, 102 00:05:19,990 --> 00:05:23,930 some overall will return true or false. 103 00:05:23,930 --> 00:05:25,480 And that allows us to find out 104 00:05:25,480 --> 00:05:30,460 if some item in this array matches our condition here. 105 00:05:30,460 --> 00:05:34,910 And the condition is that some meetup.id is == meetupId 106 00:05:34,910 --> 00:05:36,910 we get as a parameter. 107 00:05:36,910 --> 00:05:38,360 So we return true, 108 00:05:38,360 --> 00:05:43,360 if we have a meetup with that Id in our user favorites. 109 00:05:43,440 --> 00:05:48,440 Now we get these free functions for changing our context, 110 00:05:48,500 --> 00:05:52,633 but at the moment these functions are never called anywhere. 8649

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