Web Components vs React Components: A Practical Comparison

Compare Web Components and React Components to choose the right approach. Learn when to use each, interoperability strategies, and practical examples.

Introduction
Understanding Web Components
Understanding React Components
Key Differences
When to Use Web Components
When to Use React Components
Interoperability and Integration
Performance Comparison
Developer Experience
Real-World Examples
Migration Strategies
Best Practices
Conclusion

Introduction

The modern web development landscape offers multiple approaches to building reusable UI components. Two of the most prominent are Web Components (native browser APIs) and React Components (library-based). Both solve similar problems but take fundamentally different approaches, each with its own strengths and trade-offs.

Web Components are a set of web platform APIs that allow you to create custom, reusable HTML elements with encapsulated functionality. They’re built into browsers and work with any framework or no framework at all. React Components, on the other hand, are JavaScript functions or classes that return JSX, managed by the React library’s virtual DOM system.

Choosing between Web Components and React Components isn’t always straightforward. The decision depends on your project requirements, team expertise, performance needs, and long-term maintenance considerations. This comprehensive guide will help you understand both approaches, compare them across key dimensions, and make informed decisions about which to use—or how to use them together.

By the end of this guide, you’ll have a clear understanding of when to use Web Components versus React Components, how to integrate them, and practical strategies for building component-based applications that leverage the strengths of each approach.

Understanding Web Components

Web Components are a collection of web platform APIs that enable you to create custom, reusable HTML elements with encapsulated styles and behavior. They consist of four main technologies: Custom Elements, Shadow DOM, HTML Templates, and HTML Imports (though HTML Imports are deprecated).

Core Technologies

Custom Elements: Allow you to define new HTML elements with custom behavior.

// ✅ Basic Custom Element
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log("Button clicked!");
  }

  connectedCallback() {
    this.innerHTML = "<button>Click Me</button>";
  }
}

// Register the custom element
customElements.define("my-button", MyButton);

<!-- Use the custom element -->
<my-button></my-button>

Shadow DOM: Provides style and DOM encapsulation, preventing styles from leaking in or out.

// ✅ Custom Element with Shadow DOM
class EncapsulatedCard extends HTMLElement {
  constructor() {
    super();

    // Create shadow root for encapsulation
    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 20px;
          border-radius: 8px;
        }
        /* Styles are encapsulated - won't affect outside */
      </style>
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define("encapsulated-card", EncapsulatedCard);

HTML Templates: Define reusable markup that isn’t rendered until used.

// ✅ Using HTML Templates
class ProductCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const template = document.getElementById("product-card-template");
    const clone = template.content.cloneNode(true);

    // Populate template with data
    clone.querySelector(".product-name").textContent =
      this.getAttribute("name");
    clone.querySelector(".product-price").textContent =
      this.getAttribute("price");

    this.shadowRoot.appendChild(clone);
  }
}

customElements.define("product-card", ProductCard);

<template id="product-card-template">
  <style>
    .product-card {
      /* styles */
    }
  </style>
  <div class="product-card">
    <h3 class="product-name"></h3>
    <p class="product-price"></p>
  </div>
</template>

<product-card name="Widget" price="$29.99"></product-card>

Web Components Lifecycle

Web Components have a well-defined lifecycle with callback methods:

class LifecycleExample extends HTMLElement {
  constructor() {
    super();
    // Called when element is created
    console.log("Constructor called");
  }

  connectedCallback() {
    // Called when element is inserted into DOM
    console.log("Connected to DOM");
  }

  disconnectedCallback() {
    // Called when element is removed from DOM
    console.log("Disconnected from DOM");
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // Called when observed attributes change
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
  }

  static get observedAttributes() {
    // Return array of attributes to observe
    return ["disabled", "label"];
  }
}

customElements.define("lifecycle-example", LifecycleExample);

Advantages of Web Components

✅ Framework-agnostic: Work with any framework or vanilla JavaScript ✅ Native browser support: No build step or dependencies required ✅ True encapsulation: Shadow DOM provides style and DOM isolation ✅ Standards-based: Built on web standards, future-proof ✅ Interoperability: Can be used across different frameworks and applications ✅ Performance: Lightweight, no virtual DOM overhead

Limitations of Web Components

❌ No built-in state management: Need to implement your own ❌ Limited tooling: Fewer development tools compared to React ❌ Browser compatibility: Some features require polyfills for older browsers ❌ No JSX: Must use template literals or HTML templates ❌ Steeper learning curve: Requires understanding of lower-level APIs

Understanding React Components

React Components are the building blocks of React applications. They’re JavaScript functions or classes that return JSX (JavaScript XML), describing what the UI should look like. React manages the component lifecycle, state, and DOM updates through its virtual DOM system.

Functional Components

Modern React primarily uses functional components with hooks:

// ✅ Functional Component with Hooks
import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default Counter;

Class Components

Class components are the older syntax, still supported but less common:

// ✅ Class Component
import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

React Component Patterns

React offers many patterns for building components:

// ✅ Component with Props
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

// ✅ Component Composition
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content.</p>
    </Card>
  );
}

React Ecosystem

React has a rich ecosystem of libraries and tools:

State Management: Redux, Zustand, Jotai, Recoil
Routing: React Router, Next.js
Styling: CSS Modules, styled-components, Tailwind CSS
Testing: Jest, React Testing Library
Build Tools: Create React App, Vite, Next.js

Advantages of React Components

✅ Rich ecosystem: Vast library ecosystem and community ✅ Developer experience: Excellent tooling and developer tools ✅ JSX syntax: Declarative, component-based syntax ✅ Virtual DOM: Efficient updates and reconciliation ✅ State management: Built-in hooks and state management solutions ✅ Server-side rendering: Next.js and other SSR solutions ✅ Type safety: Excellent TypeScript support ✅ Learning resources: Extensive documentation and tutorials

Limitations of React Components

❌ Framework lock-in: Tied to React ecosystem ❌ Bundle size: React library adds to bundle size ❌ Virtual DOM overhead: Additional abstraction layer ❌ Build step required: JSX needs to be transpiled ❌ No true encapsulation: CSS can leak between components without additional tooling ❌ Rapid changes: Frequent updates and breaking changes

Key Differences

Understanding the fundamental differences helps you choose the right approach for your project.

Architecture

Aspect	Web Components	React Components
Base	Native browser APIs	JavaScript library
Rendering	Direct DOM manipulation	Virtual DOM
Syntax	HTML templates, template literals	JSX
Encapsulation	Shadow DOM (true isolation)	CSS Modules, styled-components
State Management	Manual implementation	Built-in hooks, Context API
Build Step	Optional	Required (for JSX)

Code Comparison

Here’s the same component implemented in both approaches:

// ✅ Web Component: Todo Item
class TodoItem extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.completed = false;
  }

  static get observedAttributes() {
    return ["text", "completed"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "completed") {
      this.completed = newValue === "true";
      this.render();
    }
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector("input").addEventListener("change", (e) => {
      this.completed = e.target.checked;
      this.setAttribute("completed", this.completed);
      this.dispatchEvent(
        new CustomEvent("todo-toggle", {
          detail: { completed: this.completed },
        }),
      );
    });
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .todo-item {
          display: flex;
          align-items: center;
          padding: 10px;
        }
        .completed {
          text-decoration: line-through;
          opacity: 0.6;
        }
      </style>
      <div class="todo-item ${this.completed ? "completed" : ""}">
        <input type="checkbox" ${this.completed ? "checked" : ""}>
        <span>${this.getAttribute("text")}</span>
      </div>
    `;
  }
}

customElements.define("todo-item", TodoItem);

// ✅ React Component: Todo Item
import React, { useState } from "react";

function TodoItem({ text, initialCompleted = false, onToggle }) {
  const [completed, setCompleted] = useState(initialCompleted);

  const handleChange = (e) => {
    const newCompleted = e.target.checked;
    setCompleted(newCompleted);
    if (onToggle) {
      onToggle(newCompleted);
    }
  };

  return (
    <div className={`todo-item ${completed ? "completed" : ""}`}>
      <input type="checkbox" checked={completed} onChange={handleChange} />
      <span>{text}</span>
    </div>
  );
}

export default TodoItem;

Styling Approaches

// ✅ Web Component: Encapsulated Styles
class StyledCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        /* Styles are completely isolated */
        .card {
          background: white;
          border-radius: 8px;
          padding: 20px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* External styles cannot affect this */
      </style>
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

// ✅ React Component: CSS Modules
.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

// Card.jsx
import styles from './Card.module.css';

function Card({ children }) {
  return (
    <div className={styles.card}>
      {children}
    </div>
  );
}

When to Use Web Components

Web Components excel in specific scenarios where framework independence and native browser features are priorities.

Framework-Agnostic Libraries

When building components that need to work across multiple frameworks or applications:

// ✅ Web Component usable in React, Vue, Angular, or vanilla JS
class SharedButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          padding: 10px 20px;
          background: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
      <button>
        <slot></slot>
      </button>
    `;
  }
}

customElements.define("shared-button", SharedButton);

Design Systems

Building design systems that need to work across different tech stacks:

// ✅ Design System Component
class DesignSystemCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get observedAttributes() {
    return ["variant", "elevation"];
  }

  connectedCallback() {
    const variant = this.getAttribute("variant") || "default";
    const elevation = this.getAttribute("elevation") || "1";

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          padding: 20px;
          border-radius: 8px;
          background: ${variant === "primary" ? "#007bff" : "white"};
          box-shadow: 0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1);
        }
      </style>
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define("ds-card", DesignSystemCard);

Micro-Frontends

When building micro-frontend architectures where different parts use different frameworks:

<!-- ✅ Micro-frontend: Header uses Web Components -->
<header>
  <shared-navigation></shared-navigation>
  <user-profile></user-profile>
</header>

<!-- Main app can be React, Vue, or Angular -->
<div id="app"></div>

Legacy System Integration

Integrating new components into legacy systems without major refactoring:

// ✅ Web Component that works in legacy jQuery app
class ModernWidget extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    // Can integrate with existing jQuery code
    this.shadowRoot.innerHTML = `
      <div class="modern-widget">
        <slot></slot>
      </div>
    `;

    // Works alongside legacy code
    $(this.shadowRoot.querySelector(".modern-widget")).on("click", function () {
      // Legacy jQuery code
    });
  }
}

Performance-Critical Applications

When you need maximum performance without framework overhead:

// ✅ High-performance Web Component
class PerformanceWidget extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    // Direct DOM manipulation - no virtual DOM overhead
  }

  updateData(data) {
    // Direct updates - very fast
    const element = this.shadowRoot.querySelector(".data");
    element.textContent = JSON.stringify(data);
  }
}

When to Use React Components

React Components are ideal for building complex, interactive applications with rich state management needs.

Complex State Management

When you need sophisticated state management and data flow:

// ✅ React with Context API
import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className={theme}
    >
      Toggle Theme
    </button>
  );
}

Rich Ecosystem Needs

When you need access to React’s extensive ecosystem:

// ✅ React with React Router
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, useEffect } from "react";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Server-Side Rendering

When you need SSR for SEO or performance:

// ✅ Next.js Server Component
// app/page.js (Next.js 13+)
async function HomePage() {
  const data = await fetch("https://api.example.com/data");
  const posts = await data.json();

  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

Rapid Development

When you need to move fast with excellent developer experience:

// ✅ React with Hooks - Fast Development
import { useState, useEffect } from "react";

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  if (loading) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

Team Expertise

When your team is already proficient in React:

💡 Pro Tip: Leverage your team’s existing React knowledge and avoid the learning curve of Web Components. However, be aware of common React pitfalls that can trip up even experienced developers.

Interoperability and Integration

You don’t have to choose one or the other—Web Components and React Components can work together.

Using Web Components in React

React can render and interact with Web Components:

// ✅ React Component using Web Component
import React, { useRef, useEffect } from "react";

function ReactApp() {
  const webComponentRef = useRef(null);

  useEffect(() => {
    // Listen to custom events from Web Component
    const handleCustomEvent = (e) => {
      console.log("Web Component event:", e.detail);
    };

    if (webComponentRef.current) {
      webComponentRef.current.addEventListener(
        "custom-event",
        handleCustomEvent,
      );
    }

    return () => {
      if (webComponentRef.current) {
        webComponentRef.current.removeEventListener(
          "custom-event",
          handleCustomEvent,
        );
      }
    };
  }, []);

  const handleClick = () => {
    // Call methods on Web Component
    if (webComponentRef.current) {
      webComponentRef.current.someMethod();
    }
  };

  return (
    <div>
      <my-web-component
        ref={webComponentRef}
        prop1="value1"
        onCustomEvent={(e) => console.log(e.detail)}
      />
      <button onClick={handleClick}>Interact</button>
    </div>
  );
}

Wrapping React Components as Web Components

You can wrap React components to use them as Web Components:

// ✅ React Component wrapped as Web Component
import React from "react";
import ReactDOM from "react-dom/client";
import MyReactComponent from "./MyReactComponent";

class ReactWebComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const mountPoint = document.createElement("div");
    this.shadowRoot.appendChild(mountPoint);

    const root = ReactDOM.createRoot(mountPoint);
    root.render(
      React.createElement(MyReactComponent, {
        prop1: this.getAttribute("prop1"),
        prop2: this.getAttribute("prop2"),
      }),
    );
  }
}

customElements.define("react-component", ReactWebComponent);

Hybrid Approach

Use both together strategically:

// ✅ Hybrid: Web Components for shared UI, React for app logic
function App() {
  return (
    <div>
      {/* Web Component for shared design system */}
      <design-system-header></design-system-header>

      {/* React for application logic */}
      <ReactRouter>
        <Routes>
          <Route path="/" element={<HomePage />} />
        </Routes>
      </ReactRouter>

      {/* Web Component for shared footer */}
      <design-system-footer></design-system-footer>
    </div>
  );
}

Performance Comparison

Performance characteristics differ significantly between Web Components and React Components.

Bundle Size

// Web Component: ~0KB (native browser API)
// No additional bundle size

// React Component: ~45KB (React + ReactDOM, gzipped)
// Plus your component code

Initial Render

Web Components typically have faster initial render due to no virtual DOM overhead:

// ✅ Web Component: Direct DOM manipulation
class FastComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<div>Fast render</div>";
    // Direct DOM update - no virtual DOM reconciliation
  }
}

React’s virtual DOM adds overhead but provides efficient updates:

// ✅ React: Virtual DOM reconciliation
function FastComponent() {
  return <div>Fast render</div>;
  // Virtual DOM diffing, then DOM update
}

Update Performance

// ✅ Web Component: Manual optimization needed
class OptimizedComponent extends HTMLElement {
  update(data) {
    // Must manually optimize updates
    if (this.lastData === data) return; // Manual memoization

    // Direct DOM update
    this.shadowRoot.querySelector(".content").textContent = data;
    this.lastData = data;
  }
}

// ✅ React: Automatic optimization
import React, { memo } from "react";

const OptimizedComponent = memo(function ({ data }) {
  return <div className="content">{data}</div>;
  // React automatically optimizes re-renders
});

Memory Usage

Web Components generally use less memory (no virtual DOM), while React’s virtual DOM increases memory usage but enables efficient updates.

💡 Pro Tip: For performance-critical applications, consider Web Components. For complex UIs with frequent updates, React’s virtual DOM optimizations often provide better overall performance. See our guide on web performance optimization for more details.

Developer Experience

Developer experience differs significantly between the two approaches.

Web Components DX

// ⚠️ More verbose, manual DOM manipulation
class TodoList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.todos = [];
  }

  addTodo(text) {
    this.todos.push({ text, completed: false });
    this.render(); // Must manually re-render
  }

  render() {
    // Manual template construction
    this.shadowRoot.innerHTML = `
      <style>/* styles */</style>
      <ul>
        ${this.todos
          .map(
            (todo) => `
          <li>${todo.text}</li>
        `,
          )
          .join("")}
      </ul>
    `;
  }
}

React DX

// ✅ Declarative, automatic re-renders
import React, { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { text, completed: false }]);
    // React automatically re-renders
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.text}>{todo.text}</li>
      ))}
    </ul>
  );
}

Tooling

Web Components:

Limited IDE support
Fewer debugging tools
Manual testing setup

React Components:

Excellent IDE support (VS Code, WebStorm)
React DevTools for debugging
Rich testing ecosystem (Jest, React Testing Library)

Real-World Examples

Let’s examine real-world scenarios to see both approaches in action.

Example 1: Form Input Component

// ✅ Web Component: Form Input
class FormInput extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get observedAttributes() {
    return ["value", "placeholder", "type"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.render();
    }
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector("input").addEventListener("input", (e) => {
      this.setAttribute("value", e.target.value);
      this.dispatchEvent(
        new CustomEvent("input", {
          detail: { value: e.target.value },
        }),
      );
    });
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        input {
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      </style>
      <input
        type="${this.getAttribute("type") || "text"}"
        placeholder="${this.getAttribute("placeholder") || ""}"
        value="${this.getAttribute("value") || ""}"
      />
    `;
  }
}

customElements.define("form-input", FormInput);

// ✅ React Component: Form Input
import React, { useState } from "react";

function FormInput({
  type = "text",
  placeholder,
  value: initialValue = "",
  onChange,
}) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    if (onChange) {
      onChange(newValue);
    }
  };

  return (
    <input
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={handleChange}
      className="form-input"
    />
  );
}

export default FormInput;

Example 2: Data Table Component

// ✅ Web Component: Data Table
class DataTable extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.data = [];
  }

  setData(newData) {
    this.data = newData;
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        table {
          width: 100%;
          border-collapse: collapse;
        }
        th, td {
          padding: 12px;
          text-align: left;
          border-bottom: 1px solid #ddd;
        }
        th {
          background-color: #f2f2f2;
        }
      </style>
      <table>
        <thead>
          <tr>
            ${Object.keys(this.data[0] || {})
              .map((key) => `<th>${key}</th>`)
              .join("")}
          </tr>
        </thead>
        <tbody>
          ${this.data
            .map(
              (row) => `
            <tr>
              ${Object.values(row)
                .map((val) => `<td>${val}</td>`)
                .join("")}
            </tr>
          `,
            )
            .join("")}
        </tbody>
      </table>
    `;
  }
}

customElements.define("data-table", DataTable);

// ✅ React Component: Data Table
import React from "react";

function DataTable({ data = [] }) {
  if (data.length === 0) {
    return <div>No data available</div>;
  }

  const columns = Object.keys(data[0]);

  return (
    <table className="data-table">
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={column}>{column}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            {columns.map((column) => (
              <td key={column}>{row[column]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default DataTable;

Migration Strategies

If you need to migrate between approaches, here are practical strategies.

Migrating from React to Web Components

// ✅ Step 1: Identify React component
function ReactButton({ label, onClick }) {
  return (
    <button onClick={onClick} className="btn">
      {label}
    </button>
  );
}

// ✅ Step 2: Convert to Web Component
class WebComponentButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get observedAttributes() {
    return ["label"];
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector("button").addEventListener("click", () => {
      this.dispatchEvent(new CustomEvent("click"));
    });
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .btn {
          padding: 10px 20px;
          background: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
        }
      </style>
      <button class="btn">${this.getAttribute("label")}</button>
    `;
  }
}

customElements.define("wc-button", WebComponentButton);

Migrating from Web Components to React

// ✅ Step 1: Identify Web Component
class WebComponentCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

// ✅ Step 2: Convert to React Component
import React from "react";
import "./Card.css"; // Extract styles

function ReactCard({ children }) {
  return <div className="card">{children}</div>;
}

export default ReactCard;

Gradual Migration

Migrate incrementally by using both together:

// ✅ Gradual migration: Use Web Components in React app
function App() {
  return (
    <div>
      {/* Old React components */}
      <OldReactComponent />

      {/* New Web Components */}
      <new-web-component></new-web-component>

      {/* Wrapper to bridge them */}
      <WebComponentWrapper>
        <ReactComponent />
      </WebComponentWrapper>
    </div>
  );
}

Best Practices

Follow these best practices regardless of which approach you choose.

Web Components Best Practices

// ✅ Use closed shadow DOM for true encapsulation
class SecureComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "closed" }); // Prevents external access
  }
}

// ✅ Use slots for composition
class ComposableCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <div class="card">
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><slot name="footer"></slot></footer>
      </div>
    `;
  }
}

// ✅ Use Custom Events for communication
class EventEmitterComponent extends HTMLElement {
  notify(data) {
    this.dispatchEvent(
      new CustomEvent("custom-event", {
        detail: data,
        bubbles: true,
        composed: true, // Allows event to cross shadow DOM boundary
      }),
    );
  }
}

React Components Best Practices

// ✅ Use proper keys in lists
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

// ✅ Memoize expensive computations
import React, { useMemo } from "react";

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map((item) => expensiveOperation(item));
  }, [data]);

  return <div>{/* render processedData */}</div>;
}

// ✅ Extract reusable logic with custom hooks
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

Hybrid Best Practices

// ✅ Clear boundaries between Web Components and React
// Web Components: Shared, framework-agnostic UI
// React: Application logic and state management

// ✅ Document integration points
/**
 * Web Component wrapper for React component
 * Props: data (string) - JSON string of data to pass
 * Events: react-event - Custom event emitted from React component
 */
class ReactWrapper extends HTMLElement {
  // Implementation
}

Conclusion

Both Web Components and React Components are powerful tools for building modern web applications, each with distinct strengths and use cases. Web Components excel when you need framework independence, true encapsulation, and native browser features. React Components shine when you need rich state management, a vibrant ecosystem, and excellent developer experience.

Key takeaways:

Web Components are ideal for: framework-agnostic libraries, design systems, micro-frontends, and performance-critical applications.
React Components are ideal for: complex applications, rapid development, server-side rendering, and when leveraging React’s ecosystem.
You can use both: They’re not mutually exclusive—use Web Components for shared UI and React for application logic.
Consider your context: Team expertise, project requirements, and long-term maintenance should guide your choice.
Performance varies: Web Components have less overhead, but React’s optimizations often provide better performance for complex UIs.
Migration is possible: Both approaches can be migrated incrementally or used together.

The best choice depends on your specific needs. For most applications, React Components provide the best developer experience and ecosystem support. For shared component libraries or framework-agnostic needs, Web Components are the better choice. Understanding both approaches makes you a more versatile developer capable of choosing the right tool for each situation.

For more JavaScript concepts that apply to both approaches, check out our guide on understanding JavaScript closures, which are fundamental to both Web Components and React Components.

Additional Resources:

Table of Contents