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 :)
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.
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 :)
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) ?
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!.
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)
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)
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
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.
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
"Oh, React is not defined, [...] it's normal cause this file is React." Love it
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 :)
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?
Какая радость увидеть своего внука !
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/
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
55:32 why connection is not made in begin phase?
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 :)
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 !
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) ?
The best explanation of React Fiber architecture I've ever seen
Great video, would love to see even more React Fiber related videos, that was so interesting! Twitter being SMOOSHED was great 😂
Awesome video! learn a lot by watching Dan walkthrough the codebase and implementing ReactSmoosh ;) ! Looking forward to watching another episode!
3:27 "I'm just going to share my screen... can you see anything" - 2021 in a nutshell hahaha
Usually I hate watching videos on coding, I rather read, but this was extraordinary, awesome video, great walkthrough on react fiber. amazing.
The way you smooshed the Twitter !!
React will be around in the next 10 years!
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!.
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)
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
This was so enlightening. Learnt a ton!
amazing stuff
thanks @Dan
This is really a cool. Thanks Dan
Editor theme?
I enjoy Dan's talk also. Great and comfortable explanation!
This is so really cool stuff. Just started using react and I knew I was gonna have problems with the numerous divs.
Great stuff, gives little insight on how React works internally.
To people watching the first hour lost, stick around till the end it’s pretty wild.
Awesome video!
This is fantastic. Thank you!
Dan‘s phone is one Nokia, cool!
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
this is really amazing!
Great work. Thanks.
Awesome, Thanks
Caught on the spot.
Still relevant in 2023 :)
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
Dan is always the best😘
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.
Look at the clock on the wall. It must be from previous century!
Great podcast, but camera shaking crazily
Really helpful.
woah, that video chat is really awkward
Damn such a good video but the video quality is like it was filmed on an android device
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
why I first see this in 2021...sad
❤❤😂🎉
When the react god is coding, everyone just shuts up and soak
the knowledge haha
Vue is better