File Structuring in React Core

these are notes from Dan Abramov's deep dive on smooshcast

referring to react core library, at packages/react-reconciler/src/ReactFiberBeginWork.js

• a file for functional components
• a file for class components
• a file for suspense
• structured by phase (of work that react has to do)
• logic is similar depending on phases

it's really important that in a particular phase you're allowed to do particular things

to have a mental map of what each bit does in React, here's some html elements:

<div>
  <h1><strong>Tie</strong> <a>tle</a></h1>
  <h3>subtitle</h3>
  <span>description</span>
</div>

therefore all relevant logic is structured in

• ReactFiberBeginWork
• ReactFiberCommitWork
• ReactFiberCompleteWork

*these are the three central files in the codebase

We have been burned (in React Core development) in the past by over-abstracting things ... you have a hundred small modules and no idea how they relate to each other - Dan Abramov

so now the code is laid out in a way where you think "if this code runs in begin phase then i'll just go to BeginWork

in fact, React's (16+) codebase is written in a pattern called colocation (meaning: put related stuff as close to each other as possible), as mentioned at this point.

Kent C. Dodds argues for the benefits of colocation of code here

• Maintainability: They'd get out of sync or out of date quicker (than they already do). We'd move or delete a src/ file without updating the corresponding docs/ file.
• Applicability: People looking at the code in src/ might miss an important comment in docs/ or not comment their own code because they don't realize that there's an existing docs/ file for the src/ file they're editing.
• Ease of use: Context switching from one location to the next would be a challenge with this kind of a set up as well. Having to deal with multiple locations for files could make it difficult to ensure you have everything you need to maintain a component.

####The concept of co-location can be boiled down to this fundamental principle:

Place code as close to where it's relevant as possible

You might also say: "Things that change together should be located as close as reasonable." (Dan Abramov said something like this to me once). - Kent C. Dodds