Shared vs. Isolated Components

Ignite-Element offers two powerful modes of state management for your web components:

1. Shared Components: Use a global state shared across all component instances.

2. Isolated Components: Maintain an independent state for each component instance.

Both modes are designed to provide flexibility and scalability for your application’s specific needs.

---

Shared Components

Shared components have a single state source across all instances. Any updates to the state are reflected in every instance, ensuring consistency throughout your application.

When to Use Shared Components

Shared components are ideal for scenarios where a global state needs to be accessed or updated by multiple components. Examples include:

• Shopping Cart: Display the total items and costs across different parts of an application.

• Theme Management: Apply a consistent theme (e.g., dark mode) throughout your application.

Example: Shared Counter

Here’s a shared counter component:

JavaScript

import { igniteCore } from "ignite-element";
import { html } from "lit-html";
import counterStore from "./counterStore";

const { shared } = igniteCore({
  adapter: "mobx",
  source: counterStore,
});

shared("shared-counter", (state, send) => {
  return html`
    <div>
      <h3>Shared Counter: ${state.count}</h3>
      <button @click=${() => send({ type: "increment" })}>Increment</button>
      <button @click=${() => send({ type: "decrement" })}>Decrement</button>
    </div>
  `;
});

Every instance of shared-counter will display and update the same global count.

---

Isolated Components

What Are Isolated Components?

Isolated components maintain their own state, independent of other instances. Each component instance operates within its own scope, ensuring no interference with other components.

When to Use Isolated Components

Isolated components are ideal for scenarios where each component instance requires its own state. Examples include:

• Forms: Each form field should manage its own value.

• Product Quantity Selectors: Each product in a list should manage its own quantity.

Example: Isolated Counter

Here’s an isolated counter component:

JavaScript

import { igniteCore } from "ignite-element";
import { html } from "lit-html"
import counterStore from "./counterStore";

const { isolated } = igniteCore({
  adapter: "mobx",
  source: counterStore,
});

isolated("isolated-counter", (state, send) => {
  return html`
    <div>
      <h3>Isolated Counter: ${state.count}</h3>
      <button @click=${() => send({ type: "increment" })}>Increment</button>
      <button @click=${() => send({ type: "decrement" })}>Decrement</button>
    </div>
  `;
});

Each instance of isolated-counter manages its count value independently.

---

Comparison: Shared vs. Isolated

Feature	Shared Components	Isolated Components
State Sharing	Shared across all instances	Independent for each instance
Use Case	Global state like shopping cart or theme	Local state like form inputs or counters
Performance Impact	Updates re-render all shared components	Updates only re-render the specific instance

---

Best Practices

• Use Shared Components for Global State: Choose shared components when you need consistency across multiple instances.

• Use Isolated Components for Local State: Use isolated components for scenarios where the state needs to be encapsulated and independent.

• Leverage Ignite-Element’s Flexibility: In your application, mix shared and isolated components as needed. For example, use a shared component for a shopping cart summary and isolated components for individual product quantity selectors.