I was working on a React project where I needed to show different components based on user actions, without hardcoding every condition.
At first, I tried using conditional statements everywhere, but my code quickly became messy. That’s when I realized the power of dynamic rendering in React, a clean and scalable way to load components on demand.
In this tutorial, I’ll show you how to render React components dynamically using different methods. I’ll also explain each approach from my own experience so you can easily apply it to your own projects.
What Does “Render React Component Dynamically” Mean?
In simple terms, dynamic rendering means loading or displaying a component based on some condition, such as user input, API data, or route changes, instead of hardcoding which component should appear.
This makes your app more flexible, modular, and easier to maintain.
For example, imagine you’re building a dashboard for a U.S.-based logistics company. Depending on the user’s role (Driver, Manager, or Admin), you want to load a different dashboard view. That’s where dynamic rendering becomes extremely useful.
Method 1 – Use a Component Map (My Go-To Approach)
One of the easiest and cleanest ways to render components dynamically is by using a component map, an object that maps component names to their corresponding React components.
Here’s how I do it:
Example: Dynamic Component Rendering Using a Map
import React from "react";
// Step 1: Define your components
function DriverDashboard() {
return <h2>Welcome, Driver! Here’s your delivery schedule.</h2>;
}
function ManagerDashboard() {
return <h2>Welcome, Manager! Here’s your team performance report.</h2>;
}
function AdminDashboard() {
return <h2>Welcome, Admin! Here’s the system overview.</h2>;
}
// Step 2: Create a component map
const componentMap = {
driver: DriverDashboard,
manager: ManagerDashboard,
admin: AdminDashboard,
};
// Step 3: Main App component
function App() {
const userRole = "manager"; // This could come from API or user login
const SelectedComponent = componentMap[userRole] || DriverDashboard;
return (
<div>
<h1>Dynamic Dashboard</h1>
<SelectedComponent />
</div>
);
}
export default App;You can see the output in the screenshot below.
It’s simple, scalable, and avoids unnecessary conditional logic. You can easily add new roles without touching the main logic.
Method 2 – Use React.createElement()
Sometimes, I prefer using React.createElement() when I need more control over props or when I’m working with dynamic data coming from APIs.
Example: Render Components Dynamically with React.createElement()
import React from "react";
function SalesReport({ region }) {
return <p>Sales Report for {region}</p>;
}
function InventoryReport({ region }) {
return <p>Inventory Report for {region}</p>;
}
const components = {
sales: SalesReport,
inventory: InventoryReport,
};
function App() {
const reportType = "sales";
const region = "California";
const ComponentToRender = components[reportType];
const element = React.createElement(ComponentToRender, { region });
return (
<div>
<h1>Company Reports</h1>
{element}
</div>
);
}
export default App;You can see the output in the screenshot below.
When working with JSON or API-driven data, this approach allows me to dynamically create React elements with props, which feels very natural when working with external data sources.
Method 3 – Dynamic Imports (Code Splitting)
When building large-scale applications, I often use dynamic imports to load components only when needed. This improves performance by reducing the initial bundle size.
Example: Load Components Dynamically with React.lazy() and Suspense
import React, { Suspense, useState } from "react";
// Step 1: Lazy load components
const UserProfile = React.lazy(() => import("./UserProfile"));
const Settings = React.lazy(() => import("./Settings"));
const Help = React.lazy(() => import("./Help"));
function App() {
const [page, setPage] = useState("profile");
return (
<div>
<h1>Dynamic Component Loading Example</h1>
<nav>
<button onClick={() => setPage("profile")}>Profile</button>
<button onClick={() => setPage("settings")}>Settings</button>
<button onClick={() => setPage("help")}>Help</button>
</nav>
<Suspense fallback={<div>Loading...</div>}>
{page === "profile" && <UserProfile />}
{page === "settings" && <Settings />}
{page === "help" && <Help />}
</Suspense>
</div>
);
}
export default App;You can see the output in the screenshot below.
This approach is perfect for apps with multiple pages or sections, like a U.S. e-commerce admin panel. It ensures faster load times and better performance, especially for users on slower connections.
Method 4 – Render Components from JSON Data
In some projects, I’ve had to render layouts or forms based on configuration files or JSON data fetched from an API. React makes this surprisingly easy.
Example: Render Components from JSON Configuration
import React from "react";
const components = {
header: (props) => <h2>{props.text}</h2>,
paragraph: (props) => <p>{props.text}</p>,
button: (props) => <button>{props.label}</button>,
};
const layout = [
{ type: "header", text: "Welcome to the USA Portal" },
{ type: "paragraph", text: "Access your account and manage settings easily." },
{ type: "button", label: "Get Started" },
];
function App() {
return (
<div>
{layout.map((item, index) => {
const Component = components[item.type];
return <Component key={index} {...item} />;
})}
</div>
);
}
export default App;You can see the output in the screenshot below.
This is incredibly flexible. You can define your entire UI in JSON, great for CMS-driven React apps or dashboards that need dynamic layouts.
Bonus Tip – Combine Dynamic Rendering with Routing
If you’re using React Router, you can easily combine dynamic component rendering with route-based navigation.
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/contact", component: Contact },
];
function App() {
return (
<Router>
<Routes>
{routes.map(({ path, component: Component }, index) => (
<Route key={index} path={path} element={<Component />} />
))}
</Routes>
</Router>
);
}
export default App;This pattern keeps your routing logic clean and makes it easy to add or remove pages dynamically.
Conclusion
Dynamic rendering in React has completely changed how I structure my front-end projects. It keeps the code modular, readable, and easier to maintain, especially when working with large-scale applications.
Whether you’re building a logistics dashboard, an analytics portal, or a SaaS product for U.S. users, these techniques will help you create flexible and high-performing React applications.
You may also read other React tutorials:
- Difference between React Component and React Element
- Create a React Loading Spinner Component
- How to Use useRef in React Functional Components
- Create Masonry Layout in React Using react-masonry-component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
