React Component Design Patterns

React design patterns are best practices that help developers solve common problems efficiently. They improve maintainability, scalability, and performance by structuring components, managing state, and optimizing data flow.

React ডিজাইন প্যাটার্ন হল প্রতিষ্ঠিত অনুশীলন ও সমাধান, যা ডেভেলপাররা সাধারণ সমস্যা সমাধানের জন্য ব্যবহার করেন যখন তারা React দিয়ে অ্যাপ্লিকেশন তৈরি করেন। এই প্যাটার্নগুলো পুনরায় ব্যবহারযোগ্য সমাধান প্রদান করে, যা কোডের রক্ষণাবেক্ষণ, স্কেলেবিলিটি এবং দক্ষতা বাড়ায়। এটি কম্পোনেন্ট গঠন, স্টেট ম্যানেজমেন্ট, ডাটা ফ্লো পরিচালনা এবং পারফরম্যান্স অপ্টিমাইজেশনে একটি কাঠামোবদ্ধ পদ্ধতি প্রদান করে।

Consider the following as the top 6 React design patterns:

  1. Container and presentation pattern
  2. The HOC(Higher Order Component)Pattern
  3. Compound Components Pattern
  4. Provider Pattern(Data management with Providers)
  5. State reducer pattern
  6. Component Composition pattern

1. Container and presentation pattern

Container এবং Presentation Pattern হল একটি জনপ্রিয় React ডিজাইন প্যাটার্ন যেখানে কম্পোনেন্টগুলোর দায়িত্ব পৃথক করা হয়।

  • Container Components মূলত ডাটা ফেচ, ম্যানিপুলেশন এবং স্টেট ম্যানেজমেন্টের কাজ করে। এগুলো API থেকে ডাটা এনে, প্রয়োজনীয় পরিবর্তন করে, এবং Presentational Components-এ props আকারে পাঠায়।
  • Presentational Components শুধুমাত্র UI রেন্ডার করে, এবং ডাটা বা লজিক সংরক্ষণ করে না। এরা সাধারণত stateless functional components বা pure components হয়ে থাকে, যা সহজে reusable এবং testable হয়।

উদাহরণ:

ধরা যাক, আমরা একটি সোশ্যাল মিডিয়া ড্যাশবোর্ড তৈরি করছি যেখানে ব্যবহারকারীরা তাদের বন্ধুদের পোস্ট দেখতে ও ইন্টারঅ্যাক্ট করতে পারবে।

  • Container Component (FriendFeedContainer) → API থেকে বন্ধুদের পোস্ট লোড করবে, ডাটা ম্যানিপুলেট করবে এবং Presentational Component-এ পাঠাবে।
  • Presentational Component (FriendFeed) → শুধুমাত্র সেই ডাটা UI-তে সুন্দরভাবে রেন্ডার করবে।

কেন এই প্যাটার্নটি দরকার?

✅ স্টেট এবং UI আলাদা হওয়ায় রক্ষণাবেক্ষণ সহজ
✅ পুনঃব্যবহারযোগ্য (Reusable) কম্পোনেন্ট তৈরি করা যায়
✅ টেস্ট করা সহজ হয়
✅ স্কেলেবিলিটি বাড়ায়

Short English Summary:

The Container and Presentation Pattern separates concerns in React:

  • Container Components handle data fetching, state management, and logic.
  • Presentational Components focus on UI rendering using props.
    This pattern improves maintainability, reusability, and scalability in React applications. 🚀


Container Component (FriendFeedContainer):
This component would be responsible for fetching data about friends' posts from an API, handling any necessary data transformations, and managing the state of the feed. It would pass the relevant data down to the Presentational Components.

Presentational Component (FriendFeed):

This component would receive the friend posts data from its parent Container Component (FriendFeedContainer) as props and render them in a visually appealing way.

By structuring our components this way, we keep the concerns of fetching data and managing the state separate from the UI rendering logic. This separation allows for easier testing, reuse, and maintenance of our React application as it scales.

2.The HOC(Higher Order Component)Pattern

Higher-Order Component (HOC) হল React-এ একটি ডিজাইন প্যাটার্ন, যা পুনঃব্যবহারযোগ্য লজিক সংযুক্ত করতে ব্যবহৃত হয়। এটি একটি ফাংশন, যা একটি কম্পোনেন্ট গ্রহণ করে এবং নতুন ফিচার যুক্ত করে নতুন কম্পোনেন্ট রিটার্ন করে।

উদাহরণ: সোশ্যাল মিডিয়া ড্যাশবোর্ডে HOC ব্যবহার

ধরা যাক, আমাদের একটি সোশ্যাল মিডিয়া ড্যাশবোর্ড আছে, যেখানে বিভিন্ন কম্পোনেন্ট User Data API থেকে ফেচ করে। যদি প্রতিটি কম্পোনেন্টে আলাদা করে API কল লেখা হয়, তাহলে কোড ডুপ্লিকেট হবে এবং মেইনটেইন করা কঠিন হবে।

✅ HOC ব্যবহার করলে:

  • একটি সাধারণ HOC তৈরি করব, যা API থেকে user data নিয়ে যে কোনো কম্পোনেন্টকে প্রপস আকারে পাঠাবে।
  • এই HOC কে বিভিন্ন কম্পোনেন্টের মধ্যে পুনঃব্যবহার (Reusable) করা যাবে।

কাজ করার ধাপ:

1️⃣ withUserData HOC: এটি API থেকে user data নিয়ে Wrapped Component-এ props আকারে পাঠাবে।
2️⃣ UserProfile Component: এটি শুধু UI-তে user data রেন্ডার করবে।
3️⃣ UserProfileWithUserData: এটি UserProfile কম্পোনেন্টের সাথে HOC যুক্ত করা নতুন কম্পোনেন্ট।
4️⃣ SocialMediaDashboard: এখানে আমরা UserProfileWithUserData রেন্ডার করব।

কেন HOC ব্যবহার করবেন?

✅ কোড পুনঃব্যবহারযোগ্য হয়, ডুপ্লিকেশন কমে
✅ একই লজিক বিভিন্ন কম্পোনেন্টে সহজে প্রয়োগ করা যায়
✅ কম্পোনেন্টের মূল UI এবং Data Fetching লজিক আলাদা থাকে
✅ স্কেলেবল অ্যাপ তৈরি করা সহজ হয়

Short English Summary:

Higher-Order Components (HOCs) allow reusing logic in React by wrapping components with extra functionality. Instead of duplicating API calls in multiple components, an HOC can fetch user data and pass it as props to wrapped components.

Example in a Social Media Dashboard:
1️⃣ HOC (withUserData) fetches user data.
2️⃣ UserProfile component receives and displays user data.
3️⃣ UserProfileWithUserData is the enhanced component.
4️⃣ Reusable logic reduces duplication and improves maintainability. 🚀

Higher-order components (HOCs) are a pattern in React that allows you to reuse component logic across multiple components. They are functions that take a component and return a new component with additional functionality.

To demonstrate the use of HOCs in a social media dashboard sample with React hooks, let's consider a scenario where you have multiple components that need to fetch user data from an API. Instead of duplicating the fetching logic in each component, you can create an HOC to handle the data fetching and pass the fetched data as props to the wrapped components.

Here's a basic example:

In this example:

  • withUserData is a higher-order component that handles the fetching of user data from an API. It wraps the passed component (WrappedComponent) and provides the fetched user data as a prop (userData) to it.
  • UserProfile is a functional component that receives the userData prop and displays the user profile information.
  • UserProfileWithUserData is the component returned by wrapping UserProfile with withUserData.
  • SocialMediaDashboard is the main component where you can render UserProfileWithUserData or any other component that needs user data.

Using this pattern, you can easily reuse the data fetching logic across multiple components in your social media dashboard application without duplicating code.

3. Compound Components Pattern

Compound Components Pattern হল React-এর একটি ডিজাইন প্যাটার্ন, যা একাধিক কম্পোনেন্টকে একত্রে কাজ করতে সাহায্য করে এবং UI-তে ফ্লেক্সিবিলিটি ও পুনঃব্যবহারযোগ্যতা বাড়ায়।

এই প্যাটার্নে,
✅ একটি Parent Component (যেমন: Toggle) স্টেট এবং লজিক সংরক্ষণ করে।
✅ Child Components (যেমন: ToggleButton এবং ToggleStatus) UI রেন্ডার করে এবং Parent থেকে প্রাপ্ত স্টেট ও ফাংশন ব্যবহার করে।
✅ Parent ও Child এর মধ্যে স্টেট শেয়ার হয়, তাই এটি বিভিন্ন অংশকে আলাদা করেও ব্যবহারের সুযোগ দেয়।

উদাহরণ: Toggle UI তৈরি করা (Compound Components Pattern)

ধরা যাক, আমরা একটি Toggle কম্পোনেন্ট বানাচ্ছি যেখানে একটি বাটন ক্লিক করলে অবস্থা (ON/OFF) পরিবর্তন হবে এবং একইসঙ্গে স্ট্যাটাস দেখাবে।

1️⃣ Toggle (Parent Component): এটি isOn নামের স্টেট সংরক্ষণ করবে এবং toggle ফাংশন দিয়ে স্টেট পরিবর্তন করবে।
2️⃣ ToggleButton (Child Component): এটি একটি বাটন হিসেবে কাজ করবে, যা ক্লিক করলে toggle ফাংশন ট্রিগার হবে।
3️⃣ ToggleStatus (Child Component): এটি UI-তে বর্তমান স্ট্যাটাস (ON/OFF) দেখাবে।
4️⃣ Parent Component (Toggle) তার চাইল্ডদের props হিসেবে প্রয়োজনীয় তথ্য ও ফাংশন পাঠাবে।

কেন Compound Components Pattern ব্যবহার করবেন?

✅ কোড পুনঃব্যবহারযোগ্য ও মডুলার হয়।
✅ কম্পোনেন্টগুলো আলাদা করেও ব্যবহার করা যায়।
✅ স্টেট এবং ফাংশন Parent-এ থাকায় সব Child একসাথে কাজ করতে পারে।
✅ UI-তে কাস্টমাইজেশন সহজ হয়।

Short English Summary:

The Compound Components Pattern allows multiple components to work together cohesively while maintaining flexibility and separation of concerns.

Example: A Toggle component with:
1️⃣ Parent (Toggle) – Manages isOn state & toggle logic.
2️⃣ Child (ToggleButton) – Renders a button to trigger toggle.
3️⃣ Child (ToggleStatus) – Displays ON/OFF status.

This pattern improves reusability, modularity, and UI customization in React applications. 🚀

The Compound Components pattern in React is a design pattern that allows you to create components that work together to form a cohesive UI, while still maintaining a clear separation of concerns and providing flexibility to customize the components' behavior and appearance.

In this pattern, a parent component acts as a container for one or more child components, known as "compound components." These child components work together to achieve a particular functionality or behavior. The key characteristic of compound components is that they share state and functionality with each other through their parent component.

Here's a simple example of implementing the Compound Components pattern in React using hooks:

In this example:

  • Toggle is the parent component that holds the compound components (ToggleButton and ToggleStatus).
  • ToggleButton is a child component responsible for rendering the toggle button.
  • ToggleStatus is another child component responsible for displaying the status of the toggle.
  • The Toggle component manages the state (isOn) and provides a toggle function to control the state. It clones its children and passes the isOn state and toggle function as props to them.

By using the Compound Components pattern, you can create reusable and composable components that encapsulate complex UI logic while still allowing for customization and flexibility.

4. Provider Pattern(Data management with Providers)

Provider Pattern হল একটি ডিজাইন প্যাটার্ন যা React Context API ব্যবহার করে অ্যাপ্লিকেশনের স্টেট বা ডেটা একাধিক কম্পোনেন্টের মধ্যে শেয়ার করার জন্য ব্যবহৃত হয়।

✅ প্রক্রিয়া:
1️⃣ createContext() ব্যবহার করে UserContext তৈরি করা হয়, যেখানে ইউজারের তথ্য সংরক্ষিত থাকে।
2️⃣ UserProvider কম্পোনেন্টের মধ্যে useState ব্যবহার করে স্টেট ম্যানেজ করা হয় (যেমন লগইন ও লগআউট ফাংশন)।
3️⃣ UserContext.Provider ব্যবহার করে, user স্টেট ও লগইন-লগআউট ফাংশন চাইল্ড কম্পোনেন্টগুলোর কাছে পাঠানো হয়।
4️⃣ useContext() হুকে মাধ্যমে যে কোনো কম্পোনেন্ট সহজেই UserContext থেকে ডেটা নিতে পারে।
5️⃣ পুরো অ্যাপ্লিকেশনকে UserProvider দিয়ে ওয়ার‍্যাপ করলে সমস্ত কম্পোনেন্ট এই ডেটা অ্যাক্সেস করতে পারে।

✅ সুবিধা:
🔹 Prop Drilling এড়ানো যায় (স্টেট পাস করার জন্য বারবার props পাঠানোর দরকার হয় না)।
🔹 স্টেট ম্যানেজমেন্ট সহজ হয় (সেন্ট্রালাইজড স্টোরেজ থেকে স্টেট অ্যাক্সেস করা যায়)।
🔹 স্কেলেবল (নতুন ফিচার সহজেই যোগ করা যায়)।

📌 Short English Answer:

The Provider Pattern in React uses Context API to share state and data across multiple components without prop drilling.

✅ Steps:
1️⃣ Create UserContext using createContext().
2️⃣ Manage authentication state inside UserProvider using useState().
3️⃣ Provide user data & functions via UserContext.Provider.
4️⃣ Consume data anywhere using useContext().
5️⃣ Wrap the app with UserProvider for global access.

Benefits:
✔ Avoids prop drilling.
✔ Centralized state management.
✔ Scalable & maintainable.

Would you like a full code example again with explanations? 😊

The Provider Pattern in React is a design pattern used for managing and sharing application state or data across multiple components. It involves creating a provider component that encapsulates the state or data and provides it to its descendant components through React's context API.

Let's walk through an example to illustrate the Provider Pattern in React for managing user authentication data:

In this example:

  • We create a context called UserContext using React's createContext function. This context will be used to share user data and authentication-related functions across components.
  • We define a UserProvider component that serves as the provider for the UserContext. This component manages the user state using the useState hook and provides methods like login and logout to update the user state.
  • Inside the UserProvider, we wrap the children with UserContext.Provider and pass the user state and the login and logout functions as the provider's value.
  • Now, any component that needs access to user data or authentication-related functions can consume the UserContext using the useContext hook.

Let's create a component that consumes the user data from the context:

In this component:

We import UserContext and use the useContext hook to access the user data and the logout function provided by the UserProvider.
Depending on whether the user is logged in or not, we render different UI elements.

Finally, we wrap our application with the UserProvider to make the user data and authentication-related functions available to all components:

In this way, the Provider Pattern allows us to manage and share application state or data across multiple components without the need for prop drilling, making our code cleaner and more maintainable.

5. State reducer pattern

State Reducer Pattern হল একটি React Design Pattern, যা useReducer() hook ব্যবহার করে স্টেট ম্যানেজমেন্ট আরও নিয়ন্ত্রিত এবং পূর্বানুমানযোগ্য (predictable) করে তোলে। এটি বিশেষভাবে কার্যকর যখন স্টেট লজিক জটিল বা একাধিক কম্পোনেন্টের মধ্যে শেয়ার করা হয়।

✅ প্রক্রিয়া:
1️⃣ অ্যাকশন টাইপ ডিফাইন করা – যেমন ADD_POST, DELETE_POST, ADD_NOTIFICATION, DELETE_NOTIFICATION।
2️⃣ Reducer Function তৈরি করা – যেখানে পুরাতন স্টেট এবং অ্যাকশন নিয়ে নতুন স্টেট রিটার্ন করা হয়।
3️⃣ useReducer() Hook ব্যবহার করা – যেখানে state এবং dispatch পাওয়া যায়, যা state আপডেট করতে ব্যবহৃত হয়।
4️⃣ ডিসপ্যাচ ব্যবহার করে অ্যাকশন পাঠানো – যখন ইউজার নতুন পোস্ট বা নোটিফিকেশন যোগ বা ডিলিট করে।
5️⃣ UI-তে লিস্ট দেখানো – ইউজার যে পোস্ট বা নোটিফিকেশন যোগ করবে তা রেন্ডারিং করা।

✅ সুবিধা:
✔ Redux-এর মতো স্টেট ম্যানেজমেন্ট, কিন্তু সহজ এবং কমপ্লেক্সিটি ছাড়া।
✔ স্টেট পরিবর্তনের লজিক এক জায়গায় থাকে, যা মেইন্টেইন করা সহজ।
✔ বিশেষত জটিল স্টেট ম্যানেজমেন্টের জন্য কার্যকর (যেমন ফর্ম হ্যান্ডলিং, স্টেপ-ওয়াইজ প্রসেস, বা সোশ্যাল মিডিয়া অ্যাপের স্টেট ম্যানেজমেন্ট)।

📌 Short English Answer:

The State Reducer Pattern in React uses the useReducer() hook to manage state transitions in a predictable way. Instead of using useState for complex logic, it centralizes state updates into a reducer function.

✅ Steps:
1️⃣ Define action types (e.g., ADD_POST, DELETE_POST).
2️⃣ Create a reducer function to handle state transitions.
3️⃣ Use useReducer() to initialize state and dispatch actions.
4️⃣ Dispatch actions to add or remove posts & notifications.
5️⃣ Render state-based UI dynamically.

✔ Centralized state logic
✔ Predictable updates
✔ Easier maintenance

Would you like a full code example with explanations? 😊

The State Reducer Pattern in React is a design pattern used to manage state in a more controlled and predictable manner. It involves using a reducer function to handle state transitions and actions, similar to how reducers work in Redux. This pattern can be particularly useful for managing complex state logic or state that needs to be shared across multiple components.

Let's walk through an example of implementing the State Reducer Pattern in React for managing a a social media dashboard application.In this example, we'll manage the state of the user's posts and notifications using a reducer function.

In this example:

  • We define action types (ADD_POST, DELETE_POST, ADD_NOTIFICATION, DELETE_NOTIFICATION) that represent different actions that can be performed on the social media dashboard state.
  • We define a reducer function (dashboardReducer) that takes the current state and an action and returns the new state based on the action.
  • We use the useReducer hook to create a stateful value (state) and a dispatch function to update the state by passing actions to the reducer.
  • The Dashboard component contains logic for adding and deleting posts and notifications. It dispatches actions to the reducer to update the state accordingly.
  • In the UI, posts, and notifications are rendered as list items with buttons to delete them.
  • Users can add new posts or notifications by clicking on the respective buttons.

This example demonstrates how to implement the State Reducer Pattern in React to manage the state of a social media dashboard, including posts and notifications. The reducer function centralizes state management logic, making it easier to understand and maintain.

6- Component Composition pattern

Component Composition Pattern হল React-এর একটি ডিজাইন প্যাটার্ন, যেখানে ছোট, পুনঃব্যবহারযোগ্য (reusable) কম্পোনেন্ট একত্রিত করে একটি বড় বা জটিল UI তৈরি করা হয়। এটি React-এর মূল ধারণার একটি গুরুত্বপূর্ণ অংশ।

✅ প্রক্রিয়া:
1️⃣ ছোট ছোট কম্পোনেন্ট তৈরি করা – যেমন UserInfo, Feed, Notifications, এবং Sidebar।
2️⃣ এই কম্পোনেন্টগুলোকে মূল কম্পোনেন্টের মধ্যে কম্পোজ করা – SocialMediaDashboard কম্পোনেন্টের মধ্যে এই ছোট কম্পোনেন্টগুলো একত্রিত করা হয়।
3️⃣ App কম্পোনেন্ট থেকে ডাটা পাঠানো – যেখানে ইউজারের তথ্য, পোস্ট, এবং নোটিফিকেশন পাঠানো হয়।
4️⃣ প্রত্যেকটি কম্পোনেন্ট নির্দিষ্ট কাজ করে – এটি reusability এবং maintainability বাড়ায়।

✅ সুবিধা:
✔ প্রত্যেকটি কম্পোনেন্ট নির্দিষ্ট কাজ করে, তাই কোড পুনঃব্যবহারযোগ্য হয়।
✔ জটিল UI-কে ছোট ছোট অংশে ভাগ করে, যা মেইনটেন করা সহজ।
✔ Props-এর মাধ্যমে ডাটা শেয়ার করা হয়, যা প্রকৃত React-এর চিন্তাধারার সাথে সামঞ্জস্যপূর্ণ।

📌 Short English Answer:

Component Composition Pattern in React is about combining smaller, reusable components to build larger UIs.

✅ Steps:
1️⃣ Create small components like UserInfo, Feed, Notifications, and Sidebar.
2️⃣ Compose them into a main component (e.g., SocialMediaDashboard).
3️⃣ Pass data via props from the App component.
4️⃣ Each component handles a specific part of the UI, improving reusability and maintainability.

✔ Reusability & Scalability
✔ Modular & Maintainable Code
✔ Clear Separation of Concerns

Would you like a full code example? 🚀

Component Composition pattern involves composing smaller, reusable components together to create more complex components or UIs. Let's illustrate this pattern with a social media dashboard example.

Suppose we have a social media dashboard that consists of several components such as UserInfo, Feed, Notifications, and Sidebar. We can compose these smaller components together to create the social media dashboard component.

In this example:

  • We have separate components for UserInfo, Feed, Notifications, and Sidebar, each responsible for rendering a specific part of the social media dashboard.
  • We compose these smaller components together in the SocialMediaDashboard component to create the entire social media dashboard UI.
  • The App component serves as the entry point where we pass sample data (user information, posts, notifications) to the SocialMediaDashboard component.

This demonstrates how we can use the Component Composition pattern to build a social media dashboard by composing smaller, reusable components together. Each component focuses on a specific aspect of the UI, promoting reusability and maintainability.

Comments

Post a Comment