Trying React Hooks for the first time with Dan Abramov
Вставка
- Опубліковано 19 сер 2024
- 💛 Brilliant - Interactive courses on computer science
brilliant.org/fff
(Sponsored - use link to get 20% off annual subscription)
🔗 Dan Abramov on Twitter
/ dan_abramov
🔗 Follow on Twitch to get notified of live streams
/ funfunfunction
🔗Code and links featured in the video
reactjs.org/tu...
codepen.io/gae...
🔗 Fun Fun Forum: Discussion thread dedicated to this video
www.funfunforu...
🔗 mpj on Twitter
/ mpjme
🔗Support the show by becoming a Patron
/ funfunfunction
🔗 Help translate the show to your language
www.youtube.com...
💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforu.... Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfu...
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfu...
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly UA-cam shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on UA-cam.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management
I just realised Dan has facial hair in the spots MPJ doesn't.
this is mysterious
lol
They complete each other 😃
woah, dan = !mpj
@@alchuseikaekra Very attention to details! Good quality of a good programmer. ! :D
Actual discussion and use of hooks begins around 34:00 FYI
Our programming abilities reduce by 50% when someone looks over us
True
Dan: *silence*
Me: totally impressed
Seeing you intimidated by Dan, even if Dan doesn't do it on purpose, makes me think I don't need to be hard with myself, in similar situations. Huge respect for your work mate!
I was thinking the same, we don't have to. 😊
He's pretending to be naive for the content, he makes friendly facing tutorials... If you have a lot of js knowledge you can see how he immediately navigates to the correct answer at every step along his "struggles"
50:33 someone whispered "array" :D
:D
i like Dan ckuz he dont talk too much, he reduce
"mhm" --Dan Abramov
Dan Abramov is an inspiration to me.
What I really liked about this is that you were obviously showing what it's like for most developers coding something new, demystifying that early feeling of inadequacy you can get when looking at perfectly formed video or written tutorials.
Thank you so much, this is exactly what I was going for and it means a lot to hear that it is coming through!
I think Dan Abramov completes you man. Both in terms of your missing bear lines and when you're writing react.
coding part starts at 13:50. you're welcome
But I want to hear the before part too ;)
Thank you so. much. You changed my life.
you should watch from the start
@@HarryManchanda Start at 0:00 then
I was looking at Tolkien Elvish and accidentally stumbled on 'gaearon' and though hang on isn't that... Dan Abramov's github name?? And now, mystery solved. gaearon means great ocean. I will never think of Dan the same way again.
I really love the concept of the hooks, it makes me feel like if I were doing functional programming the whole day, I really look forward to see the hooks always on react’s ecosystem.
Supposed to be useful and funny as everything on my favorite channel! Thanks Mattias, for your titanium contribution, love your work
I usually get discouraged by the length of tutorial videos, then I realized this was Dan & MPJ we're talking about!
Must finish my work for the day so I can watch this on the clock.
I enjoyed a lot this video. Thanks to both of you. I would like to see more videos with the same idea of "running into problems while coding"
I love Dan, I watch his presentation where he first demoed redux every couple months, it's great. he's a cool dude.
Abramov looks like a nice guy.
It's encouraging fact that so many breakthrough people, was not graduated with a formal title.
Gettin serious final boss vibes from abramov in that thumbnail
I'm hooked!
awesome tutorial. Helped me alot to gain idea about react hooks
You are Brilliant !!! Thank you very much for this wonderful video !! I am a big fan of both of you !!
Thank you MPJ for this kind of series !!!
Next person should be Evan You. 👍
yes please!
Good to know Dan has the same background I have (VB6) hahaha. That's really cool.
You can't pass the same state to existing state, you need to paas a new refrence of state in order to work that's the most important learning point for me from this wonderful video from both of you ❤️
52:45 can someone explain what happens? Console logs the mutated array, does setSquares use the existing internal squares state or does react revert it before passing it to setSquares?
Iron man of JavaScript. Yeah you look like iron man 😉
More like a wolverine 😂
I think he looks a bit Johnny Deppish :P
Thank u for this awesome video
1:04:14 I think you should share some of your favorite Lao Tzu quotes as a closing remarks.
was asking myself why he had that tab opened the whole time
Just introduced hooks to one of our new smaller projects at work --we're finally on 16.8!-- have to say, I didn't want to like it (I'm seeing all these closures with new funcs on every render pass), but initial perf testing and the eyeball test is making me feel better. But, in spite of me wanting to not like hooks, from a code point of view, it leans things out tremendously, and I have to say...not too damn bad.
I need to implement that typing style of constant rewriting my boss will think I'm coding like crazy...
Based on the thumbnail I seriously thought this was one of those hilarious reaction videos...!
Just to I clarify for my own thinking, around the 52 minute mark, the problem was that by changing state (squares) directly, when the setSquares method runs, it does not see any change to squares. You have already modified it and what you are passing in at that point is what it already is. And, without a change in a state/hook, setSquare (setState) has no reason to re-render any of the dependent components. And, so the Square component does not re-draw even though one of its props has changed. Does that sum it up correctly?
yeah, basically you have to have a new reference to the state each time you want to render
Yep, it's all about referential equality. MPJ tried to update with the same object reference. React says hey, I just rendered that, and ignores it. This is like the behavior of PureComponents.
The creator of Redux does not have a computer science background...just saying..
PS: Love the new format!
FrontenderInASuit most of the react team at Facebook don’t have a CS background. Just goes to show...
Blog post by Dan - Things i don't know as of 2018 - overreacted.io/things-i-dont-know-as-of-2018/
You guys joke a lot.... he is more grounded in CS than most CS grads.... what you meant to say was 'he has no CS degree'
@@victornweze7230 than most ? you mean more like cs grounded than 99.99 % of cs grads
@@victornweze7230 not having a cs background is equivalent to 'he has no CS degree'.. that's what we meant
The smile on Dan's face when he realises he can see the app on localhost.
wow. I cut my teeth on VB building AOL addon apps when I was like 12 & then BASIC in TradeSchool Computer Science.
The "Class offender" LMAO!
Lol, he was being too harsh on Classes. It's weird to see a programmer who bashes the concept of a class. Mayeb he started programming with Javascript... which is prototype-based. Damn prototypes, what a weird type of object.
33:50 Uhm... we will need to turn it back into a class... right? LMAO. Classes are FAR better always, MPJ !!!
I'm new to this channel. I'm linking it. Is it just me or I detected a delay between the actual typing and the transmission? Other than tha, looked like an awesome sessio. Thanks for bringing Dan to this! Cheers from Argentina.
Dan is the man!
I love this format! I only hated when you hid VSCode and keep us in from of the browser :-). Keep going
Sorry about that, will try to figure out some way to prevent that from happening in the future.
@@funfunfunction don't be sorry. I was joking. I really like you facing some tech guru. Can you find someone of Angular team for something similar?
💛
Idea for videos: explain and solve typical technical interview problems. :)
Would a video on Symbol() be worthwhile or is there just not enough use for it?
Conceptually I get that its nice to guarantee a unique way to identify something in javascript but it would HAVE to be short lived since symbol can't be parsed to JSON so you can't really store it in a database.
The only example I can think of off the top of my head would be sticking that in the 'key' attribute in React as a lazy way of helping it identify something. (Assuming this would work, I've not tried)
This video almost got me fired from my night job ! lol could not stop watching it hehe
Great stream mpj!
VS Code is so great. And of course, both of you are awesome
VS code is the best thing since sliced bread, and only getting better. Microsoft truly is a completely new company these days.
It's always morning in somewhere around the world.
Could you or Dan post a link to a finished version of the code?
Have you ever thought about adopting your content to podcasting? Would love to be able to listen on-the-go =)
Cheers,
Murphy
56:35 how?
Have you considered a case when you simply need to access the current value of the state from inside closure? :D
This is awesome collab mpj. Is there a way you can stream the solution of the take away problem?
What do you mean?
What is the extension for pair programming called? :D
I think it is "Live Share" marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
or "Live Share Extension Pack" marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack
thank you
Regarding "classes" = "garbage": A class is little more than an abstraction of a factory function--namely, its constructor. Without mutability, there is no meaningful difference between the Board class with its renderSquare() method and the Board factory function with its inner renderSquare() function. Really, the only meaningful difference is that the inner function, unlike the member function, is truly encapsulated--a benefit only realized because JavaScript does not support privacy of instance members, except through the use of closures.
littlefinger nailed it
Why don’t you come back bro?
Oh, a top anime crossover :D
better than avengers
what book about programming is recommended from MPJ ?
Dan can see Your localhost? what kind of setup does that! sounds cool
Visual Studio Live Share!
@@funfunfunction Thanks
Read the docs
This dude sounds like a Cristolph Waltz character in a Tarantino movie
Dan is soo cool
Who is this guy he is hilarious
2 sides of a common argument I've seen manifest in recent years of working at 24:40
I don't think it's a right practice to empathize with a developer's preference for sub-optimal coding practices.
When the result might be 1,000+ users suffering latency, literally getting blocked in their workflows.
Should we empathize with the surgeon who chooses to use his precision hand surgical knives tools over newer robot assisted methods such as laparoscopies ?
Where other people's lives are concerned, high standards should always be upheld--- and programmers shouldn't get any excuse for doing otherwise.
Is there any reason why you don't use arrow functions for functional components?
I think it was used to stress that this component is just a function. Programmers from another languages would be confused that you can assign function to variable. Ofc. you can say that they should learn JavaScript basics at first before running into framework, but I personally think that describing an framework should be as easiest as possible for everyone. Even for newcomers
What tool were you using for the interactive coding session? I tried jumping back to the intro but didn't really hear you discussing it.
Visual Studio Live Share
Top 10 Dev facial hair.
So question, This is the first time hearing about react hooks. are they supported in Typescript?
Yes. Hooks are just simple functions.
A quick google on hooks typescript gave me this as the first result: levelup.gitconnected.com/usetypescript-a-complete-guide-to-react-hooks-and-typescript-db1858d1fb9c?gi=54a20e70399d
How you can share the VSC screen with him and the Localhost?
Visual studio live share
can we expect to have new/amended react devtools for hooks any time soon?
I think the progress is tracked here!
github.com/facebook/react-devtools/issues/1215
@@funfunfunction I wonder will it support useReducer like redux dev tools.
Is there a possibility you can cover php/CSS styling of woocommerce pages carts and process, It's a little more tricky than I was expecting
who is watching in 2024 ?
Dan Abramov is my idol
I knew him in Russia when we were kids, he is really amazing
1:04:32 Good docs fo React? Are we reading the same homepage? Docs is short and undetailed. For styling there is almost nothing!Then I'm checking StackOverFlow and after all answer there is a sentence: "it was not mentioned by react docs, ehhh"
As Dan often says, can you please provide specific feedback on what is unclear? Short and undetailed does not necessarily mean bad if we're talking quickstarts, for example. In addition, what are you comparing to? While there are certainly docs that are amazing, such as the Rust book, I find the React docs remarkable considering the age of the project.
@@funfunfunction You're right and I wasn't obvious. React docs is short and undetailed (but well written) and yeah very good for quick starting. What I'm missing is the detailed parts. As I mentioned when I faced styling parts and how to wire up classes and import them or how to create a global base style besides components style etc I was shocked that it only appears in FAQ only for 4 sentences. There was another part I couldn't find but I don't remember.
Anyways thank for the video it was very handy and keep up the good work! (Y)
which ide you use??
VSCode. Not an actual IDE, but an editor.
tic tac top. Nice video.
Being on a small screen, I wish the face cams wouldn't be on.
Nice that website
When you have a someone to tech you something 😂
react has remarkably good dogs
Also check out overreacted.io, Dan's blog which really takes a deep dive into react hooks
Lao Tzu quotes 😹
I actually don't like every tutorial shoes that you can pass an arrow function directly to property. This is huge bottleneck in memory and can be called memory leak. Instead it should by just a pointer to function (not anonymous) in order a garbage collector could manage the memory
React sucks. Worked on a react project for 3 years and I’m now working on a project using Vue and increased productivity by 2x
Have you counted how many times you use the word "like"? I hadn't actually noticed but my wife alerted me to the fact and now I wait and hear it a lot.
Yeah, sorry about that. The problem with live streaming is that you cannot stop talking and if I start paying too much attention to my wording choices I freeze up. I expect it to improve once I get more confident.
Like is the new um... 😀 No worries I still like you... Oh no! There's no like way to get away from the word like.
Is this FB's fault?
@@funfunfunction Don't worry, you're doing great. Don't listen to the naysayers... I wasn't trying to dis. It was just an observation and constructive feedback.
Haha I remember it used by Americans way before FB - TM calls it a filler word. When I went to toastmasters international they do this thing where you count ums and ahs and like etc
Irn Bru -
The number of times you're rewriting because you're typing wrong is frustrating ahah
kiddos
L I K E L I K E L I K E L I K E L I K E
the lag on the typing makes this unwatchable. Can you fix that?
Yeah, it's one of the kabillion little things that is on the improvement list. :) Sorry about that.
you wast the time by showing something that is not really important, and I think it's just for showing yourself. you had to let dan to do something more, he had only last 3 minutes and for this little time tell many things to audience but all of the other time is wasted.