- 1
- 99 247
Smoosh Comedy
เข้าร่วมเมื่อ 25 มิ.ย. 2019
SMOOSHCAST: React Fiber Deep Dive with Dan Abramov
Jani and Phil got a problem. There are too many damn divs! With the help of Jenn Creighton and special guest Dan Abramov, we learn how to hack React Fiber reconciler internals to make the world a less div-ided place.
In this deep dive you'll learn how to contribute to React Fiber, and implement a new rendering mode for React.
Special thanks to Dan:
dan_abramov
The following unpaid actors were not harmed during the production of this video:
Jenn Creighton gurlcode
Phil Pluckthun _philpl
Jani Eväkallio jevakallio
Hosted by:
Jani Eväkallio smoosh_comedy
In this deep dive you'll learn how to contribute to React Fiber, and implement a new rendering mode for React.
Special thanks to Dan:
dan_abramov
The following unpaid actors were not harmed during the production of this video:
Jenn Creighton gurlcode
Phil Pluckthun _philpl
Jani Eväkallio jevakallio
Hosted by:
Jani Eväkallio smoosh_comedy
มุมมอง: 99 247
Thanks for making this tutorial. I'm trying to follow along. Some of the methods used here have been deprecated now. I managed to use the new methods. But the thing is my changes to the react source code are not reflected in the tests like it's happening in the tutorial. I tried running yarn build and then running tests. Cleared jest cache as well. Nothing worked. I'm trying to change add type lol to the div. th-cam.com/video/aS41Y_eyNrU/w-d-xo.htmlsi=BJfuNUDv5_ng44wO&t=825
55:32 why connection is not made in begin phase?
❤❤😂🎉
The way you smooshed the Twitter !!
this is an absolute gem of a video. thank you for making it💙
Such a great review of the React Fiber internals ! I love this video !
Had a hearty laugh, and a good deep dive into the React reconciler. Dan will be missed.
Such an amazing video! Thank you all for recording this \o/
Dan is always the best😘
Still relevant in 2023 :)
To people watching the first hour lost, stick around till the end it’s pretty wild.
Editor theme?
3:27 "I'm just going to share my screen... can you see anything" - 2021 in a nutshell hahaha
awesome video, but it was kind of scary to see Dan adding such complex boolean operators to decide whether to render 'div" or not in SmooshMode. I am pretty sure that was the main reason that part didn't work. a) they are not readable at all due to lot of negative logic b) they don't work and you can't fix them even though you added them 2 minutes ago.
This was so enlightening. Learnt a ton!
"Oh, React is not defined, [...] it's normal cause this file is React." Love it
Damn such a good video but the video quality is like it was filmed on an android device
Какая радость увидеть своего внука !
why I first see this in 2021...sad
So I've been putting countless hours into react and have heard the name Dan abramov a million times, yet I've never watched a video from him. Seems like a really nice guy, glad one of the top people at react seeming super nice :)
When the react god is coding, everyone just shuts up and soak the knowledge haha
Insane content, want to commit to React so badly but the source is so intimidating, but it i am slowly getting it, it is quite simple in fact
I've watched this video three times, and It's still very difficult for me to walk through the react source code now. but each time I try I feel better in understanding it. and I won't give up.
Always, lets make dan proud haha
This is really a cool. Thanks Dan
this is really amazing!
Setup tips for anyone coming here in the future: The boys are on commit 4d307de458dfdf25e704cb2ca20b0578bba8998c. It also requires an older version of node. I chose Node 8, it worked out fine, so I highly suggest using nvm. The command I guess would be: git clone git@github.com:facebook/react.git git checkout 4d307de git checkout -b smoosh echo "8" > .nvmrc nvm install 8 nvm use npm install -g yarn yarn
I enjoy Dan's talk also. Great and comfortable explanation!
Thanks Dan and team! Please keep showing more of such source code reviews. Teaches a lot about how to think like makers of library and use it like it was intended to :)
Dan‘s phone is one Nokia, cool!
Vue is better
Usually I hate watching videos on coding, I rather read, but this was extraordinary, awesome video, great walkthrough on react fiber. amazing.
Awesome video!
I have to say that I always enjoy Dan's talk.
Yeah， Dan‘s so Humble！
Same.
Can you understand what is he talking about though?
React will be around in the next 10 years!
But, what if the div has a className, hidden, aria-tag, etc...? Implementation should also check for props other than children to determine if it's a waisted div. What if it has more than one child, that would make it a container div, and so those should be kept too. I think the second implementation is still very much a hack and not yet production ready. But this is a good deep dive into react internals, thanks for that.
It already checks for other props. React.createElement function's 2nd argument is props, and any props there when changed, trigger fiber update. Children are the easiest way to show what happens behind the scenes. If the div is a container, then it is obviously kept (unless it is not affected by styles - you can see that yourself with React DevTools). I wouldn't call second implementation a hack at all, seeing how flexible it is. (doesn't update user's screen mid-building, allows for interruption)
The best explanation of React Fiber architecture I've ever seen
I’m doing some libraries but I haven’t make them public yet cause I need to finish them due to also they are being tested internally in projects that are gonna be released too, but one thing to point out is the way Dan explained the architecture of how some things of react internally works and I feel identified, I have some similar data strctures and algorithms applied without even know that react does some things almost same, that for me is really awesome 👏 , I feel like I haven’t wasted my time for getting good things 😏 Thanks for this wonderful video, Dan I recognize your hard working!, i love your work, keep it up!.
Awesome video! learn a lot by watching Dan walkthrough the codebase and implementing ReactSmoosh ;) ! Looking forward to watching another episode!
Great stuff, gives little insight on how React works internally.
This is amazing. I like this kind of videos. Thanks folks. I'm having a question just to make sure I've got the points. - The Begin work is the descending tree traversal - The Complete work is the ascending tree traversal But when / how the commit phase is handled? At each node leaving the Complete work? Or do you traverse the tree a new time (and reconcile only on the tagged node) ?
38:18 Yes I have a question! In concurrent mode, if there are only two trees, can you stop the second change you're trying to do? (e.g. the like in the previous illustration) or would that need a third tree? I don't think this question makes a lot of sense, but how does concurrent mode work in terms of: Can a frame be skipped because it leaves an old unfinished tree behind when a new render completes that replaces it? (like in the iceland vid the debouncing demo I guess)
ok he kinda answered the question 1:38:00
Great podcast, but camera shaking crazily
Look at the clock on the wall. It must be from previous century!
woah, that video chat is really awkward
Really helpful.
Awesome, Thanks
Caught on the spot.
Great video, would love to see even more React Fiber related videos, that was so interesting! Twitter being SMOOSHED was great 😂
This is so really cool stuff. Just started using react and I knew I was gonna have problems with the numerous divs.
This is fantastic. Thank you!
amazing stuff thanks @Dan