React Design Principles
React's design philosophy emphasising composition, escape hatches, and practical solutions for building maintainable, scalable user interfaces through component-based architecture.
-
Composition
Components written by different people should work well together, enabling functionality additions without causing rippling changes throughout the codebase.
-
Common Abstraction
Features implemented incompatibly or inefficiently across many components are baked into React itself to benefit the whole ecosystem.
-
Escape Hatches
Provide imperative APIs or temporary working solutions when useful patterns cannot be described declaratively, ensuring accessibility for developers of all skill levels.
-
Stability
Value API stability by studying internal usage, adding deprecation warnings, and backing out changes that are too early or require strategic preparation.
-
Interoperability
Enable gradual adoption and interoperability with existing systems, allowing teams to use React for small features without full rewrites.
-
Scheduling
Schedule and split work based on UI knowledge, prioritising user interactions over background work to avoid dropping frames and maintain responsiveness.
-
Developer Experience
Provide helpful developer warnings by understanding common mistakes internally and anticipating them when adding new features.
-
Debugging
Use props and state as breadcrumbs to trace UI mistakes to their source, ensuring state is available to React directly rather than trapped in closures.
-
Configuration
Avoid global runtime configuration options in code, keeping composition central to React’s design.
-
Beyond the DOM
Maintain renderer-agnostic design to enable improvements across platforms and form engineering teams around products instead of platforms.
-
Implementation
Prefer boring, disposable code to clever abstractions, prioritising correctness, performance, and developer experience over elegance.
-
Optimised for Tooling
Use unique, verbose names to enable safe automated changes via codemods and easy custom lint rules without false positives.
-
Dogfooding
Prioritise internal Facebook usage to maintain sharp vision and focused direction, which counter-intuitively benefits the broader community.