Building Modern Web Apps: ReactJS vs. HTMX (Two Different Approaches).

// React: Client-Side Live Search
import React, { useState, useEffect } from 'react';

export function UserSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }

    const timer = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
        const data = await res.json();
        setResults(data);
      } catch (err) {
        console.error("Search failed", err);
      } finally {
        setLoading(false);
      }
    }, 300); // 300ms debounce

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div className="search-box">
      <input
        type="text"
        placeholder="Search users..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {loading && <span>Loading results...</span>}
      <ul>
        {results.map((user) => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

<!-- HTMX: Server-Driven Live Search -->
<!-- No build step, no npm bundle, no client state management -->

<div class="search-box">
  <input 
    type="text" 
    name="q"
    placeholder="Search users..."
    hx-post="/users/search" 
    hx-trigger="keyup changed delay:300ms" 
    hx-target="#search-results" 
    hx-indicator="#search-spinner"
  />
  <span id="search-spinner" class="htmx-indicator">Loading results...</span>

  <!-- Backend (e.g. Spring Boot / Thymeleaf) returns ready HTML fragment -->
  <ul id="search-results">
    <!-- Server replaces this container with <li> elements directly -->
  </ul>
</div>

// Spring Boot Controller serving HTML fragment to HTMX
@Controller
@RequestMapping("/users")
public class UserSearchController {

    private final UserRepository userRepo;

    public UserSearchController(UserRepository userRepo) {
        this.userRepo = userRepo;
    }

    @PostMapping("/search")
    public String searchUsers(@RequestParam("q") String query, Model model) {
        List<User> users = userRepo.findByNameContainingIgnoreCase(query);
        model.addAttribute("users", users);
        // Returns the Thymeleaf HTML fragment: templates/fragments/user-list.html
        return "fragments/user-list :: results";
    }
}