Dynamic Component Rendering Without switch: Using a Map in React

When working with dynamic UI rendering in React, you often need to map a JSON structure to actual components. Many implementations rely on switch statements, but these can become unwieldy as your project scales.

A more flexible approach is to use a lookup registry (a Map or plain object) that dynamically matches component types to their respective React components. We’ll also cover serialization of Map and Set for scenarios where data persistence is required.

1. Why Serialization Matters?

Databases & APIs Favor JSON

Most databases and APIs expect data in JSON format (objects or arrays). If you’re storing user-defined page layouts with sections and blocks, they need to be serialized properly.

Map and Set are not JSON-serializable

If you try:

const myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
]);

console.log(JSON.stringify(myMap)); // "{}" – Data is lost!

Unlike plain objects, Map and Set do not serialize properly with JSON.stringify, so they need to be converted first.

React Props Favor Objects & Arrays

React state and props expect serializable data (plain objects/arrays). When fetching layout data from an API, it's already structured in JSON, so working with plain objects is more straightforward.

2. Define Components in a Lookup Registry (Avoiding switch)

Instead of:

function renderComponent(type, props) {
  switch (type) {
    case "hero":
      return <HeroComponent {...props} />;
    case "image":
      return <ImageComponent {...props} />;
    default:
      return null;
  }
}

We use a registry pattern:

const componentRegistry = new Map();

// Import components
import HeroComponent from "@/components/Hero";
import ImageComponent from "@/components/ImageBlock";

// Register components by type
componentRegistry.set("hero", HeroComponent);
componentRegistry.set("image", ImageComponent);

Why Use a Map Instead of an Object?

• Map maintains insertion order (useful for debugging or prioritization).
• Easier lookups with .get(), avoiding prototype pollution issues in objects.
• Supports complex keys, unlike objects (e.g., using tuples or objects as keys).
• Better performance in large-scale applications.

If you prefer, you can still use a plain object:

const componentRegistry = {
  hero: HeroComponent,
  image: ImageComponent,
};

3. Store Page Data as a JSON Array

This structure is serializable and API-friendly:

[
  {
    "type": "hero",
    "props": {
      "title": "Welcome to My Awesome Page",
      "subtitle": "Let's build something cool!",
      "backgroundImage": "/assets/hero_bg.jpg"
    }
  },
  {
    "type": "image",
    "props": {
      "src": "/assets/product.png",
      "alt": "My Product",
      "width": 600,
      "height": 400
    }
  }
]

Each entry has:

• type → Matches a key in the componentRegistry
• props → Contains the necessary component props

4. Rendering Components Dynamically

Once we fetch this JSON data, we map it to our registered components dynamically.

type SectionData = {
  type: string;
  props: Record<string, any>;
};

type PageRendererProps = {
  sections: SectionData[];
};

export function PageRenderer({ sections }: PageRendererProps) {
  return (
    <>
      {sections.map((section, index) => {
        const Component = componentRegistry.get(section.type);

        if (!Component) {
          console.warn(`Component type '${section.type}' not found.`);
          return null;
        }

        return <Component key={index} {...section.props} />;
      })}
    </>
  );
}

Flow

1. Loop through JSON sections
2. Find the correct component from Map
3. Render the component with props from JSON
4. Handle missing components gracefully

5. Converting Map/Set for Storage

If you need to store a Map or Set in a database, you must convert it to JSON.

Serialize a Map

function mapToJSON(map) {
  return JSON.stringify(Array.from(map.entries()));
}

function jsonToMap(jsonData) {
  return new Map(JSON.parse(jsonData));
}

const map = new Map([
  ["hero", HeroComponent],
  ["image", ImageComponent],
]);

const serialized = mapToJSON(map);
console.log(serialized); // '[["hero", {}], ["image", {}]]'

const restoredMap = jsonToMap(serialized);
console.log(restoredMap); // Map { "hero" => {}, "image" => {} }

Serialize a Set

function setToJSON(set) {
  return JSON.stringify(Array.from(set));
}

function jsonToSet(jsonData) {
  return new Set(JSON.parse(jsonData));
}

const mySet = new Set(["apple", "banana", "cherry"]);
const serializedSet = setToJSON(mySet);
console.log(serializedSet); // '["apple","banana","cherry"]'

const restoredSet = jsonToSet(serializedSet);
console.log(restoredSet); // Set { "apple", "banana", "cherry" }

However, you rarely need to store the component registry itself—just keep it in memory and serialize only the data-driven JSON array.

6. Key Benefits of Using Map or Set

Why Use a Map?

✅ Faster lookups with .get(key) compared to object properties.
✅ Maintains order of insertion (useful for ordered rendering).
✅ Supports any data type as keys (objects, symbols, etc.).
✅ Prevents accidental key name conflicts (Object.prototype pollution).

Why Use a Set?

✅ Ensures unique values (no duplicates).
✅ Fast has(value) checks for lookup-heavy use cases.
✅ Useful for caching already-rendered components or avoiding re-processing.

7. Takeaways

Best Practices for Dynamic UI Rendering

✔ Use JSON arrays to structure your page content in an API-friendly way.
✔ Use a Map or object registry for fast, flexible lookups instead of switch.
✔ Convert Map/Set manually if you need to store them in a database.
✔ Keep UI logic separate from data—API serves pure data, frontend maps it dynamically.

Real-World Use Case

This approach is ideal for multi-tenant site builders, CMS-driven websites, and dynamic page builders. Each tenant’s page structure can be stored as JSON in a database, fetched at runtime, and rendered dynamically in Next.js or React—without hardcoded switch statements.

By structuring your project like this, new components can be added easily, and your code stays clean, scalable, and maintainable.