DEV Community: Anuj Upadhyaya

Mastering Compound Components: Building a Flexible, Accessible Dialog

Anuj Upadhyaya — Sun, 22 Mar 2026 06:21:33 +0000

Mastering Compound Components: Building a Flexible, Accessible Dialog

Building a component library or a polished personal portfolio requires a balance between flexibility and developer ergonomics. You want components that developers can compose like Lego blocks without worrying about wiring up internal state manually.

During my recent portfolio refresh, I revisited the Compound Component pattern. It is one of React’s most powerful advanced patterns, enabling related components to share implicit state and communicate through an explicit parent-child relationship.

In this post, I’ll break down how I used this pattern to build a robust, accessible Dialog component.

What are Compound Components?

Think of the native HTML <select> and <option> tags [5-7]. The <select> manages the state, and the <option> elements act as configuration [5, 6, 8]. You don't pass props from the select to every option; they just "work" together.

In React, the Compound Component pattern encloses the state and behavior of a group of components while giving rendering control back to the user [9, 10]. This creates declarative APIs where the structure of your code matches the structure of your UI.

Figure 1: The Parent (Root) holds shared state, while Children consume it implicitly.

Why use this pattern?

Avoid Prop Drilling: No need to pass state manually through multiple levels.
Flexibility: Users can reorder or style components freely [10, 11, 14].
Separation of Concerns: The parent handles the logic; children stay "dumb" and focused on rendering [14, 16].

Building the Dialog Component

We will use the Context API to share state implicitly [15, 17, 18]. This is the modern recommended approach as it allows children to be accessible at all levels of the component tree, not just as direct children.

Step 1: The Context and Root

The root component houses the shared state—in this case, whether the dialog is open.

import React, { createContext, useContext, useState, useMemo } from 'react';

// 1. Create the Context
const DialogContext = createContext(undefined);

// 2. Create the Root Component
export function Dialog({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(prev => !prev);
  const close = () => setIsOpen(false);

  // Memoize the context value to prevent unnecessary re-renders [24, 25]
  const value = useMemo(() => ({ isOpen, toggle, close }), [isOpen]);

  return (
    <DialogContext.Provider value={value}>
      {children}
    </DialogContext.Provider>
  );
}

Step 2: Consumer Hook

To ensure our components are used correctly, we create a hook that throws a helpful error if a child is rendered outside the Dialog root.

function useDialogContext() {
  const context = useContext(DialogContext);
  if (!context) {
    // Helpful error message for developers [27]
    throw new Error('Dialog sub-components must be wrapped in <Dialog />'); 
  }
  return context;
}

Step 3: Sub-components (Trigger and Content)

We attach these components to the Dialog object for a clean, namespaced API.

// 3. The Trigger
Dialog.Trigger = function DialogTrigger({ children }) {
  const { toggle } = useDialogContext();
  return <button onClick={toggle}>{children}</button>;
};

// 4. The Content
Dialog.Content = function DialogContent({ children }) {
  const { isOpen, close } = useDialogContext();

  if (!isOpen) return null; // Only render content when open [31, 32]

  return (
    <div role="dialog" aria-modal="true" className="dialog-overlay">
      <div className="dialog-content">
        {children}
        <button onClick={close} aria-label="Close dialog">×</button>
      </div>
    </div>
  );
};

Making it Accessible by Design

Accessibility (A11Y) shouldn't be an extra step; it should be built into your components. By using compound components, you can handle ARIA attributes and keyboard interactions behind the scenes.
For a Dialog, this means:

Adding role="dialog" and aria-modal="true".
Managing focus and linking triggers to content using unique IDs.
Ensuring screen readers announce selection and state correctly.

The Result: A Declarative API

Because we used this pattern, the end-user API is incredibly clean. You can move the Trigger anywhere in relation to the Content and it will still work flawlessly.

function App() {
  return (
    <Dialog>
      <Dialog.Trigger>View Project Details</Dialog.Trigger>
      <Dialog.Content>
        <h2>Compound Pattern Project</h2>
        <p>This implementation uses React Context and Hooks.</p>
      </Dialog.Content>
    </Dialog>
  );
}

Conclusion

Compound components are a superpower for design systems. They provide an intuitive API for developers while keeping complex state and behavior encapsulated under the hood. Mastering this pattern ensures your components are not just functional, but also intuitive and inevitable.
How are you using advanced patterns in your latest projects? Let’s discuss in the comments!

Setting up a React Typescript Solution with Vite: A Practical Guide

Anuj Upadhyaya — Sun, 20 Jul 2025 12:47:33 +0000

Introduction:
Are you tired of using legacy JavaScript frameworks like React and TypeScript? Want to try something new and exciting? Look no further than Vite, the latest player in the front-end development scene. In this blog post, we'll guide you through setting up a React Typescript solution with Vite, including practical examples, tips, and tricks to make your development experience smoother and more enjoyable.

Step 1: Install Vite
The first step is to install Vite on your computer. Open your terminal or command prompt and run the following command:

npm install -g vite

This will install Vite globally, allowing you to use it across multiple projects.

Step 2: Create a New Project
Next, create a new project by running the following command in your terminal or command prompt:

vite new my-project

This will create a new directory called my-project containing the basic files and folders needed to get started with Vite.

Step 3: Configure Vite
Now it's time to configure Vite for your project. Open the vite.config.js file in the root of your project and add the following code:

module.exports = {
  // Enable TypeScript support
  typescript: true,

  // Set the entry point for the application
  entry: './src/index.tsx',

  // Define the output configuration
  output: {
    path: 'build',
    filename: 'index.js',
    publicPath: '/'
  },

  // Add plugin for TypeScript support
  plugins: [
    new VitePlugin({
      tsConfig: 'tsconfig.json'
    })
  ]
};

This configuration sets up Vite to use TypeScript and defines the entry point for your application as src/index.tsx. It also defines the output configuration and adds a plugin for TypeScript support.

Step 4: Write Your Code
Now it's time to start writing your code! Create a new file called src/index.tsx and add the following code:

function Greeting() {
  return <h1>Hello, world!</h1>;
}

export default Greeting;

This code defines a simple Greeting component that returns an <h1> element with the text "Hello, world!".

Step 5: Run Your Application
To run your application, navigate to the root of your project and run the following command in your terminal or command prompt:

vite dev

This will start the Vite development server and open your application in your default web browser. You can now interact with your application and see the changes you make in real-time.

Tips and Tricks:

Use the vite dev command to start the development server, or use vite build to build your application for production.
Use the vite config command to view and modify the configuration file.
Use the --typescript flag when running vite dev to enable TypeScript support.
Use the vite plugin command to add plugins for additional functionality, such as a CSS preprocessor or a package manager.

Conclusion:
Setting up a React Typescript solution with Vite is a straightforward process that can greatly enhance your development experience. By following the steps outlined in this guide and taking advantage of Vite's many features and tools, you can create modern and scalable front-end applications with ease. So why wait? Give Vite a try today and see how it can revolutionize your development workflow!

React 18: The Game-Changing Update You Need to Know About - Fast Renderer

Anuj Upadhyaya — Tue, 01 Jul 2025 08:57:02 +0000

React 18 introduces a new rendering engine called "Fast Renderer"

Are you tired of slow and unresponsive web applications? Do you struggle with rendering issues and performance bottlenecks? Well, you're in luck! React 18 has just introduced a brand-new rendering engine called "Fast Renderer" that's set to revolutionize the way you build web applications.

What is Fast Renderer?

Fast Renderer is a next-generation rendering engine designed to provide lightning-fast performance and seamless user experiences. It uses advanced techniques such as server-side rendering, lazy loading, and memoization to reduce the load on your server and improve page load times. With Fast Renderer, you can build applications that are not only visually stunning but also incredibly fast and responsive.

Practical Examples of Fast Renderer in Action

Better Page Load Times: With Fast Renderer, pages will load faster than ever before. This is especially important for mobile users who expect instant responses from their web applications. By using server-side rendering and lazy loading, you can significantly reduce the time it takes to load a page.
Improved SEO: Search engines like Google love fast-loading web pages. With Fast Renderer, your application will be more visible in search results, which means more traffic and higher conversion rates.
Enhanced User Experience: A slow-loading web application can be frustrating for users. By leveraging the power of Fast Renderer, you can create a seamless user experience that keeps visitors engaged and coming back for more.
Better Memory Management: Fast Renderer is designed to be memory-efficient, which means less strain on your server's resources. This results in faster load times and improved overall performance.

Tips for Utilizing Fast Renderer to Its Full Potential

Optimize Your Code: Make sure your code is optimized for Fast Renderer by using techniques such as code splitting, memoization, and lazy loading. These will help reduce the amount of work the engine has to do, resulting in faster page loads.
Leverage Server-Side Rendering: By rendering your pages on the server, you can take advantage of the improved performance offered by Fast Renderer. This also means that search engines will have an easier time indexing your content.
Use Memoization: Memoization is a technique that allows Fast Renderer to cache frequently accessed data, reducing the amount of work it has to do on each render. By using memoization, you can significantly improve performance and reduce load times.
Lazy Load Your Content: By lazy loading content, you can reduce the initial load time of your application. This allows users to see the main content of your page faster, while the rest of the content loads in the background.

Conclusion

React 18's Fast Renderer is a game-changer for web developers who want to create fast, responsive, and visually stunning applications. By leveraging its advanced rendering techniques, you can improve page load times, enhance the user experience, and optimize your code for maximum performance. So why wait? Give Fast Renderer a try today and see the difference it can make in your web application!

React 18 compared with previous react versions and Angular

Anuj Upadhyaya — Tue, 01 Jul 2025 07:01:02 +0000

React 18 compared with previous react versions and Angular

React is one of the most popular front-end frameworks in the world, and version 18 is the latest iteration of this powerful tool. In this blog post, we'll take a detailed look at what's new and improved in React 18 compared to previous versions, as well as how it compares to another popular front-end framework: Angular.

New Features in React 18

React 18 introduces several exciting new features that make it easier to build complex user interfaces and improve developer productivity. Some of the most notable new features include:

1. Hooks

Hooks are a new way to use state and other React features in functional components. They provide a more intuitive and declarative way to manage state, and they eliminate the need for class components in many cases. With hooks, you can write pure functions that have access to the state of the component, making it easier to reason about your code and avoid bugs.

2. Concurrent React

Concurrent React is a new feature that allows developers to run multiple versions of their application simultaneously, without any downtime or slowdowns. This is made possible through the use of a new JavaScript engine called "Fiber," which allows React to run in parallel with other applications on the same machine. Concurrent React opens up new possibilities for building highly responsive and interactive web applications.

3. Improved Performance

React 18 includes several performance improvements, including better handling of large datasets, improved rendering speeds, and reduced overhead when updating components. These improvements make it easier to build complex applications without sacrificing performance, and they help ensure that your application feels smooth and responsive to users.

4. New Rendering Engine

React 18 introduces a new rendering engine called "Fast Renderer," which provides faster and more efficient rendering of components. This new engine uses a different approach to rendering than previous versions of React, and it includes several optimizations that improve performance.

5. Improved Error Handling

React 18 includes improved error handling features, such as better support for handling errors in a functional way. This makes it easier to write robust and reliable code, and it helps ensure that your application can handle unexpected errors without crashing.

Comparison with Angular

While React 18 is a powerful front-end framework, it's worth comparing it to another popular framework: Angular. Here are some key differences between the two:

1. Structure

React is a library, while Angular is a full-fledged framework. This means that React provides a set of tools and components for building user interfaces, but it doesn't dictate how you structure your code or application. Angular, on the other hand, has a more structured approach to application development, with a defined module system and dependency injection.

2. Templates

React uses a virtual DOM (a lightweight in-memory representation of the real DOM) for rendering, which allows for faster and more efficient updates. Angular, on the other hand, uses a two-way data binding approach, where changes to the application state are automatically reflected in the UI. This can make it easier to build responsive and interactive applications, but it can also introduce complexity and overhead.

3. Learning Curve

React has a relatively gentle learning curve compared to Angular. React's component-based architecture and straightforward syntax make it easy for developers to get started with the framework quickly. Angular, on the other hand, has a steeper learning curve due to its more complex architecture and syntax. However, once you master Angular, you can build highly complex applications with ease.

4. Community Support

Both React and Angular have large and active communities of developers, with plenty of resources available for learning and troubleshooting. However, React's community is generally considered to be more friendly and welcoming to newcomers, while Angular's community can be more intense and competitive.

5. Long-term Support

React has been around for longer than Angular, and it has a proven track record of long-term support from Facebook (the company behind React). While both frameworks are widely adopted and supported by their respective communities, React has had more time to mature and stabilize. Angular, on the other hand, is still an evolving framework with a constantly changing landscape.

Conclusion

React 18 is a powerful front-end framework that introduces several exciting new features and improvements over previous versions. While it has some differences in structure and approach compared to Angular, React offers a more intuitive and straightforward way of building user interfaces. Ultimately, the choice between React and Angular will depend on your specific needs and preferences as a developer.