React Design principles
- Composition: React is based on the idea of composing components, which are reusable pieces of code that can render UI, manage state, and handle lifecycle methods. Components written by different people should work well together, and adding functionality to a component should not affect other components using it.
- Common Abstraction: React tries to avoid adding features that can be implemented in userland (outside the core library). However, sometimes it does add features if they are widely used, incompatible, or inefficient in userland. This way, React can raise the abstraction level and benefit the whole ecosystem.
- Escape Hatches: React is pragmatic and driven by the needs of the products written at Facebook. It does not follow any dogmatic paradigms, but rather adapts to the situation. Sometimes, it provides escape hatches for users to access lower-level APIs or features that are not supported by React.
- Stability: React avoids breaking changes and strives to be backwards compatible. When it does introduce breaking changes, it provides codemods (scripts that automatically update your code) or warnings to help users migrate. It also follows semantic versioning to indicate the level of changes in each release.
- Interoperability: React can work with other libraries or frameworks without imposing any constraints or assumptions. It also supports different rendering targets, such as the browser, server, or native platforms.
- Scheduling: React has a built-in scheduler that prioritizes different types of work based on their importance and urgency. It can also pause, abort, or reuse work as needed. This allows React to be responsive and adaptive to user input and device capabilities.
- Developer Experience: React aims to provide a pleasant and productive developer experience. It has helpful warnings and error messages, devtools for debugging and inspecting components, and features like hot reloading and fast refresh that enable fast feedback loops.
- Debugging: React makes debugging easier by providing clear and descriptive stack traces, component names, and source maps. It also supports time-travel debugging with tools like Redux DevTools.
- Configuration: React tries to minimize the amount of configuration and boilerplate code required to use it. It has sensible defaults and conventions that work for most cases, but also allows users to customize and extend them as needed.
- Beyond the DOM: React is not limited to the DOM (Document Object Model), which is the browser’s representation of the web page. It can also render to other targets, such as native apps, canvas, SVG, or custom renderers. This makes React more portable and flexible.
Buy us a coffee