# 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:

{% tabs %}
{% tab title="JavaScript" %}

```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>
  `;
});

```

{% endtab %}
{% endtabs %}

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:

{% tabs %}
{% tab title="JavaScript" %}

```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>
  `;
});

```

{% endtab %}
{% endtabs %}

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.
