Ilya's tips on good react code.

ilya-klimov-component.md

Tips

Note, all fields tagged with (?) symbol are my assumptions and can be discussed.

The component is good if it has good goals.

• Criterias
  • Encapsulation
    • Private fields (?)
    • Closure (?)
  • Normalization
    • To not keep something in state if it can be computed
  • Optimization
    • Early optimization is root evil
  • Unity of style
    • HOC | RenderProps | Redux | Hooks | Context API (?)
  • Exotic things
    • Avoid!!!
  • Testability
    • It doesn't mean that there're tests, just means we've understanding if something works.
• Project Structure
  • Keep files as component names (not index.js-es)
• StoryBook
  • Story Driven Development (SDD)
    • Decorators
    • Folder Structure via components/...
• Redux
  • If you dare enough to use redux, then at least with ducks (?)
  • Why redux-saga / redux-observable
    • Sockets
    • Delaying updates, waiting for them, etc
• How to import
  • first section - global imports
  • second section - local imports for module, not file ../
  • third section - local imports for file ./
• First
  • Focused
    • Single Responsibility (see below)
  • Isolated
    • One of the problems of CSS
    • Component shouldn't know when and where it's going to be used
  • Reusable
    • Pass renderItems and allow to redefine styles
  • Simple
    • < 100-200 lines
    • < 5-6 imports
    • Сontrol amount of props
  • Testable
    • Dependency injection over importing (via Context API)

Others:

• SOLID
  • Single Responsibility
    • Start describing your component and if there's an 'and', so there'is a possibility that you break this rule.
• Patterns
  • Fabric
  • Security