React vs React Native: Key Differences and When to Use Each

React and React Native share a name, a component model and most of their mental model, but they target different platforms. React builds user interfaces that render to the browser DOM (and, with a framework, to HTML on a server). React Native uses the same React to build iOS and Android apps that render real native views. So “which is better?” has a simple answer: neither. You pick by platform, and many teams use both.

This guide explains the real differences with a side-by-side example I ran, corrects a few claims from the 2023 version of this post (React Native has changed a lot since), and ends with a decision checklist.

The Short Version

Same Component, Two Renderers

The clearest way to see the difference is to write the same small component both ways. Here is the React DOM version, using HTML elements:

import { useState } from 'react';

export function GreetingDom({ name }: { name: string }) {
  const [count, setCount] = useState(0);
  return (
    <div className="card">
      <h2>Hello, {name}</h2>
      <button onClick={() => setCount(count + 1)}>Tapped {count} times</button>
    </div>
  );
}

And the React Native version, using React Native’s core components and StyleSheet:

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export function Greeting({ name }: { name: string }) {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello, {name}</Text>
      <Pressable onPress={() => setCount(count + 1)} accessibilityRole="button">
        <Text>Tapped {count} times</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 8, backgroundColor: '#eef2ff' },
  title: { fontSize: 20, fontWeight: '600' },
});

The logic is identical: same useState, same props, same event handling. What changes is the vocabulary. There is no div or button in React Native, text must be inside <Text>, and styles are objects rather than CSS classes.

To check how close they are, I rendered both to HTML with React 19.3. The React Native component went through React Native for Web 0.21, a compatibility layer that maps React Native components to DOM elements. Output, trimmed:

React DOM component  ->
<div class="card"><h2>Hello, Ada</h2><button>Tapped 0 times</button></div>

React Native component via react-native-web ->
<div class="css-view-g5y9jx r-backgroundColor-14vocev r-borderRadius-1xfd6ze r-padding-nsbfu8">
  <div dir="auto" class="css-text-146c3p1 r-fontSize-adyw6z r-fontWeight-1kfrs79">Hello, Ada</div>
  <button role="button" tabindex="0" type="button" class="css-view-g5y9jx ...">
    <div dir="auto" class="css-text-146c3p1">Tapped 0 times</div>
  </button>
</div>

So one React Native component can run on iOS, Android and the web, but on the web it produces generic markup with generated class names. Notice the title became a div, not an h2. For content sites where semantic HTML and SEO matter, a regular React web app is still the better tool; see React SEO.

How React Native Works Today

Much of what you may have read about React Native “bridges” is out of date. Since version 0.76, the New Architecture is enabled by default. It replaces the old asynchronous bridge between JavaScript and native code with JSI, which lets JavaScript call native code directly without serializing messages, along with the Fabric renderer and TurboModules. Since React Native 0.82, the New Architecture is the only option. Hermes, a JavaScript engine built for React Native, is the default engine.

Two corrections to the old version of this post: React Native components do render real native views (a <Text> becomes a native text view), and its performance claims about “avoiding the bridge” were muddled. In practice, React Native performance problems usually come from rendering too much JavaScript work on interactions, not from the architecture.

Starting a Project

For the web, React’s docs recommend a framework (Next.js, React Router) or a build tool such as Vite; Create React App was deprecated in February 2025. For mobile, the React Native docs recommend a framework too, namely Expo, because most apps need routing, native APIs and native dependency management from day one:

# React web app (Vite)
npm create vite@latest my-web-app -- --template react-ts

# React Native app (Expo)
npx create-expo-app@latest my-mobile-app

You can still create a React Native app without a framework using npx @react-native-community/cli@latest init, which suits teams that need full control over the native projects.

Pros and Cons

React (web)

• Pros: runs anywhere with a browser, instant updates on deploy, the largest ecosystem of any UI library, server rendering and static generation for SEO and fast first loads, and a component model that carries over to React Native.
• Cons: it is a UI library, so routing, data fetching and rendering strategy come from a framework or your own choices; and too much client-side JavaScript can hurt performance.

React Native (mobile)

• Pros: one codebase and one team for iOS and Android, real native UI, fast refresh during development, access to native APIs through Expo and community modules, and code (logic, types, state) shared with a React web app.
• Cons: you still need platform knowledge for native modules, store submission and device-specific bugs; iOS builds need macOS and Xcode; very graphics-heavy apps may be better served by native code or a game engine; and upgrades across major versions take planning.

The old claims that React Native has “a small community”, “lacks documentation” and “is not suitable for complex apps” do not hold up. It powers many large production apps, its documentation is extensive, and the core team and companies such as Expo and Microsoft actively maintain it.

Which Should You Choose?

Moving Between Them

If you know React, React Native will feel familiar within a day: components, props, state, hooks, context and libraries such as Redux Toolkit work the same way. What you will need to learn is the component set, Flexbox-based styling without CSS, mobile navigation patterns, and the build and release process for the app stores. For React fundamentals first, read React core concepts.

Conclusion

React is for interfaces that run in the browser; React Native is for native mobile apps; both use the same React. Choose by where your users are. If they are on the web, use React with a framework. If they need an app from the stores, use React Native with Expo. If you need both, share the logic and let each renderer do what it does best.

FAQs