OK, not the worst. Only two nearly identical names to remember (my-cool-component and MyCoolComponent). Let’s compare to this example of an all PascalCase file directory, a component file, and component usage:
// MyCoolComponent // // MyCoolComponent.tsx return ( <MyCoolComponent /> )
It may be a minor optimization, but we only have one name to remember in this structure, MyCoolComponent. A small victory is still a victory, and there’s actually some extra prizes that go along with something like this.
React is all about pattern recognition and reusability, which isn’t just 1s and 0s like it might seem. Code⁵ ⁶ is also super visual if you let it be. When you start to look for visual patterns in the editor UI, the difference in managing 10 different components with two names each vs. one name each is potentially increasing the speed at which you recognize visual symbols⁷ by a factor of 2! Anything to help carry the load by focusing the visual feedback you receive. Minimizing the amount of mental overhead is always a good thing, especially when maintaining design systems, inside and outside of React simultaneously.
This file structure and naming convention is specifically appealing to me because it ties very close with how I name my symbols in Sketch when designing. The less I have to translate between the two sides of my brain the better; I can infer more at a much quicker pace. The more I can figure out in design, the quicker I make maintainable decisions in code.
I'm always aiming for a more unified mental model when jamming on design or the front-end. This feels incredibly React-y in the sense of patterns. Making the switch to PascalCase in 2019 probably isn’t going to do anything bad, but it’s still an extra variable we can account for in the event of repo armageddon. I’ll check back in a bit.
¹ I bet some of you read that as “my role is very multifaceted” — we didn’t user test the company name lol
² Thanks to all who are like Dave for seeing designers as more than a just a sketchbook that knows how to html
³ Example is from 2013, but my point is still solid?
⁴ React’s official stance on how to structure a React app. https://reactjs.org/docs/faq-structure.html
⁶ The code editor
⁷ The word is the form of the symbol in this case