Understanding the React Source Code, Part 1


210 points | by adamnemecek 308 days ago


  • spicyj 307 days ago

    (I work on React.)

    Note that this is based on React 15.6.2, an older version of React. In React 16 we rewrote almost the entire codebase so that one may be more interesting to look at, depending on your goals. I guess – just don't blame us for some of the strange code patterns in 15 (like that random TopLevelWrapper) that we've since gotten rid of. :)

    • ricardobeat 307 days ago

      Out of curiosity, who should we blame? Team change?

      • felipellrocha 307 days ago

        Blaming is the least productive thing when it comes to these things. Maybe the developer wrote that at midnight after a long day of work, and at that time it sounded like a good solution...

        • Klathmon 306 days ago

          I've found most times it's not even that, but that the "bad code" was in most cases the best possible code that could have been written within the needed constraints.

          You need a fix for problem "x". You can either write the ugly hack by next weekend knowing that it's going to be replaced by the big rewrite you have coming up in 6 months, or you can spend 1 month refactoring code to make a "proper fix" that will last another 5 months until the code is rewritten...

          Of course when you have an audience, they get to read into this however they feel. Some will point to the hack as an example of how awful the codebase is and how bad the developers are, others will point to it and proclaim (wrongly) how dirty hacks are never a bad thing if they work, still others will talk about how much better their idea their idea would have been even though it didn't fit your exact constraints.

          In my experience, very very few successful developers are "dumb" or "bad at programming" or whatever insults you see thrown around all the time. Most of the time it's just someone making the best of a shitty situation weighing several constraints while still keeping the product working.

          • hinkley 306 days ago

            You don’t identify the party to shame them, you identify the party as part of the Five Why’s. And then additionally to reassess your trust level when someone says they are “done” or offers you advice. Developers bank a lot on this kind of trust and shutting down these so-called “blame” exercises blinds the team. Don’t.

            People who don’t at least try to write better code every chance they get have a pretty poor understanding of “best” in a given situation. They will grow very slowly if at all, and their best isn’t good enough. And if it turns out you were the negligent party, don’t you want to know that? Don’t you want to recollect how you rationalized that piece of work and adjust your behaviors?

            Above all else, don’t count on a rewrite. It is a Once in a Blue Moon affair and if often goes wrong. It’s the worst kind of crap shoot. The worse things are the less likely the rewrite will work. Rewrites require you to recall the entire featureset and if the project is off the rails then nobody knows all of them, so any part you touch is likely to miss something important.

            Edit: the rest of a thought

        • spicyj 307 days ago

          I mean, sure – I added TopLevelWrapper so it's still my "fault", but it's not as relevant any more since most people are on React 16.

          • Kiro 306 days ago

            Why do you want to blame anyone? The point is that they fixed it.

            • acemarke 306 days ago

              I wouldn't even say "fixed", exactly, because that implies it was broken. I _would_ say that the rewrite allowed them to build a different internal implementation that solved some architectural limitations with the approach they were using for reconciliation, as well giving them a chance to clean up some legacy APIs that had been deprecated.

          • fowl2 306 days ago

            > In React 16 we rewrote almost the entire codebase


          • pomber 306 days ago

            If anyone wants to read how this changed and understand the main call hierarchy in React 16, I try to explain it in https://engineering.hexacta.com/didact-fiber-incremental-rec...

          • city41 307 days ago

            If React internals is interesting to you, I did a similar write up, but with a different approach. I start with nothing and build a tiny React clone:


            • linkmotif 307 days ago

              I’m sure this is really good, but one of the best things about React is that I don’t know anything at all about its source. Maybe it explains the build system? I was thrown by the import rewrites.

              • spicyj 306 days ago

                We did away with those recently because people found them confusing. https://reactjs.org/blog/2017/12/15/improving-the-repository... details that change and some other recent ones.

                • linkmotif 306 days ago

                  Thank you! Glad to know more about it after all this time.

                  Thank you for React! The other day I was tired of working and decided to engage in some “recreation” by upgrading 15.4->16.2. It was really smooth. Warnings introduced in 15.6 made it even easier. Ran some code mods, updated some dependencies. Done. The new excellent error handling jumps out at you right and away.

              • ramzyo 306 days ago

                >> In compiling time, components defined in JSX is translated by Babel to React.createElement() called with appropriate parameters.

                Does he mean transpiling time? Honest question, don't have any experience with web frameworks.

                • yorwba 306 days ago

                  Transpiling is a form of compiling. So, yes.

              • gimmeayrwlt 306 days ago

                Why to use any facebook's products ?

                • paulcole 307 days ago

                  > be able to take difficult feedback with grace.

                  Shouldn't it be more important for senior team members be able to provide difficult feedback with grace?

                • Bizarro 307 days ago

                  It never hurts to have a deeper understanding down the stack...

                  I have an issue with these kind of memes that are similar to the "it doesn't hurt to know Lisp or Haskell"....whatever.

                  It might hurt your goals. There's an opportunity cost involved. So you're either learning a new language or digging into the source code of React at the expense of something else.

                  It's not a zero-sum game, but closer to zero-sum then what these memes would have you believe.

                  • lucideer 307 days ago

                    You're technically right, but this seems an unnecessary criticism of a really minor infraction.

                    I would say that reading a comment that could almost be construed as dissuading learning might hurt someone's goals to a more significant degree than typing "it never hurts" very very slightly erroneously.

                    • nxsynonym 307 days ago

                      Yes but when you get down to it, almost every activity you perform daily could be considered a detriment in terms of opportunity cost, unless you are progressing towards your goals at every single moment of the day not including sleep.

                      Now if the author had said, "It never hurts to give up everything else you are doing and look at this codebase for 1 year and shirk all other responsibilities" I'd agree with you, but otherwise you're just being pedantic for the sake of it.

                      • htormey 307 days ago

                        A significant portion of my time as software engineer is spent either debugging or optimizing existing code. Having a solid mental model of how my tools or the frameworks I use work saves me a lot of time.

                        I think anyone who works with React or React native should have a rough idea of what’s going on under the hood.

                        The above article series seems to do a decent job of this for a framework people use day in and day out.

                        • iovrthoughtthis 307 days ago

                          Best get off hacknews then.

                          • allover 307 days ago

                            You'll always find a counterexample for 'it never hurts', it's a turn of phrase.

                            • pc86 307 days ago

                              How do you turn a phrase? :)

                              • 307 days ago
                                • dentemple 307 days ago

                                  very carefully

                                  • 307 days ago
                              • warent 307 days ago

                                It's a good point, although this article and the React source code is probably meant to be read in your free time, not during your work time.

                                e.g. replace consumption of something like media (netflix?) for learning more about React internals

                                • 307 days ago
                                  • holmeshe 307 days ago

                                    No, I am not learning a new language. And no, I can not see any zero-sum. I am surprised you can not see time is the cost involved here, but thanks for your time to involve.