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) ?
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)
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)
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, 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.
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
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. ua-cam.com/video/aS41Y_eyNrU/v-deo.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 :)
Such an amazing video! Thank you all for recording this \o/
Had a hearty laugh, and a good deep dive into the React reconciler. Dan will be missed.
Какая радость увидеть своего внука !
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?
this is an absolute gem of a video. thank you for making it💙
55:32 why connection is not made in begin phase?
Such a great review of the React Fiber internals ! I love this video !
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
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) ?
Great video, would love to see even more React Fiber related videos, that was so interesting! Twitter being SMOOSHED was great 😂
The best explanation of React Fiber architecture I've ever seen
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
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
Usually I hate watching videos on coding, I rather read, but this was extraordinary, awesome video, great walkthrough on react fiber. amazing.
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 way you smooshed the Twitter !!
amazing stuff
thanks @Dan
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!.
This was so enlightening. Learnt a ton!
This is really a cool. Thanks Dan
This is so really cool stuff. Just started using react and I knew I was gonna have problems with the numerous divs.
Awesome video!
Editor theme?
React will be around in the next 10 years!
Great stuff, gives little insight on how React works internally.
This is fantastic. Thank you!
I enjoy Dan's talk also. Great and comfortable explanation!
this is really amazing!
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.
Great work. Thanks.
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
To people watching the first hour lost, stick around till the end it’s pretty wild.
Awesome, Thanks
Caught on the spot.
Look at the clock on the wall. It must be from previous century!
Still relevant in 2023 :)
woah, that video chat is really awkward
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
Really helpful.
Great podcast, but camera shaking crazily
Damn such a good video but the video quality is like it was filmed on an android device
Dan is always the best😘
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.
ua-cam.com/video/aS41Y_eyNrU/v-deo.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