Hotwire vs React in Rails: Key Differences and When to Use Each

In Rails, Hotwire offers a server-driven approach to build interactive apps with minimal JavaScript by updating HTML over WebSocket or AJAX, while React is a client-side JavaScript library that builds UI with components and manages state in the browser. Hotwire keeps most logic on the server, making it simpler and faster to start, whereas React provides more control and flexibility for complex frontends but requires more setup and JavaScript knowledge.

Quick Comparison

This table summarizes key factors comparing Hotwire and React in Rails applications.

Factor	Hotwire	React in Rails
Integration Style	Server-driven HTML updates via Turbo and Stimulus	Client-side UI components with JSX and state management
JavaScript Required	Minimal, mostly Stimulus controllers	Extensive, full React ecosystem
Performance	Fast initial load, less client CPU	Potentially heavier client, faster UI updates
Complexity	Simpler setup, less tooling	More setup, build tools, and bundlers
Developer Experience	Rails-friendly, less context switching	Separate frontend mindset, more JS skills needed
Use Case	Best for mostly server-rendered apps with some interactivity	Best for complex, dynamic frontends with rich interactions

Key Differences

Hotwire is designed to keep Rails apps mostly server-rendered, sending HTML updates over the network using Turbo Drive, Turbo Frames, and Turbo Streams. It minimizes JavaScript by using Stimulus for small interactive parts, making it easy for Rails developers to add interactivity without leaving the Rails ecosystem.

In contrast, React is a full client-side library that builds user interfaces with reusable components written in JSX. React manages UI state in the browser and requires a build step with tools like Webpack or Vite. This approach gives more control over UI behavior but adds complexity and requires JavaScript expertise.

While Hotwire focuses on speed and simplicity by reducing client-side code, React offers flexibility for highly interactive and complex frontends. Hotwire fits well when you want to enhance a Rails app incrementally, whereas React suits projects needing rich client-side logic and dynamic user experiences.

Code Comparison

Here is how you create a simple interactive counter that increments on button click using Hotwire in Rails.

erb + javascript

<!-- app/views/counters/show.html.erb -->
<div data-controller="counter">
  <h1 data-counter-target="value">0</h1>
  <button data-action="click->counter#increment">Increment</button>
</div>

// app/javascript/controllers/counter_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["value"]

  connect() {
    this.count = 0
  }

  increment() {
    this.count++
    this.valueTarget.textContent = this.count
  }
}

Output

A page showing a number starting at 0 and a button labeled 'Increment'. Clicking the button increases the number by 1 instantly.

React Equivalent

Here is the same counter implemented as a React component in a Rails app using React with JSX.

jsx

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Output

A page showing a number starting at 0 and a button labeled 'Increment'. Clicking the button increases the number by 1 instantly.

When to Use Which

Choose Hotwire when you want to build Rails apps with minimal JavaScript, prefer server-rendered HTML, and want fast development with less frontend complexity. It's ideal for apps that mostly serve HTML and need some interactivity without a full JavaScript framework.

Choose React when your app requires complex client-side interactions, dynamic UI updates, or you want to build a rich single-page application (SPA) within Rails. React is better if you have strong JavaScript skills and need fine control over frontend behavior.

Key Takeaways

Hotwire uses server-driven HTML updates with minimal JavaScript, making Rails apps simpler and faster to build.

React builds UI with client-side components and state, offering more flexibility but requiring more setup and JS knowledge.

Use Hotwire for mostly server-rendered apps with light interactivity and React for complex, dynamic frontends.

Hotwire fits Rails developers wanting to stay in the Rails ecosystem; React suits teams comfortable with modern JavaScript.

Both can coexist in Rails, but choosing depends on your app’s complexity and developer skills.