JavaScript Closures in React Hooks

Original talk "Getting Closure on React Hooks" by Shawn "swyx" Wang at JSConf.Asia 2019 in Singapore. Find it at • Can Swyx recreate Reac...

[@OrPhEeUs]

Don't hate on w3s, it's much more approachable for beginners than other resources.

[@download333]

It's gotten a lot better than it was. Like 12 years ago it was just a useless content farm taking up the top google results. Now it's got a lot more useful information.

[@dogakorkmaz213]

Im loving it

[@ZOCCOK]

As a complete beginner I have found it to be extremely useful, don't know how it was in the past, but today it is amazing.

[@md.mohaiminulislam9618]

It still does not go into details. The try it yourself section is super useful. But need to go to mdn, if I really want to learn about a topic.

[@aantoniou96]

​@@ZOCCOK As a beginner you don't (by definition) know what a good resource is. W3Schools is not one of them.

[@boredomindex3353]

He is the only person I know who could explain closures in less than 3 mins. Thank you!!!

[@fieryscorpion]

C’mon bro, Don’t hate on w3 schools. That site’s great!

[@josephjasonbuhain8253]

Nice insight but w3s is very useful especially for beginners though.

[@radoslavsk8591]

Only its seo is wonderful, the .q of info is misserable

[@TJ-hs1qm]

congrats you invented a class

[@smilefriend7171]

lol

[@SoyAmurita]

As android developer i understood the thing he explains once i saw ur comment

[@mikeandrewfernandez9797]

Yo, I've been trying to read 3 pdfs and multiple web resources for this closure thing. But only this short video was able to touch my comprehension in terms of closure. Bro, thank you!

[@j.r.r.tolkien8724]

W3S is great for getting a quick refresher and testing things out.

[@alfanzain9031]

Don't hate w3s. Hate people who use FOO and BAR as variable

[@ShiloBuff]

W3School came out way after I learned programming. But I'm no fool, it's actually a pretty useful website. Not only for simple learning, but also can be useful for API/documentation. The layout makes things pretty easy to read tool.

[@octubre_lilaka]

I know people don't really like w3s, but w3s was really helpful for me when I started programming

[@ninhdang1106]

I just got asked this question in the interview 😂 was wondering when you are even going to use it practically until I saw this video

[@hellelo.5840]

He learned from w3 schools, ungrateful, this is the type of person you shouldn't have relationship with.

[@dheepshemare5833]

This was the best explanation!

[@20cmusic]

Haters hate w3s.

[@TOBIKOLO]

best short yet

[@edcarlo]

That's how global scope works, that's why we have a global and local scope.

[@iantimmis651]

"Functional programming" like this is just OO in disguise

[@chetanchandel8850]

this is such a great explanation

[@abdullohkarimov4396]

What is the full version of it?

[@justafreak15able]

it gets shit done

[@SH-zf7in]

Don't roast w3s like that 😢😢😢😭

[@mfsbo]

Commenting to remember this is great example

[@caasieu]

This is the ONE!

[@manjunathkadlimatti3245]

The audacity to disrespect w3schools

[@simomoujami5616]

Too bad I was looking for Closures in Angular, but this doesn't apply because it's for "React Hooks".

[@yachujoshi]

What series is this? Can someone provide me the source?

[@shubitoxX]

It's in the description kzbin.info/www/bejne/gXuzYnhjjpKrr9E

[@savire.ergheiz]

Hate it or not w3s has its own shiny time and still persist to this day 😁

[@31redorange08]

Wrong title? React hooks?

[@invinciblemode]

This is the basis for how react hooks work dummy

[@31redorange08]

@@invinciblemode Sure.

[@ayomidediekola2505]

​@@invinciblemode It wouldn't kill you to reply without the “dummy”, js.

[@invinciblemode]

@@ayomidediekola2505 yeah but it’s less fun.

[@xpointer483]

@@invinciblemodeDisrespecting someone is not fun. Grow up.

[@jonopens]

Literally nothing to do with react hooks from the context of the clip

[@inigocilveti3287]

Except that's exactly how hooks work lmao

[@YouTubePL666]

@@inigocilveti3287 except that closures are way older that hooks :P I wonder when they will discover currying....

[@xpointer483]

@@inigocilveti3287Plz explain how are hooks formed that way. The only thing that I can think of is that, the components behave with this same concept. The child components’ variables and functions are scoped away from its outer (parent) or sibling component which is why we can risk naming functions with the same name as we have in parent without any consequence.

[@inigocilveti3287]

@@xpointer483 kzbin.info/www/bejne/gXuzYnhjjpKrr9E&ab_channel=JSConf You can take a look at that video to see what I mean. Closures ar a key concept to understand how hooks work.

[@albertoyoldan288]

How does this related to recursion is this the same method as closure?

[@milesstripling373]

Not familiar with js, but when you use the keyword “let”, i know that is to declare a mutable variable. However, when you call getAdd(), why doesn’t foo go back to 1? Is it something to do with the const add = getAdd()?

[@priapulida]

it's only called once, which means foo is only set to 1 once. the const just means the name "add" can't be reassigned, but the content of non-primitives still can change, in this case the foo variable in the function object "add"

[@szalaytamas3184]

​@@priapulidahow is it run only once?

[@szalaytamas3184]

​@@priapulidanvm I gotit

[@emjizone]

Mathematicians: "stateful functions" aren't functions.

[@Aubregines]

Made me choke and realize that I will never ever touch this atrocity ever

[@emjizone]

@@Aubregines What "atrocity" ? "stateful" functions (methods) ? Closures ? JavaScript ? Math ? Shared variables ? Global variables ? Private variable ? KZbin ? Your keyboard ? What ?

[@Aubregines]

@@emjizone stateful functions, but JS is quite high in the atrocity scale as well

[@emjizone]

​@@Aubregines closure is a highly valuable concept both in math and computer science, and objects with states and methods are indeed very useful to build and deploy counters and interfaces without too much scope, stability and portability issues. The pattern isn't the issue, here. It's silly use might be in some cases, of course, but that's another debate. What is terrible is the use of the word "function" for something that is clearly *not* a function by definition. And this is not specific to _JS_ at all. It's a bad habit inherited from the _C_ and _Pascal_ era. You'd have to look for fanatically function-oriented languages like _Lisp_ , _Haskell_ or _Mathematica_ to start seeing implementations of things which physical state is so well hidden and abstracted out of the syntax that you can start treating them like actual functions (compose them, reciprocate them, etc…) without cumulating documented or visible effects. But remember that *the whole point of programming is to get some effects* in the end, meaning *we are, in fact, only dealing with states,* no matter how much the language abstract that for you. Inside the machine and in all parts of the universe in general, "stateless" isn't a concrete thing, just an idea.

[@ShaharHarshuv]

Functional programming is fun 🎉

[@j.r.r.tolkien8724]

Indeed.

[@gauravvan]

So ducking cool!

[@AK-vx4dy]

Genius explanation!!! But some injustice to w3achools, maybe they time passed but 10-15 years ago it was concise knowledge source.

[@edwarddejong8025]

Unfortunately, the to reader of code, this hidden state (and you don't know how many of them are lurking) makes it hard to reason about a program. Only in the browser IDE can you see how many closures were created. A very bad idea for maintainability.

[@Euquila]

guys, he was just cracking a joke. chill

[@forgivenessforness2043]

What statefullness means in this context?

[@veganfoodtruck4829]

Bruh. You just figured out functions are classes in js.

[@last.journey]

I wish the some day we would be able to program web with c# more is more boys

[@syamkumar3318]

❤

[@rayeesdot310]

now i know something

[@Jade_Hanson]

lolol W3S saves lives

[@MissElyseaVlogs]

🙌🏽

[@lekdup_11]

🎉

[@eXelerator97]

But why don't we just create a class with private fields instead?

[@herman751]

It does the same thing under the hood, classes are just syntax sugar.

[@20cmusic]

Class doesn't really exist in javascript.

[@xskrish]

That's an Object Oriented Programming concept, JS is supposed to be functional. However with Typescript, you can create classes with private fields and everything, not saying that you can't do that in JS, it's just that JS was created to solve a different problem and shouldn't be considered a replacement for Java , say.

[@hanzofuma]

Some people hate OOP and want to do it the functional style way if you don't mind you can go with OOP. OOP's main concept was encapsulating states into objects this is why it existed

[@deadchannel8431]

@@20cmusic wdym class doesn’t exist in js? It does quite clearly exist

[@vivekkoul4428]

I didn't get the last part. How const add = getadd() works? Even though foo value has changed but still everytime we call add, foo is assigned value as 1. What i am missing here?

[@kirankamath5891]

add is storing the function returned by getadd() , this function is forming a closure with outer function i.e getadd , so it has access to its local environment as well as its outer lexical environment. Since foo value is getting updated by one on every call , its updated value will be accessible on calling add();

[@vivekkoul4428]

@@kirankamath5891 pls tell me one thing. When we return from a function, all the variables in its scope get totally removed from stack. So in this case, when we call add() first time, it returns foo =2 and after that add() is removed from stack and along with it, its local variable foo. And when we call next time add(), won't it again start from scratch i mean won't foo will be 1 again?

[@kirankamath5891]

@@vivekkoul4428 yes sir that's the beauty of closure, it will still retain the value of its local variable as well as it's lexical environment even if the outer function gets removed from stack

[@vivekkoul4428]

@@kirankamath5891 so do you mean here we put add() deliberately inside another function to make sure local variables of add() doesn't get removed from the memory?

[@kirankamath5891]

@@vivekkoul4428 here add is the reference to that inner function which will have access to its local variable

[@late.night.creation]

Can someone explain to me why “let foo = 1” doesn’t reset the value everytime the function is called?

[@numoru]

Linear it reads once

[@numoru]

Like old CRT tvs

[@zeez7777]

If you think this is enhancing security in any way opposed to making it harder for yourself to do mistakes then you are mistaken.

[@jikaikas]

Looks cool , whats the application for this

[@darentok8608]

React hooks, like useState

[@darentok8608]

Like how it works.

[@iSaac-kp5lk]

What about const

[@Jandrei365]

Can I present Java to you?

[@Godrose]

😂

[@dafivers4127]

W3s is fire this guy lost all credibility with that line.

[@pguti778]

Dislike because of the W3S thing

[@sourabhkulkarni1731]

Best explanation of closure !!!!

[@charlesthompson8938]

Then you must have used W3S only once…

[@ezekielflores2114]

Foo = foo 🤔 what my head is shaking

[@DillonRedding]

*laughs in OO*

[@user-ti1kc7qk3n]

나는 W3S 좋아하는데...

[@guillemgarcia3630]

hey there, gonna blow your mind you can do this, and you skip a closure let dosomething { let a = 3 something = () => { a += 1 console.log(a) } } no need to create useless js anon funcs

[@warguy6474]

w3 is great if you dont want all the bullshit and you just quickly need to know syntax

[@numoru]

Chat got better

[@coolemur976]

Ah yes... this is a great example of functional programming that tries to implement OOP patterns. State in functions is not intuitive. This is a job for classes and private fields. Some may argue, that it's just a syntax sugar. Well, at least it's more intuitive way to structure your code. Unless you want to spend time searching for "hidden features" in your functions...

[@mrajkishor331]

One like for w3schools

[@cscs6587]

Easily

[@ogawde7]

switch to ts

[@sohanagate3037]

Cfbr

[@yognaut]

Alternative way to do this, just use a scope block: { let foo = 1 function getAdd() { return ++foo } } getAdd() Saves the extra function declaration

[@NexushasTaken]

so, you can access the function inside a block from outside?

[@YouTubePL666]

No this is a very bad example as this behaviour is inconsistent across browsers and is in fact incorrect. "use strict"; will make that function declaration scoped locally, so you will get Reference Error which is the correct behaviour

@@KZbinPL666 even if we declare a variable with var then assign the getAdd function? is it still considered bad practice?

[@coomservative]

this is how debounce works

[@54peace]

Hater spoted.

[@charlesbinet2301]

Or use classes

[@chologhuribangladesh7792]

W3Schools fan be like 😡😡

[@hasanassidiqin9497]

Console

[@ash_177]

Dude don't bash w3 schools, I got 3 stars on JS in w3 schools :

[@ytadi9229]

Ain't w3schools have fixed it's content now?

[@tomjones8293]

we all understand closure easy.. but what is it for ? where is it used in real world example... what real problem is it solved with real example e.g a framework uses it to solve this that ? useless

[@furkannarin2844]

PUHAHAHAHA and you cant mess because it is still out of scope lol

[@Alguem387]

That's just a class but worse

[@urssaf343]

Then there's foobar examples... smh

[@rankarat]

React is the most overrated framework out there. There are much better frameworks than Facebook one.

[@WiseWeeabo]

please never do this

[@yoni532s9M5w]

Why foo and not num? Bad practice

[@hza.609]

ugly fn in fn..... js .....

[@NexushasTaken]

damn, js script is so weird.

[@dustinscroggins6256]

Lmaoo

[@ewdlop1]

nothing to do with JScript it is FP

[@kevklash]

You definitely DON'T trust a guy that says they have found W3S useful just once.

[@infeza3255]

best short yet