Sealed class in java 

Do you know that React Reconciler uses double buffering

Config PWA in your next app





## 1. Introduction

Enums are a special type of class used to define a fixed set of constants. But they can do more than just hold values.

Like regular classes, enums can have fields, constructors, and methods. They can even have abstract methods, allowing each enum constant to provide its own implementation.

This makes enums useful for more than defining a list of possible values. We can also use them to encapsulate behavior and implement some design patterns in a simple way.

In this article, we will look at how enums can help us implement patterns such as **Singleton** and **Strategy**, and when this approach makes sense.

## 2. A quick look at enums

Let's start with a simple example:

```java
public enum Status {
    APPROVED,
    NOT_APPROVED,
    PENDING
}
```

We can use it like any other type:

```java
private Status currentStatus = Status.APPROVED;
```

One advantage over using `public static final int` constants is that enums provide type safety. We cannot accidentally assign an unrelated integer to a variable of type `Status`.

But what makes enums more interesting is that each constant can also have its own behavior.

## 3. Enums with fields, constructors, and methods

Enums can contain fields and constructors, just like regular classes.

For example, imagine we want to give each status a readable label and define whether that status is final:

```java
public enum Status {

    NEW("New") {
        @Override
        public boolean isFinal() {
            return false;
        }
    },

    APPROVED("Approved") {
        @Override
        public boolean isFinal() {
            return true;
        }
    },

    REJECTED("Rejected") {
        @Override
        public boolean isFinal() {
            return true;
        }
    };

    private final String label;

    Status(String label) {
        this.label = label;
    }

    public String getLabel() {
        return label;
    }

    public abstract boolean isFinal();
}
```

Here, each constant provides its own implementation of `isFinal()`.

When we call:

```java
Status status = Status.APPROVED;

System.out.println(status.getLabel());
System.out.println(status.isFinal());
```

The enum uses the implementation associated with the selected constant.

This is interesting because we no longer need to write a `switch` or multiple `if` statements just to determine the behavior of a status.

Each constant knows how it should behave.

## 4. Using enums to encapsulate behavior

Let's take the previous example a little further.

Imagine we have a system that handles loan requests. Depending on the current status, some actions might be allowed and others might not.

One approach would be to put all the logic in a service:

```java
public boolean canCancel(Loan loan) {
    switch (loan.getStatus()) {
        case NEW:
            return true;
        case APPROVED:
            return true;
        case REJECTED:
            return false;
        default:
            return false;
    }
}
```

This works, but as the number of statuses and behaviors grows, the service can become full of conditions.

We can move that behavior into the enum instead:

```java
public enum LoanStatus {

    NEW {
        @Override
        public boolean canCancel() {
            return true;
        }
    },

    APPROVED {
        @Override
        public boolean canCancel() {
            return true;
        }
    },

    REJECTED {
        @Override
        public boolean canCancel() {
            return false;
        }
    };

    public abstract boolean canCancel();
}
```

Now the service becomes simpler:

```java
public boolean canCancel(Loan loan) {
    return loan.getStatus().canCancel();
}
```

The important idea here is that we are moving behavior closer to the data it belongs to.

This can be useful when the behavior is small, fixed, and directly related to the enum value.

However, we should not put every business rule inside an enum. If the behavior requires database access, external services, or complex dependencies, a dedicated service is usually a better choice. Otherwise, the enum can become a God object.

## 5. Using enums to implement the Singleton pattern

The Singleton pattern ensures that a class has only one instance and provides a common access point to it.

Usually, we implement it with a private constructor and a static instance:

```java
public class ApplicationConfiguration {

    private static final ApplicationConfiguration INSTANCE =
            new ApplicationConfiguration();

    private ApplicationConfiguration() {
    }

    public static ApplicationConfiguration getInstance() {
        return INSTANCE;
    }
}
```

But Java gives us another way to implement this pattern using enums:

```java
public enum ApplicationConfiguration {

    INSTANCE;

    private String applicationName = "Reliable Commerce";

    public String getApplicationName() {
        return applicationName;
    }
}
```

We can access it directly:

```java
String name = ApplicationConfiguration.INSTANCE.getApplicationName();
```

Why does this work?

Each enum constant is created only once per enum class loaded by a classloader. So `INSTANCE` represents one shared instance.

The enum approach also gives us important guarantees:

- The instance is initialized safely by the JVM.
- It is safe when accessed by multiple threads.
- Java provides serialization protection for enum constants.

This makes enum Singleton a simple and reliable implementation when we genuinely need a Singleton.

One important note for Spring applications: for application services and configuration components, we should normally use Spring-managed beans instead of creating our own Singleton. Spring already manages the lifecycle and scope of these objects.

## 6. Using enums to implement the Strategy pattern

The Strategy pattern allows us to define multiple implementations of an operation and choose which one to execute.

Let's take a payment system as an example.

We might have different payment methods, such as PayPal and Visa.

A traditional Strategy implementation could look like this:

```java
public interface PaymentStrategy {
    void pay(Payment payment);
}
```

Then we create a class for each implementation:

```java
public class PaypalPaymentStrategy implements PaymentStrategy {

    @Override
    public void pay(Payment payment) {
        System.out.println("Pay with PayPal");
    }
}
```

```java
public class VisaPaymentStrategy implements PaymentStrategy {

    @Override
    public void pay(Payment payment) {
        System.out.println("Pay with Visa");
    }
}
```

This is a good approach, especially when strategies have their own dependencies or need to be injected by Spring.

But what if our strategies are simple and fixed?

We can use an enum instead:

```java
public enum PaymentStrategy {

    PAYPAL {
        @Override
        public void pay(Payment payment) {
            System.out.println("Pay with PayPal");
        }
    },

    VISA {
        @Override
        public void pay(Payment payment) {
            System.out.println("Pay with Visa");
        }
    };

    public abstract void pay(Payment payment);
}
```

Now we can select a strategy and execute it:

```java
PaymentStrategy strategy = PaymentStrategy.PAYPAL;

strategy.pay(payment);
```

Each enum constant provides its own implementation of the same method.

This gives us a simple way to implement the Strategy pattern without creating multiple classes.

### When should we use each approach?

The enum approach is useful when:

- The list of strategies is fixed.
- The implementations are relatively simple.
- We don't need to inject different dependencies into each strategy.
- We want to keep the implementation close to the available options.

The traditional Strategy pattern is more appropriate when:

- Strategies need dependencies.
- New implementations may be added dynamically.
- We need Spring dependency injection.
- Different implementations have more complex responsibilities.

So the enum approach does not replace the traditional Strategy pattern. It gives us another option when the problem is small and the available strategies are known in advance.

## 7. A couple of useful enum collections: EnumSet and EnumMap

Java also provides two specialized collections designed to work with enums.

### EnumSet

`EnumSet` is a specialized implementation of `Set` that stores enum values.

For example:

```java
EnumSet<Status> activeStatuses = EnumSet.of(
        Status.NEW,
        Status.APPROVED
);
```

It is particularly useful when we need to work with a group of enum values. Internally, it uses a compact representation, making it very efficient.

### EnumMap

`EnumMap` is a specialized implementation of `Map` where the keys are enum constants.

For example:

```java
EnumMap<Status, String> messages = new EnumMap<>(Status.class);

messages.put(Status.NEW, "Waiting for review");
messages.put(Status.APPROVED, "Your request was approved");
messages.put(Status.REJECTED, "Your request was rejected");
```

Since the keys are enum values, `EnumMap` can use an array-based internal representation rather than a general-purpose hash table.

These collections are useful when we want to work with enum values efficiently, especially when the enum is used as a fixed set of keys or options.

## 8. Conclusion

Enums are more than a way to define a fixed list of constants.

By giving them fields, constructors, and method implementations, we can use them to encapsulate behavior and simplify some common design patterns.

The Singleton pattern is one example where enums provide a safe and simple implementation. The Strategy pattern is another example where we can avoid creating multiple classes when the available strategies are fixed and simple.

But, as always, the goal is not to use enums everywhere. We should choose the approach that makes the code easier to understand, maintain, and extend.

Sometimes a simple enum is enough. Sometimes a dedicated class or interface is the better solution.

The important thing is understanding that enums are not just constants. They can also be a useful tool for designing our applications.

Enums and Method Implementations: Using Enums with Design Patterns


# Database indexes, how they work, and why using indexes makes reading very fast

**H**ey friends, our goal as software engineers is to deliver apps that are performant and responsive to user requests. In this article, we will discuss indexes, how they help us achieve great response times, how they work under the hood, and the types of indexes available.

# **What Are Indexes and What Problem Do They Solve?**

Database indexes function like the index of a book: instead of searching through the entire content page by page, we can locate the specific information we need quickly. For example, consider an HR document where employees are sorted and grouped by letter or age. If you need to find an employee who is 40 years old, you can directly access the relevant section without scanning through employees of other ages. This approach replaces querying unorganized data and streamlines the process.

## Types of Indexes

Indexes use a B-tree data structure, allowing efficient lookups without traversing each item sequentially. In relational database management systems (RDBMS), there are two main types of indexes: **Clustered Index** and **Non-clustered Index**. Let’s explore the differences between them.

## Clustered Index

In an RDBMS, the primary key automatically creates a clustered index on a column. A clustered index defines the physical order of the data in the table, significantly impacting query performance. There can be only one clustered index per table. If you choose to change the default primary key, do so with caution to optimize the most common and critical queries for your application, as it may have drawbacks.

### The clustered index is stored this way in the B-tree

<Img alt="Clustered Index" src="/assets/blog/indexes-in-database/indexes-Copy_of_clustred.jpg" />

The diagram consists of three parts: the tree, index rows, and data rows. Let’s define each part:

1. **Index Rows**: These data structures contain only the clustered index.
2. **Data Rows or Leaf Nodes**: The data rows hold the actual data for the table. Each row corresponds to a record in the table and contains the values for each column of that record.

When you select a user with ID = 11, instead of searching one by one, the system directly navigates to the appropriate section of the tree (between index rows 6 and 12) and then drills down to the specific data row.

<Img
  alt="Clustered Index in details"
  src="/assets/blog/indexes-in-database/indexes-clustred-with-red-arrow.drawio.png"
/>

## Non-Clustered Index

A non-clustered index operates differently from a clustered index. Instead of storing data rows (leaf nodes), a non-clustered index creates a tree structure that stores row locators—pointers to the actual data in memory. The data is stored in one place, and the index is stored in another place. Since the data and non-clustered index are stored separately, you can have multiple non-clustered indexes on a table. A non-clustered index does not dictate the physical order of data in the table; instead, it stores a separate data structure that contains a copy of the indexed columns along with a pointer to the actual data rows.

In the table and image below, there’s a tree explaining each element in the tree:

**Key Values**: Values that are used as keys in the index data structure. These values are typically extracted from one or more columns in the table being indexed and are sorted in alphabetical order.

**Row Locators**: These contain a copy of the index values we created and reference the clustered index that was created by default. In this example, we use the ID of the user because the ID is the primary key, so the cluster ID will look like this:

The tree will look like this:

| ID  | Name   | Company  |
| --- | ------ | -------- |
| 1   | wassim | Maltem   |
| 2   | Jhon   | Github   |
| 3   | Frenk  | Facebook |

## **Non-clustered Index in Action**

When you request a user with the name 'Wassim' and the name is a non-clustered index, it will search the key values in the tree that start with 'W'. After finding the key value, it will dig deeper into the tree to look in row locators for the non-clustered index. Once the database finds the name in the row locators, it will query the document or table associated with the non-clustered index, along with the clustered index, which is the ID in this case.

## **Attention: When to Avoid Creating Indexes**

Indexes are automatically maintained whenever the table data is modified. They significantly impact query performance and data retrieval efficiency. However, creating too many index keys can hurt database write performance because each time data is written, the indexes must be updated.


Understanding Database Indexes: Boosting App Performance


Mapped types are one of the best tools in TypeScript for transforming types. It takes a type and turns it into another type in an organized and deliberate way. You can think of the mapped type as Array.map – iterating over it to create new types. This is the same pattern used to create utilities in TypeScript, such as Pick Partial, and Required. We will see examples of how to create your own Pick, Omit … with custom conditions.

Mapped types Syntax

```tsx
[P in K]: T
```

Here, <Tag>P</Tag> is a variable that represents a property key of the original type <Tag>K</Tag>. We can customize <Tag>P</Tag> as we want; we can use <Tag>as</Tag> to convert it to sommthing else or create new key using literal strings. <Tag>T</Tag> is the type that the property will be transformed into. Here, we can use it to create a new type.

# Create mapped type

Let’s imagine we have a static union

```tsx
type union = 'firstname' | 'lastname'
```

or we can create a union from an object we have already, using keyof and typeof

```tsx
// typeof: returns the  object with key and values as the type
// keyof: return union from keys of the object

const obj = {
  firstname: 'wassim',
  lastname: 'nassour'
}

type keys = keyof typeof obj
```

Let’s create a mapped type that switches all strings in the obj to a boolean

```tsx
const obj = {
  firstname: string,
  lastname: string
}

type objBolean = {
  [k in obj]: boolean
}

// using generics
type objBoolean<T extends {}> = {
  //  T extends {} is a conditional check to check if T is the Object first
  [k in keyof typeof T]: boolean
}
```

Now if you use objBoolean on obj you will get

```tsx
{
  firstname:boolean,
  lastname:boolean
}
```

# implement your Own Pick, Recod ….

## Implementation of Record :

```tsx
type MyRecod<K extends string | number | symbol, T> = {
  [P in K]: T
}
```

<Tag>P in K</Tag>, <P className="inline text-white">means, that the key property in an object will match one of the K arguments and T is the type of value can object has T can be anything in this example but we can put some constraints</P>

## Implementation of Pick :

```typescript
//This is how Pick is implemented, Pick will try to pick only the matched keys with K
// and T is the Object
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

//We can implement Pick with optional keys
type PickOptional<T, K extends keyof T> = {
  [P in K]?: T[P]
}

//We can implement Pick with read-only  keys
type PickWithReadOnly<T, K extends keyof T> = {
  readonly [P in K]?: T[P]
}
```

# Key Remapping with String Litterlale

With the feature of key mapping in typescript and the help of <Tag>as</Tag> You can leverage features like [template literal types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html) to create new property names from prior ones:

example we have a normal typescript object type containing data like this :

```tsx
const dataState = {
  game: number,
  player: number
}
```

and we want to create another type containing actions like setPlayer and setGame , we can simply do this

```tsx
type dataState = {
  game: number
  player: number
}

type dataActions = {
  [K in keyof dataState as `set${Capitalize<K>}`]: (arg: dataState[K]) => dataState[K]
}

function methods(actions: dataActions) {
  actions.setGame(3)
  // if we try to run setGame with string we will get this error
  // argument of type 'string' is not assignable to the parameter of type 'number'.(2345)
}
```

# Filtering out Properties

In TypeScript, you can filter properties out of an object type using the Omit utility type, or you can create a custom type that excludes specific properties. In this explanation, we will implement our custom Omit type, which will allow us to perform more advanced filtering, such as excluding properties based on string literals or specific conditions, like excluding all properties that are functions or numbers, or any other criteria you require.

This is an example of normal Omit without any typescript utility

```tsx
interface Obj {
  name: string
  lastname: string
  age: string
}
type MyOmit<T, K extends keyof T> = {
  [Key in keyof T as Key extends K ? never : Key]: T[Key]
}

type TestOmit = MyOmit<Obj, 'name' | 'age'>
```

# Filtering using String Litterlal

This is an example of normal Omit without any typescript utility

```tsx
interface Obj {
  name: string
  nameAgain: string
  age: string
}

//We removed the extends here because will provide a
//key that the typescript can't know
type MyOmit<T extends {}, K> = {
  [Key in keyof T as Key extends K ? never : Key]: T[Key]
}

type TestOmit = MyOmit<Obj, `name${string}`>
```

using <Tag>`name${string}`</Tag> will exclude all properties that start with a name and follow a string

# Filtering based on values

```typescript
interface Obj {
  name: string
  nameAgain: string
  age: string
}

type OmitFunction<T, K> = {
  [Key in keyof T as T[Key] extends () => void ? never : Key]: T[Key]
}

type TestOmit = OmitFunction<Obj>
```

this OmitFunction will exclude all properties that have a value of function that returns void

<br />
<br />

Thank you for reading this article, See you in the next article chuss 👋


Mapped Types in Typescript 


Hi folks, we will discuss how to upload images to S3 buckets using the <Tag>getSignedUrl</Tag> method. This method enables direct uploading of images to S3 without having to first upload them to your server.

## How it’s work and why this way is more scalable:

<br />

This image explains the full flow.

<Img
  className="w-full"
  alt="Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl"
  src="/assets/blog/Upload-Images-to-S3-buckets-with-React-and-Node/flow.png"
/>

One of the ways to upload images to S3 buckets is to handle the image on the server before sending it to S3. However, this requires more resources on the backend, which can result in slower processing times. An alternative approach is to upload the image with a signed URL. This method requires fewer resources because with <Tag>getSignedUrl</Tag>, we only need to specify the operation name and some parameter objects.

After using the <Tag>getSignedUrl</Tag> method to upload images to S3 buckets on the server, we are returned a URL as results. We can utilize the URL to perform a PUT request with the image on the React client. This approach enables direct uploading of the image to S3 without passing through the server. Consequently, the approach is more scalable, as it reduces the backend's load and improves processing times.

## Security :

<Li> Users cannot spam our S3 bucket with many files.</Li>
<Li> Users cannot request</Li>
<Li> a URL for one file and then upload a different one. </Li>
<Li> URLs can expire.</Li>
<Li>URLs are generated securely through a request between our server and AWS.</Li>
<Li>URLs can only work for the specific S3 bucket they were created for.</Li>

## implementations :

this is the backend implementation

```javascript
const AWS = require('aws-sdk')

const s3 = new AWS.S3()

AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
})

app.post('/upload-image', async (req, res) => {
  const { fileName, fileType } = req.query

  const s3Params = {
    // name_of_your_bucket_here
    Bucket: process.env.S3_BUCKET,
    // define name of the resource in the s3 bucket it’s better to use it like this
    // way resourseName +’/’+ random id better to use UID
    Key: fileName,
    // file type Image/Jpeg...
    ContentType: fileType,
    // expires in 60 seconds
    Expires: 60
  }

  try {
    const signedUrl = await getSignedUrl(s3, s3Params)
    console.log(signedUrl)
    res.json({ signedUrl })
  } catch (err) {
    console.error(err)
    next(err)
  }
})
```

## React Implementation:

Let's consider that you have created a form and are now in the function that will upload an image to your backend.

```javascript
async function uploadImage({ fileName, fileType }) {
  const options = { fileName, fileType }

  const response = await axios.post('/upload-image', options)

  if (response?.url) {
    axios.put(response?.url, file, options)
  }
}
```

### Handling CORS

<Li>S3 Bucket setting</Li>
<Li>Create a DNS compliant bucket name</Li>
<Li>Set default encryption</Li>
<Li>Give appropriate read and write permissions</Li>
<Li>Add the following CORS rules</Li>

```xml
  <?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>/ origins allowed to upload image /</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

```

<AnchorLink
  href="https://github.com/wassimnassour/Upload-Images-to-S3-buckets-with-React-and-Node-/blob/main/index.js"
  target="_blanc"
  className="text-secondary"
>
  full code
</AnchorLink>


Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl


The single responsibility principle is created by Robert C. Martin , and the main goal and idea behind it is that every class, module, component, and hook …, should have only one responsibility/purpose, and the reason for making a module or component… have single responsibility will help us in a lot of things

<Li>reduce the number of bugs</Li>
<Li>improve our development experience</Li>
<Li>avoid unexpected bugs</Li>
<Li>writing test will be extremely fast and easy because our code has only one responsibility</Li>
---

if we have a component that renders a list of users I see no reason, that component should hold information about users

as well, when our requirement in a component or hook changes the surface of changes and affected code will be small, opposite if we have conflicted code a component does a lot of things that can lead to some side effects or changes

writing tests will be easy too, and this principle can help us also when writing TDD cuz you wrote a small component that requires less test, also building our component, and hooks independently, and composing them together, Reuse will become an obvious citizen of your systems.

I will write an example of a component that doesn’t use this principle and I will apply it to see the difference and how it can help us

this is our component called Users fetches users from the backend listing all of them and filter

```tsx
import axios from 'axios'
import { useEffect, useMemo, useState } from 'react'

const api = 'https://jsonplaceholder.typicode.com/users'

interface User {
  id: string
  name: string
  username: 'Bret'
  email: string
  address: Object
  phone: string
  website: string
  company: {
    name: string
    catchPhrase: string
    bs: string
  }
}

export function Users() {
  const [users, setUsers] = useState<User[]>([])
  const [searchKeyword, setSearchKeyword] = useState('')

  const fetchProducts = async () => {
    const response = await axios.get(api)
    if (response && response.data) setUsers(response.data)
  }

  useEffect(() => {
    fetchProducts()
  }, [])

  const filterUsers = useMemo(
    () =>
      users.filter((user: User) => user.name.toLowerCase().includes(searchKeyword?.toLowerCase())),
    [users, searchKeyword]
  )

  return (
    <div className="flex flex-col h-full w-full">
      <div className="flex flex-col justify-center items-center">
        <input
          className="border"
          placeholder="search for user"
          onChange={e => setSearchKeyword(e.target.value)}
        />
      </div>
      <div className="h-full flex mt-10  flex-wrap justify-center">
        {filterUsers?.map(user => (
          <div className="max-w-md mr-2 mb-3 p-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
            <div className="flex justify-end px-4 pt-4">
              <div
                id="dropdown"
                className="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
              >
                <ul className="py-2" aria-labelledby="dropdownButton">
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Edit
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Export Data
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Delete
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="flex flex-col items-center pb-10">
              <img
                className="w-24 h-24 mb-3 rounded-full shadow-lg"
                src="https://i.pravatar.cc/300"
                alt={user?.id}
              />
              <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
                {user?.name}
              </h5>
              <span className="text-sm text-gray-500 dark:text-gray-400">
                {user?.company?.name}
              </span>
              <div className="flex mt-4 space-x-3 md:mt-6">
                <a
                  href="#"
                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                >
                  Add friend
                </a>
                <a
                  href="#"
                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
                >
                  Message
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
```

our Users Components have more than one responsibility, fetch users, list users, and search for user, let’s use the SRP principle to clean and organize this code based on the responsibilities

<Img src={'/assets/blog/Single-responsibility-in-react/1.png'} />

this is our code after using the principle, created a Component for listing users and move our fetching from the backend logic to separate hook, do the same with the search separate search logic from the search component

```tsx
import { useState } from 'react'
import { User } from '../types/user'
import { useFetchUsers, useSearchUser } from './hooks'
import { UserCard } from './UserCard'
import { SearchUserComponent } from './SearchUser'

export function Users() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const { users } = useFetchUsers()
  const { filterUsers } = useSearchUser({ searchKeyword, users })

  return (
    <div className="flex flex-col h-full w-full">
      <SearchUserComponent setSearchKeyword={setSearchKeyword} />
      <div className="h-full flex mt-10  flex-wrap justify-center">
        {filterUsers?.map((user: User) => (
          <UserCard user={user} />
        ))}
      </div>
    </div>
  )
}
```

useFetchUsers fetch all users

```tsx
import axios from 'axios'
import { useEffect, useState } from 'react'

import { User } from '../../types/user'

const api = 'https://jsonplaceholder.typicode.com/users'

export const useFetchUsers = () => {
  const [users, setUsers] = useState<User[]>([])

  const fetchProducts = async () => {
    const response = await axios.get(api)
    if (response && response.data) setUsers(response.data)
  }

  useEffect(() => {
    fetchProducts()
  }, [])

  return {
    users
  }
}
```

useFilterUsers hook for search for specific user

```tsx
import { useMemo } from 'react'
import { User } from '../../types/user'

interface Params {
  users: User[]
  searchKeyword: string
}

export const useSearchUser = ({ searchKeyword, users }: Params) => {
  const filterUsers = useMemo(
    () =>
      users.filter((user: User) => user.name.toLowerCase().includes(searchKeyword?.toLowerCase())),
    [users, searchKeyword]
  )

  return {
    filterUsers
  }
}
```

UserCard component display only the user information only

```tsx
import { User } from '../../types/user'

interface Props {
  user: User
}

export const UserCard = ({ user }: Props) => (
  <div className="max-w-md mr-2 mb-3 p-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <div className="flex justify-end px-4 pt-4">
      <div
        id="dropdown"
        className="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
      >
        <ul className="py-2" aria-labelledby="dropdownButton">
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Edit
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Export Data
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Delete
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div className="flex flex-col items-center pb-10">
      <img
        className="w-24 h-24 mb-3 rounded-full shadow-lg"
        src="https://i.pravatar.cc/300"
        alt={user?.id}
      />
      <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">{user?.name}</h5>
      <span className="text-sm text-gray-500 dark:text-gray-400">{user?.company?.name}</span>
      <div className="flex mt-4 space-x-3 md:mt-6">
        <a
          href="#"
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Add friend
        </a>
        <a
          href="#"
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
        >
          Message
        </a>
      </div>
    </div>
  </div>
)
```

search input component

```tsx
interface Props {
  setSearchKeyword: (keyword: string) => void
}

export const SearchUserComponent = ({ setSearchKeyword }: Props) => (
  <div className="flex flex-col justify-center items-center">
    <input
      className="border"
      placeholder="search for user"
      onChange={e => setSearchKeyword(e.target.value)}
    />
  </div>
)
```

we separate the code based on the responsibility , and this as i said before will be very help full in reading code , finding\bugs quickly write test , also writing TDD with this approach will be easy

<AnchorLink href="https://codesandbox.io/s/srp-article2-fzbuox?file=/src/App.tsx">
  Check the code in the sandbox
</AnchorLink>


WN

Wassim Nassour

Quick intro 👋🏻

Notes

Sealed class in java

Do you know that React Reconciler uses double buffering

Config PWA in your next app

Blog

Enums and Method Implementations: Using Enums with Design Patterns

Understanding Database Indexes: Boosting App Performance

Mapped Types in Typescript

Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl

Single responsibility in react

Contact Me!

Created by @Wassim built with @NextJs deployed in @Vercel