DEV Community: Priyanka-Chettri

The React Pattern That Changed How I Build Reusable Components

Priyanka-Chettri — Thu, 09 Oct 2025 10:33:07 +0000

While building components for a design system, I initially followed an existing pattern that was already in place- they all had a consistent pattern. I didn’t know what it was called, but I loved how scalable and flexible it felt.

Later, I realized… this approach had a name — the Compound Component Pattern

Let me explain with a simple example 👇

Imagine we have a Flyout Button that, when clicked, opens a menu with a list.

Now, in a typical setup, if we want the Flyout to appear over a specific component, we’d probably pass a prop like toggle from the parent and control it there.
That works — but what if we want to use this Flyout anywhere in the app, with any icon, and in multiple combinations?

That’s where the Compound Pattern comes into play.

🧩 How to Identify When to Use It

If there’s a shared state between two or more components, that shared state lives in the parent component
You want flexibility and reusability without passing props down multiple levels
You’d rather use React Context to manage state than prop drilling

Then you’re probably looking at a perfect use case for the Compound Design Pattern.

A component with compound pattern in action looks like this

<Flyout>
  <Flyout.Toggle>
    <Icon name="more" />
  </Flyout.Toggle>
  <Flyout.Menu>
    <Flyout.Item>Profile</Flyout.Item>
    <Flyout.Item>Settings</Flyout.Item>
    <Flyout.Item>Logout</Flyout.Item>
  </Flyout.Menu>
</Flyout>

Here, each sub-component (Toggle, Menu, Item) communicates through a shared context, not props.
This makes the component incredibly reusable, readable, and extensible — a win for design systems.

This pattern truly changed how I think about building components in React.
Once you start using the Compound Pattern, you realize it’s not just about cleaner code — it’s about creating a language for your UI.

𝐖𝐡𝐚𝐭 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐢𝐦𝐩𝐥𝐞 𝐓𝐨-𝐃𝐨 𝐥𝐢𝐬𝐭 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝐜𝐚𝐧 𝐭𝐞𝐚𝐜𝐡 𝐲𝐨𝐮 𝐚𝐬 𝐚 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫🎯

Priyanka-Chettri — Sun, 29 Sep 2024 10:03:50 +0000

Creating a to-do in React appears simple. However, as you introduce add on features, it opens a whole new door to explore and understand concepts. Here's how this project can enhance your understanding.

✅ 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭 𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞: Break tasks into manageable chunks with reusable components.
✅ 𝐏𝐫𝐨𝐩𝐬 & 𝐃𝐚𝐭𝐚 𝐅𝐥𝐨𝐰: Pass data seamlessly between parent and child components.
✅ 𝐂𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 𝐑𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠: Show or render components based on a condition ( example of to do: If the edit mode is on then place an input field).
✅ 𝐄𝐯𝐞𝐧𝐭 𝐇𝐚𝐧𝐝𝐥𝐢𝐧𝐠 : Understand how to handle clicks, typing, and more. On delete button click how can you delete the to-do?
✅ 𝐑𝐞𝐚𝐜𝐭 𝐡𝐨𝐨𝐤𝐬: Understand when to use useState and useEffect.

Once you've built a basic to-do application, it's time to level up by adding features that make your app more robust and user-friendly.

✅ 𝐈𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭 𝐋𝐨𝐜𝐚𝐥 𝐒𝐭𝐨𝐫𝐚𝐠𝐞: With every change in the to-dos store the input into a local storage. Use useEffect to update the local storage.
✅ 𝐈𝐦𝐩𝐫𝐨𝐯𝐞 𝐒𝐭𝐚𝐭𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐰𝐢𝐭𝐡 𝐂𝐨𝐧𝐭𝐞𝐱𝐭 𝐀𝐏𝐈: To avoid prop drilling if any and manage state more effectively, implement the React Context API. Understanding Context API solidifies your base.
✅ 𝐎𝐩𝐭𝐢𝐦𝐢𝐬𝐞 𝐰𝐢𝐭𝐡 𝐑𝐞𝐚𝐜𝐭 𝐒𝐭𝐚𝐭𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐋𝐢𝐛𝐫𝐚𝐫𝐢𝐞𝐬: As your application grows, you might notice unnecessary re-renders, especially when working with multiple components and features. Libraries like Recoil, Redux, or Zustand can help manage state efficiently and prevent re-renders.

By adding these features, you're not only enhancing functionality but also learning critical concepts like local storage, context-based state management, and optimising rendering behaviour, which are essential for building scalable React applications.

Accent Colors for Checkboxes and Radios

Priyanka-Chettri — Wed, 05 Jun 2024 12:17:05 +0000

Utilize accent-* utilities to modify the accent color of elements, ideal for customizing the appearance of checkboxes and radio buttons by replacing the browser's default color.

Here, I have given accent color accent-pink-500, you can customize the color according to your need.This comes handy if you want to customize the look of your check boxes and radio buttons according to your theme.

The code for it is given below:

<div class="mx-auto my-auto border h-[100px] w-[300px] rounded-md flex justify-center items-center gap-4 shadow-lg">
<label class="font-semibold font-serif">Accent Color</label>
<input type="checkbox" class="accent-pink-500 " id="checkbox" >
</div>

Thanks for reading!

Unveiling the Magic of hover, focus and active variants in Tailwind CSS.

Priyanka-Chettri — Tue, 28 May 2024 07:43:15 +0000

💡𝐏𝐫𝐨 𝐓𝐢𝐩: Make your UI elements pop with Tailwind CSS! Use 𝐡𝐨𝐯𝐞𝐫, 𝐟𝐨𝐜𝐮𝐬, and 𝐚𝐜𝐭𝐢𝐯𝐞 variants to enhance user experience and engagement. Your designs will thank you!

Dive into this demo to see them in action!
Ready to give it a try? Check out the code below and start
experimenting! 👇

➡️ Snippet of "hover" variant applied to a button.

➡️ Snippet of a "focus" variant applied to a button

➡️ Snippet of an "active" variant applied to a button

Overcoming Tight Coupling In OOPs With Effective Solutions

Priyanka-Chettri — Mon, 08 Apr 2024 20:14:28 +0000

Familiar with "tight coupling" in OOPs? It's a common issue where classes become overly interdependent, making code changes cumbersome and error-prone. Imagine updating one class and having to revise multiple others due to tight dependencies.

This is how a tightly coupled code looks like:

Here, the direct instantiation of Engine class within the constructor of Car class creates a strong dependency between the two classes.

The problem encountered in the above code can be solved using Dependency injection in Spring and by promoting the use of Interfaces.

METHOD 1: Dependency injection using constructor injection

Problem ❌: Tight coupling occurs when one class directly instantiates another class, using the “new” keyword

Solution 💡: Use Dependency injection to pass dependency from external sources, highly used in Spring . In the below figure the engine object is being passed as the parameter to the constructor from an external source.

METHOD 2: Using interfaces

Problem ❌: Classes depending on concrete implements rather than interfaces, causes tightly coupled relationship between them. To say, if the type of engine to be used by a car is changed the whole code has to be re written again.

Solution 💡: Use interfaces instead of using concrete classes, this gives more flexibility to a code.

Follow Me for such contents!
Happy Learning :)