React Strict DOM : Cross Platform Development Made Easy

In February 2024, React Facebook team introduced React Strict DOM as an Experimental one that aims to improve and standardize the development of styled React components for web and native apps. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at Meta ship features faster, to more platforms, with fewer engineers.

In Real World, We have to maintain two separate Development team for Web Application development using ReactJS & Native Mobile App Development using React Native.  Reactjs is a library which uses React DOM to communicate with Browser API's. React Native is a Mobile Framework that helps to Development Native Mobile application for Android & IOS Platforms, Android TV, Apple TV, Watch & VisionOS.  

Problem in React DOM

React DOM package is great for creating web applications using ReactJS. It is a package that provides DOM-specific api's that can be used at the top level of a web app to enable an efficient way of managing DOM HTML elements in the context of a Web application. However, when developers want to migrate the cool features and seamless experience of their web apps to mobile devices, they hit a roadblock. The problem is, React DOM doesn’t naturally fit into the native world. This means developers often have to create a separate version of their app using React Native, which is designed for mobile platforms.

Doing this basically doubles the workload. Not only do developers have to learn and manage two different development team (React DOM for web and React Native for mobile), but they also have to duplicate their efforts to make sure both versions of the app work well and offer a consistent experience to users, regardless of the device they’re using. In certain scenarios, this process can be time-consuming, complex, and prone to errors, making it harder to keep the app updated and running smoothly across all platforms.

The existing solution for targeting web with React Native framework is to use React Native for Web. React Native for Web is a user-space library built on top of React DOM and native DOM APIs. It shims React Native components and APIs on the web. The tooling for an existing React DOM app simply maps the ‘react-native’ export to ‘react-native-web’. — Nicolas Gallagher (https://github.com/necolas)

What is React Strict DOM

React Strict DOM (RSD, react-strict-dom) represents a groundbreaking step forward in the world of cross-platform development using React. It aims to unify these development paths by offering a set of APIs and components that are designed to work seamlessly across both web and native. It achieves this by adhering to a strict subset of the DOM API that is compatible with both web and native environments. This means that developers can write their code once and expect it to run everywhere — be it a web browser, iOS, Android, etc — with minimal platform-specific adjustments.

The idea behind RSD is not just about reducing the workload for developers but also about enhancing the consistency and reliability of React applications across platforms. By standardizing the behavior of components and APIs, RSD ensures that applications behave predictably no matter where they are run. This is a significant improvement over the current scenario, where subtle differences between React DOM and React Native can lead to bugs and inconsistencies in cross-platform applications.

Furthermore, RSD integrates closely with StyleX, a CSS-in-JS library from Meta, to provide a unified styling solution that works across platforms. This integration allows developers to style their applications using a familiar CSS-like syntax while benefiting from the performance and safety features of StyleX.

Please refer the original  medium blog regarding code Implementation..