DEV Community: VinaySehwag14

Deep Dive: Passing Components as Props in React

VinaySehwag14 — Tue, 11 Feb 2025 12:11:49 +0000

In modern React development, one of the powerful patterns to enhance code reusability and flexibility is passing components as props. In this post, we’ll explore what it means to pass components as props, how it can be used to build dynamic UIs, and some best practices to avoid common pitfalls.

This discussion is inspired by Episode 3 of an advanced React course, which delves into the nuances of component composition and dynamic rendering.

Introduction

In traditional React development, components typically receive data (via props) and then render UI accordingly. But what if you need to render completely different components based on context? One elegant solution is to pass components themselves as props. This pattern allows a parent component to determine not only what data to display but also how to display it.
By leveraging this approach, you can create more modular, flexible, and reusable UI elements that can adapt to varying requirements with minimal changes.

Understanding the Pattern

What Does “Passing Components as Props” Mean?
Instead of passing just data, you pass a React component (or function) as a prop. The receiving component can then render that component dynamically. This decouples the rendering logic from the component’s structure, allowing you to inject custom behavior or UI based on context.

For example, a parent component might pass a “header” or “footer” component as a prop, so the child component doesn’t need to know the specifics of how those elements are rendered.

How to Pass Components as Props

Basic Example
Let’s start with a simple example. Consider a layout component that renders a header and footer. Instead of hardcoding these elements, we allow them to be passed in as props.

// Layout.js
import React from "react";

export function Layout({ HeaderComponent, FooterComponent, children }) {
  return (
    <div className="layout">
      <header>
        {HeaderComponent ? <HeaderComponent /> : <DefaultHeader />}
      </header>
      <main>{children}</main>
      <footer>
        {FooterComponent ? <FooterComponent /> : <DefaultFooter />}
      </footer>
    </div>
  );
}

function DefaultHeader() {
  return <h1>Default Header</h1>;
}

function DefaultFooter() {
  return <p>Default Footer © 2025</p>;
}

And you can use the Layout component like so:

// App.js
import React from "react";
import { Layout } from "./Layout";

function CustomHeader() {
  return <h1>Custom Header</h1>;
}

function CustomFooter() {
  return <p>Custom Footer © 2025</p>;
}

export default function App() {
  return (
    <Layout HeaderComponent={CustomHeader} FooterComponent={CustomFooter}>
      <p>Welcome to my app!</p>
    </Layout>
  );
}

In this example, the Layout component dynamically renders the CustomHeader and CustomFooter components passed in as props. If these props are not provided, it falls back to default components.

Real-World Scenario

Imagine a dashboard component where different pages need custom sidebar or toolbar components. Instead of creating separate dashboard components for each page, you can design a generic Dashboard component that receives these elements as props:

// Dashboard.js
import React from "react";

export function Dashboard({ Sidebar, Toolbar, content }) {
  return (
    <div className="dashboard">
      <aside>{Sidebar && <Sidebar />}</aside>
      <section className="main-content">
        {Toolbar && <div className="toolbar"><Toolbar /></div>}
        <div>{content}</div>
      </section>
    </div>
  );
}

This pattern allows you to maintain a single dashboard structure while injecting different sidebar and toolbar designs as needed, improving modularity and reducing duplicate code.

Benefits of This Approach

Enhanced Reusability: Create flexible, reusable components that can be composed in different ways based on the props passed.
Dynamic Rendering: Easily swap out UI components without modifying the parent component’s logic.
Improved Separation of Concerns: Keep layout and business logic separate. The parent component controls which UI components are rendered while the child focuses on structure and data display.
Customization: Allows for high levels of customization without the need for deep prop drilling. Best Practices & Pitfalls Default Props: Always provide default components (fallbacks) to ensure your component behaves gracefully when a prop isn’t passed.

Prop Types:
Use TypeScript or PropTypes to clearly define the expected type of the component prop.

Memoization:
When passing components as props, ensure they are not re-created unnecessarily by using memoization techniques (e.g., React.memo) to optimize performance.

Common Pitfalls

Over-Complexity:
Passing too many components as props can make the component hierarchy difficult to follow. Strive for clarity.

Unstable References:
Ensure that the component props are stable across renders. Unintentionally creating new component instances on every render (e.g., inline definitions) can lead to unnecessary re-renders.

Excessive Abstraction:
While abstraction is beneficial, avoid over-abstraction that hides the component logic too much, making debugging and maintenance harder.

Conclusion
Passing components as props is an advanced pattern in React that enables greater flexibility, reusability, and dynamic composition of your UI. By decoupling layout from the actual components that render specific elements (like headers, footers, sidebars, or toolbars), you can create a more modular codebase that adapts easily to changing requirements.

What are your experiences with passing components as props? Have you used this pattern in your projects? Share your thoughts in the comments below!

Understanding Elements, Children, and Re-renders in React -Part 1

VinaySehwag14 — Tue, 11 Feb 2025 10:28:54 +0000

In modern web development, performance and efficient UI updates are key. In this blog post, we take a deep dive into some advanced React concepts—specifically, how React manages elements and children, and the re-rendering process. This discussion is inspired by the YouTube video “Elements, Children and Re-renders – Advanced React course, Episode 2” which explains these intricate topics in detail.

Introduction
React’s power lies in its efficient rendering mechanism and component-based design. By representing UI elements as plain JavaScript objects (the so-called virtual DOM), React can reconcile changes quickly without updating the entire real DOM. In this post, we explore:

What React elements are and how they form the virtual DOM
The role of children in components and the significance of keys
How and when React re-renders components
Practical tips to optimize performance and avoid unnecessary re-renders
Whether you’re an experienced React developer or looking to deepen your knowledge, these insights will help you design more performant applications.

React Elements: The Building Blocks

What Is a React Element?
At its core, a React element is a plain JavaScript object that describes a DOM node or a component. These objects are the fundamental units that React uses to build the virtual DOM. When you write JSX, it gets compiled into calls to React.createElement(), creating a tree of these elements.

For example, consider this simple JSX:


const element = (
  <div className="greeting">
    <h1>Hello, World!</h1>
  </div>
);


ReactDOM.render(element, document.getElementById('root'));

Under the hood, JSX is transformed into:

const element = React.createElement(
  'div',
  { className: 'greeting' },
  React.createElement('h1', null, 'Hello, World!')
);

This tree of elements forms the blueprint that React uses to update the actual DOM efficiently.

Understanding Children in React

The Special children Prop
Every React component can receive a special prop called children. This prop represents the nested elements within a component’s opening and closing tags. Whether there is one child or multiple children, React treats them as data that can be passed, iterated over, or conditionally rendered.

For example:

function Container({ children }) {
  return <div className="container">{children}</div>;
}

// Usage:
<Container>
  <p>This is a child element.</p>
  <p>This is another child element.</p>
</Container>

Importance of Keys

When rendering lists of children, it is essential to provide a unique key prop to each element. Keys help React identify which items have changed, been added, or removed. This makes the reconciliation process much more efficient.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

function NumberList() {
  return <ul>{listItems}</ul>;
}

Without unique keys, React may re-render more elements than necessary, adversely affecting performance.

The Re-rendering Process in React

When Do Re-renders Occur?
Re-rendering in React happens when a component’s state or props change. During a re-render, React:

Generates a new virtual DOM tree based on the updated state/props.
Diffs the new tree against the previous virtual DOM.
Applies the minimal set of changes to the actual DOM.
The Reconciliation Algorithm
React’s reconciliation (or diffing) algorithm compares the previous and current virtual DOM trees to decide what parts of the DOM need updating. If the element type and keys (for lists) remain the same, React reuses the existing component instance and only updates the changed properties.

This selective update process is what makes React performant—even when dealing with complex UIs or large sets of data.

Performance Implications & Best Practices

Avoiding Unnecessary Re-renders
To optimize React applications, consider the following techniques:

Memoization:
Use React.memo for functional components to avoid re-rendering if props have not changed.

const MyComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

Optimizing Key Usage:
Always use unique and stable keys when rendering lists. Avoid using array indices if the list order might change.

Use of useMemo and useCallback:
These hooks help cache expensive computations or functions so that they’re only recalculated when necessary.

Conditional Rendering & Splitting:
Structure your components to render only what’s needed. Utilize code splitting and lazy loading to reduce initial load times.

Debugging Re-renders

React Developer Tools can be invaluable. They allow you to inspect which components are re-rendering and why. By observing the component tree during state or prop updates, you can identify bottlenecks and refine your component structure accordingly.

Conclusion
Understanding how React handles elements, children, and re-renders is essential for building performant applications. By mastering these concepts, you can:

Design efficient component hierarchies: Use keys and children wisely to facilitate optimal reconciliation.

Optimize rendering: Employ memoization techniques and proper state management to avoid unnecessary work.

Debug effectively: Leverage React Developer Tools to monitor and improve component behavior.
If you’re eager to delve deeper, consider watching the full advanced course playlist. Experiment with the code examples provided here and observe how small changes can have a big impact on performance.

Happy coding!

References:

Optimizing React Re-renders: A Developer’s Complete Guide

VinaySehwag14 — Wed, 22 Jan 2025 07:43:00 +0000

Optimizing React Re-renders: A Developer's Complete Guide

VinaySehwag14 ・ Jan 22

Optimizing React Re-renders: A Developer's Complete Guide

VinaySehwag14 — Wed, 22 Jan 2025 07:41:58 +0000

React is known for its ability to efficiently update and render UI components. However, as your application grows, unnecessary re-renders can creep in, affecting performance and user experience. In this guide, we'll dive deep into React optimization strategies and provide practical examples to ensure your app runs smoothly.

Why Optimize React Re-renders?

React’s rendering process is efficient, but unnecessary re-renders can:

Increase CPU usage, slowing down apps.
Cause visible lags for users.
Lead to hard-to-debug performance issues.

The good news is that React provides tools and patterns to optimize rendering.

1. State Colocation

What It Is:
State colocation means keeping state close to where it’s needed. This minimizes the impact of state changes on unrelated components.

Example:

Bad Example:

function Parent() {
  const [input, setInput] = useState("");

  return (
    <div>
      <ChildA input={input} setInput={setInput} />
      <ChildB />
    </div>
  );
}

function ChildA({ input, setInput }) {
  return (
    <input
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="Type something"
    />
  );
}

function ChildB() {
  console.log("ChildB re-rendered unnecessarily!");
  return <div>I’m unrelated to the input field.</div>;
}

Problem:
ChildB re-renders every time the input state changes, even though it doesn’t use input.

Optimized Example:

function Parent() {
  return (
    <div>
      <ChildA />
      <ChildB />
    </div>
  );
}

function ChildA() {
  const [input, setInput] = useState("");

  return (
    <input
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="Type something"
    />
  );
}

function ChildB() {
  console.log("ChildB rendered only once!");
  return <div>I’m unrelated to the input field.</div>;
}

Why It's Better:
By colocating input state inside ChildA, ChildB doesn’t re-render unnecessarily.

2. Derived State

What It Is:
Derived state avoids duplicating data by calculating values dynamically.

Example:

Bad Example:

function Cart({ items }) {
  const [total, setTotal] = useState(0);

  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price, 0));
  }, [items]);

  return <div>Total: {total}</div>;
}

Problem:
The total state duplicates data already present in items and risks getting out of sync.

Optimized Example:

function Cart({ items }) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  return <div>Total: {total}</div>;
}

Why It's Better:
total is derived directly from items, ensuring consistency and reducing unnecessary logic.

3. Component Composition

What It Is:
Breaking large components into smaller, focused ones limits the impact of changes.

Example:

Bad Example:

function Dashboard({ user }) {
  return (
    <div>
      <div>Welcome, {user.name}!</div>
      <Notifications user={user} />
      <Settings user={user} />
    </div>
  );
}

Problem:
Any change in user forces the entire Dashboard to re-render.

Optimized Example:

function Dashboard({ user }) {
  return (
    <div>
      <UserProfile name={user.name} />
      <Notifications user={user} />
      <Settings user={user} />
    </div>
  );
}

function UserProfile({ name }) {
  return <div>Welcome, {name}!</div>;
}

Why It's Better:
By splitting responsibilities, re-renders affect only updated parts.

4. Context Optimization

What It Is:
Using multiple smaller contexts instead of one large context avoids widespread re-renders.

Example:

Bad Example:

const AppContext = React.createContext();

function AppProvider({ children }) {
  const value = { user: { name: "Vinay" }, theme: "dark" };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

function Profile() {
  const { user } = useContext(AppContext);
  return <div>{user.name}</div>;
}

function ThemeSwitcher() {
  const { theme } = useContext(AppContext);
  return <button>{theme}</button>;
}

Problem:
Changing theme causes Profile to re-render unnecessarily.

Optimized Example:

const UserContext = React.createContext();
const ThemeContext = React.createContext();

function AppProvider({ children }) {
  return (
    <UserContext.Provider value={{ name: "Vinay" }}>
      <ThemeContext.Provider value="dark">
        {children}
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

function ThemeSwitcher() {
  const theme = useContext(ThemeContext);
  return <button>{theme}</button>;
}

Why It's Better:
Changes in theme no longer trigger re-renders in Profile.

5. Memoization

What It Is:
Use useMemo and useCallback to cache values and functions, avoiding unnecessary recomputation.

Example:

Without Memoization:

function ExpensiveComponent({ data }) {
  const result = data.reduce((sum, item) => sum + item.value, 0);
  console.log("Expensive computation!");
  return <div>{result}</div>;
}

Optimized Example:

function ExpensiveComponent({ data }) {
  const result = useMemo(() => {
    console.log("Expensive computation!");
    return data.reduce((sum, item) => sum + item.value, 0);
  }, [data]);

  return <div>{result}</div>;
}

Why It’s Better:
The computation is cached and recalculated only when data changes.

6. Lift Expensive Components

What It Is:
Reuse expensive components across renders by lifting them higher in the component tree.

Example:

Without Optimization:

function Parent() {
  return (
    <div>
      <ExpensiveComponent />
      <Child />
    </div>
  );
}

function ExpensiveComponent() {
  console.log("Expensive component rendered!");
  return <div>I’m expensive!</div>;
}

Optimized Example:

const StaticExpensiveComponent = <ExpensiveComponent />;

function Parent() {
  return (
    <div>
      {StaticExpensiveComponent}
      <Child />
    </div>
  );
}

Why It’s Better:
ExpensiveComponent is rendered only once and reused across renders.

Conclusion

Optimizing React re-renders is a vital skill for creating performant and scalable applications. By following these strategies—state colocation, derived state, component composition, context optimization, memoization, and lifting expensive components—you can ensure your app remains efficient as it grows.

Do you have other optimization tips? Let’s discuss in the comments!

How to add different Authentication in Mern App??

VinaySehwag14 — Fri, 09 Jul 2021 07:54:01 +0000

Hy Guys , I am making a e-commerce project using MERN stack and I need help from you guys . In this project , I use jwt authentication .So for login and signup user have to make user profile into my app , but i want to add feature of login through google , fb etc. So I want to know that where i can do this google auth or fb auth in backend or can i able to feature in this forntend .I dont how to do it .

Project Ideas for NodeJS or MERN stack applications

VinaySehwag14 — Fri, 18 Jun 2021 16:13:45 +0000

Hey, I self-taught JavaScript, react, node, MongoDB. I had built many small react projects and One MERN stack app but not myself, by following courses, So you can understand, that without getting hand dirty, you will not get confidence in coding, there will be more self-doubt always in my heart. So decided to make a project by myself to remove that doubt from my heart. But now I am not able to decide on what project I can work on. So I am here to get help from my fellas. Can anybody tell me on which MERN project I have to work on. There are many experience coders here, So please give me some ideas to work on.

What to do next ??

VinaySehwag14 — Sun, 18 Oct 2020 17:10:11 +0000

I started coding recently , I have some knowledge of Html , CSS , Js and python . what should i do next to get better at coding . What can i do with these?

GOING TO NEW FAMILY

VinaySehwag14 — Thu, 15 Oct 2020 21:56:36 +0000

DEV Community: VinaySehwag14

Deep Dive: Passing Components as Props in React

Introduction

Understanding the Pattern

How to Pass Components as Props

Real-World Scenario

Benefits of This Approach

Understanding Elements, Children, and Re-renders in React -Part 1

Understanding Children in React

Importance of Keys

The Re-rendering Process in React

Performance Implications & Best Practices

Debugging Re-renders

Optimizing React Re-renders: A Developer’s Complete Guide

Optimizing React Re-renders: A Developer's Complete Guide

VinaySehwag14 ・ Jan 22

Optimizing React Re-renders: A Developer's Complete Guide

Why Optimize React Re-renders?

1. State Colocation

Example:

Bad Example:

Optimized Example:

2. Derived State

Example:

Bad Example:

Optimized Example:

3. Component Composition

Example:

Bad Example:

Optimized Example:

4. Context Optimization

Example:

Bad Example:

Optimized Example:

5. Memoization

Example:

Without Memoization:

Optimized Example:

6. Lift Expensive Components

Example:

Without Optimization:

Optimized Example:

Conclusion

How to add different Authentication in Mern App??

Project Ideas for NodeJS or MERN stack applications

What to do next ??

GOING TO NEW FAMILY

What I Learned From Hacktoberfest