DEV Community: Digvijay Jadhav

From Repetitive Code to Clean Architecture: How the Decorator Pattern Simplified Activity Logging by 70%

Digvijay Jadhav — Fri, 07 Nov 2025 10:50:06 +0000

We had activity logging across our entire application - typical audit trail stuff that tracks user actions throughout the system. The initial implementation was straightforward: add logging calls directly in the service methods.

It worked perfectly. Shipped on time, no issues in production. But after a few months of adding new features, the pattern became obvious - we had the same logging boilerplate repeated across dozens of methods.

Not broken. Not urgent. Just... inefficient.

Here's what the pattern looked like:

async someServiceMethod(
  userId: string,
  data: string,
  context?: { ipAddress?: string; userAgent?: string }
) {
  try {
    const result = await performOperation(userId, data);
    *// Success logging - 12 lines every single time*
    this.activityLogService
      .logActivity({
        userId,
        actionType: "RESOURCE_ACTION",
        resourceId: result.id,
        resourceName: result.name,
        ipAddress: context?.ipAddress,
        userAgent: context?.userAgent,
        status: "SUCCESS",
      })
      .catch((err) => {
        console.error("Failed to log activity:", err);
      });
    return result;
  } catch (error) {
    *// Failure logging - another 12 lines*
    this.activityLogService
      .logActivity({
        userId,
        actionType: "RESOURCE_ACTION",
        resourceName: data,
        ipAddress: context?.ipAddress,
        userAgent: context?.userAgent,
        status: "FAILED",
        errorMessage: error instanceof Error ? error.message : "Unknown error",
      })
      .catch((err) => {
        console.error("Failed to log activity failure:", err);
      });
    throw error;
  }
}

Multiply this by every service method that needed logging - we're talking about hundreds of lines of repetitive try-catch blocks doing essentially the same thing.

The One-Day Refactor Decision

We then thought of optimizing this, This is a perfect use case for decorators.

The decision was straightforward - we had a cross-cutting concern that was cluttering business logic. Decorators would let us declare the logging behavior and keep the methods focused on what they actually do.

Not a revolutionary insight. Just recognizing when the right tool fits the problem.

The Target Design

The goal was simple - declarative logging that doesn't clutter the business logic:

@LogActivity({
  actionType: "RESOURCE_ACTION",
  resourceType: "RESOURCE"
})
async someServiceMethod(
  userId: string,
  data: string,
  context?: { ipAddress?: string; userAgent?: string }
) {
  const result = await performOperation(userId, data);
  return result;
}

Clean business logic, logging concern declared at the method level. That's it.

Implementation

Configuration

TypeScript decorators need to be enabled:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Interface Design

The decorator configuration needed to handle different method signatures and extract resource information from both successful results and failed attempts:

export interface LogActivityConfig {
  actionType: string;
  resourceType: string;

  paramMapping?: {
    userId?: number | string;  *// Supports both index and nested paths*
    context?: number;
  };

  extractResource?: (result: any, params: any[]) => {
    resourceId?: string;
    resourceName?: string;
    metadata?: any;
  };

  extractResourceFromParams?: (params: any[]) => {
    resourceId?: string;
    resourceName?: string;
    metadata?: any;
  };
}

Key design decisions:

Flexible parameter mapping for different method signatures
Separate extraction functions for success/failure cases
Optional metadata support for additional context

Decorator Implementation

export function LogActivity(config: LogActivityConfig) {
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    const originalMethod = descriptor.value;
    const activityLogService = ActivityLogService.getInstance();

    descriptor.value = async function (...args: any[]) {
      *// Extract userId from parameters*
      let userId: string;
      if (typeof config.paramMapping?.userId === "string") {
        const parts = config.paramMapping.userId.split(".");
        let value: any = args[0];
        for (const part of parts) {
          value = value?.[part];
        }
        userId = value;
      } else {
        const userIdIndex = config.paramMapping?.userId ?? 0;
        userId = args[userIdIndex];
      }

      const contextIndex = config.paramMapping?.context ?? args.length - 1;
      const context = args[contextIndex];

      try {
        const result = await originalMethod.apply(this, args);

        const { resourceId, resourceName, metadata } =
          config.extractResource?.(result, args) || {};

        *// Non-blocking success logging*
        activityLogService
          .createActivityLog({
            userId,
            actionType: config.actionType,
            resourceType: config.resourceType,
            resourceId,
            resourceName,
            metadata,
            ipAddress: context?.ipAddress,
            userAgent: context?.userAgent,
            status: "SUCCESS",
          })
          .catch((err) => 
            console.error(`Failed to log ${config.actionType}:`, err)
          );

        return result;

      } catch (error) {
        const { resourceId, resourceName, metadata } =
          config.extractResourceFromParams?.(args) || {};

        *// Non-blocking failure logging*
        activityLogService
          .createActivityLog({
            userId,
            actionType: config.actionType,
            resourceType: config.resourceType,
            resourceId,
            resourceName,
            metadata,
            ipAddress: context?.ipAddress,
            userAgent: context?.userAgent,
            status: "FAILED",
            errorMessage: error instanceof Error ? error.message : "Unknown error",
          })
          .catch((err) => 
            console.error(`Failed to log ${config.actionType}:`, err)
          );

        throw error;
      }
    };

    return descriptor;
  };
}

Critical implementation details:

Logging operations are non-blocking (won't break main functionality)
Original errors are always re-thrown unchanged
Decorator preserves original method behavior completely

Results

Before (213 lines across a service):

export class ServiceClass {
  private activityLogService: ActivityLogService;

  constructor() {
    this.activityLogService = ActivityLogService.getInstance();
  }

  async someMethod(userId: string, data: string, context?: Context) {
    try {
      const result = await performOperation(userId, data);

      this.activityLogService
        .logActivity({
          userId,
          actionType: "ACTION_TYPE",
          resourceId: result.id,
          resourceName: result.name,
          ipAddress: context?.ipAddress,
          userAgent: context?.userAgent,
          status: "SUCCESS",
        })
        .catch((err) => console.error("Failed to log:", err));

      return result;
    } catch (error) {
      this.activityLogService
        .logActivity({
          userId,
          actionType: "ACTION_TYPE",
          resourceName: data,
          ipAddress: context?.ipAddress,
          userAgent: context?.userAgent,
          status: "FAILED",
          errorMessage: error.message,
        })
        .catch((err) => console.error("Failed to log:", err));

      throw error;
    }
  }

  *// Same pattern repeated for every method...*
}

After (139 lines - 35% reduction):

export class ServiceClass {
  @LogActivity({
    actionType: "ACTION_TYPE",
    resourceType: "RESOURCE",
    paramMapping: { userId: 0, context: 2 },
    extractResource: (result) => ({
      resourceId: result.id,
      resourceName: result.name,
    }),
    extractResourceFromParams: (params) => ({
      resourceName: params[1],
    }),
  })
  async someMethod(userId: string, data: string, context?: Context) {
    const result = await performOperation(userId, data);
    return result;
  }

  @LogActivity({
    actionType: "ANOTHER_ACTION",
    resourceType: "RESOURCE",
    paramMapping: { userId: 0, context: 3 },
    extractResource: (result, params) => ({
      resourceId: result.id,
      resourceName: result.name,
      metadata: { additionalInfo: params[2] },
    }),
  })
  async anotherMethod(
    userId: string,
    data: string,
    info: string,
    context?: Context
  ) {
    const result = await performAnotherOperation(userId, data, info);
    return result;
  }
}

The reduction isn't just about line count - the code is now focused on business logic with cross-cutting concerns handled declaratively.

Impact

Quantitative:

70% reduction in logging-related code
35% overall reduction per service
Zero changes to business logic behavior
Maintained 100% test coverage

Qualitative:

Improved Onboarding
New developers can immediately understand method intent without parsing logging infrastructure:

typescript

@LogActivity({ actionType: "RESOURCE_ACTION", resourceType: "RESOURCE" }) async someMethod(userId: string, data: string, context?: Context) { *// Pure business logic* }

Faster Feature Development
Adding logging to new methods: add decorator, configure parameters, done. No boilerplate to copy, no edge cases to remember.

Simplified Maintenance
Need to change logging format globally? Update the decorator. One change propagates everywhere.

Better Code Reviews
Reviewers focus on business logic. Cross-cutting concerns are declared, not mixed in with implementation.

When This Pattern Applies

Decorators solve a specific problem: you have behavior that needs to be applied consistently across multiple methods, but that behavior is orthogonal to the core business logic.

Good indicators:

Same try-catch pattern across multiple methods
Cross-cutting concerns mixed with business logic
Copy-pasting setup/teardown code
Consistent "before" and "after" logic

Other Applications

Once the logging decorator was in place, we identified similar opportunities:

Authentication & Authorization:

@RequireAuth()
@RequirePermission("resource.delete")
async deleteResource(resourceId: string, userId: string) {
  *// Just deletion logic*
}

Rate Limiting:

@RateLimit({ maxRequests: 10, windowMs: 60000 })
async processRequest(data: RequestData, userId: string) {
  *// Just request processing*
}

Performance Monitoring:

@MeasurePerformance({ threshold: 1000, alertOn: "slow" })
async complexOperation(params: OperationParams) {
  *// Just operation logic*
}

Caching:

@Cache({ ttl: 300, key: (userId) => `user:${userId}:data` })
async getUserData(userId: string) {
  *// Just data retrieval*
}

Implementation Approach

The refactor was straightforward:

Built the decorator with proper TypeScript typing
Applied to one service and verified behavior
Rolled out incrementally across services
Added documentation and examples

Total time: one day of focused work.

Key Takeaways

Pragmatism First, Optimization Second
The original implementation wasn't wrong - it worked in production without issues. The decorator refactor was an optimization made when the pattern became clear, not a premature abstraction.

Design Patterns as Refactoring Tools
Patterns are most valuable when you recognize them in existing code, not when you try to force them during initial implementation.

Incremental Adoption
Starting with one service and expanding proved less risky than a wholesale rewrite. Validate the pattern works before committing to it everywhere.

Clear Over Clever
The decorator doesn't make the code sophisticated - it makes it clear. Methods now explicitly declare their concerns rather than embedding them in implementation.

Conclusion

This refactor wasn't about applying design patterns for their own sake. It was about recognizing a specific problem - repetitive cross-cutting concerns cluttering business logic - and using the appropriate tool to solve it.

The result: less code, better maintainability, and clearer separation of concerns. Sometimes the best refactor is the one you didn't do upfront, but recognized when the need became obvious.

Checklist for a Successful Website Launch

Digvijay Jadhav — Mon, 01 Jul 2024 06:57:48 +0000

Launching a website is an exciting milestone, but it’s crucial to ensure everything is in place for a smooth and successful launch. Here’s a comprehensive checklist to help you cover all essential aspects of your website launch.

Content Checklist: Content is the backbone of your website. It engages users, conveys your message, and drives conversions. Ensuring content quality and correctness is paramount.
- Check for Incorrect Punctuation: Pay particular attention to apostrophes, quotation marks, and hyphens/dashes.
- Remove Test Content: Ensure no placeholder or test content remains on the site.
- Semantic Markup: Ensure content is marked up correctly (e.g., headings with <h1>, <h2>, etc.).
- Keyword Usage: Check for appropriate use of target keywords in the content.
Technical Checklist: Technical optimization improves your website’s performance, security, and user experience.
- Remove Unused CSS and JS: Clean up any unnecessary CSS and JavaScript files.
- External Links: Ensure external links have rel="noopener" <a href="http://example.com" target="_blank" rel="noopener">Some other site</a>
- Form Validations: Validate all forms to prevent errors and ensure usability.
- XML Sitemap and robots.txt: Create and upload an XML sitemap and a robots.txt file.
- Image Optimization: Use .webp format for all images to improve loading times.
- 404 Page: Ensure a custom 404 page is set up for incorrect routes.
- Minify/Compress Files: Minify and compress JavaScript, HTML, and CSS files.
- Server-Based Logging: Configure server-based logging and measurement tools (e.g., database/web server logging).
- CSS Optimization: Optimize your CSS by using short image paths and leveraging the cascading nature of CSS.
SEO Checklist: Good SEO practices improve your website’s visibility and ranking on search engines, driving more traffic to your site.
- Meta Tags: Ensure each page (static and dynamic) has a title, description, and meta keywords.
- Alt Tags: All images should have descriptive "Alt" tags.
- Indexing: Ensure the website is allowed for indexing by search engines.
- Social Media Meta Tags: Include meta tags for social media sharing.
- Favicon: Ensure a favicon is present.
- PWA Meta Tags: Include meta tags for Progressive Web Apps.
Functional Checklist: Ensuring your website functions correctly across various devices and browsers is critical for providing a seamless user experience.
- UI Components: Check the rendering and state changes of UI components in response to user actions.
- Browser Compatibility: Test the website on multiple browsers (Chrome, Firefox, Opera, Safari) using BrowserStack.
- Mobile Compatibility: Test on various mobile devices and screen sizes using BrowserStack’s mobile device emulators and/or your own devices.
- Performance Testing: Run the website through Google PageSpeed Insights and Lighthouse. Address the suggested points and aim for scores above 90.
- HTTPS / SSL: Ensure HTTPS and SSL are correctly set up.
- Webmaster Tools: Link Google Analytics and Microsoft Clarity to your Webmaster Tools.
- Links and URLs: Verify internal and external links, check for broken links, and validate URL structures.
- API Calls: Test functions that make API calls to ensure they handle responses correctly.

Feel free to share any additional tips or points in the comments section.

Best of luck with your next website launch!

5 Simple Steps to Enhance SEO in Your React Application

Digvijay Jadhav — Sun, 26 Feb 2023 06:42:26 +0000

SEO (Search Engine Optimization) is essential for the success of any website. It ensures that your website ranks higher on search engines, resulting in more visitors. This post will walk you through the process of creating SEO in ReactJS.

Step 1: Install React Helmet

React Helmet is a package that allows you to control your document head using React components. To install React Helmet, open your terminal and type the following command:
yarn add react-helmet

Step 2: Import React Helmet

After installation, you need to import React Helmet in your React component. You can do this by adding the following line of code at the top of your file:
import { Helmet } from 'react-helmet';

Step 3: Add Meta Tags

To add meta tags to your React component, you need to use the <Helmet> component. For example, to add the title tag, you can use the following code:

<Helmet>
  <title>{Title of your page}</title>
</Helmet>

Similarly, to add meta description tag, you can use the following code:

<Helmet>
  <meta name="description" content={Description of your page} />
</Helmet>

Step 4: Add Open Graph Tags

Open Graph tags are used to enhance the appearance of your website when it is shared on social media platforms. To add Open Graph tags, you can use the following code:

<Helmet>
  <meta property="og:title" content={Title of your page} />
  <meta property="og:description" content={Description of your page} />
  <meta property="og:image" content={URL of the image you want to use} />
  <meta property="og:url" content={URL of your page} />
  <meta property="og:type" content="website" />
</Helmet>

Step 5: Add Twitter Tags

Twitter tags are similar to Open Graph tags, but they are used specifically for Twitter. To add Twitter tags, you can use the following code:

<Helmet>
  <meta name="twitter:title" content={Title of your page} />
  <meta name="twitter:description" content={Description of your page} />
  <meta name="twitter:image" content={URL of the image you want to use} />
  <meta name="twitter:card" content="summary_large_image" />
</Helmet>

Also Consider the following factors before going live:

XML Sitemaps
Mobile responsiveness
SSL certificate
Semantic HTML
Image optimization(lazy load, webp format, alt tags)
Make use of Redux for optimization
Optimize the robot.txt to help search bots understand how to crawl pages on your website
Use server side rendering
Have 404 error page

By following the steps mentioned above, you can create an SEO-friendly ReactJS website that will rank higher in search results and attract more organic traffic.
Sadly, dealing with React apps adds to the already lengthy list of challenges that a technical SEO must address. Yet, frameworks like as Next.js have made the task of an SEO lot easier than it was previously.

Feel free to leave a comment below and share your tips for optimizing SEO!!

Code Documentation: A Guide for Beginner's🎯

Digvijay Jadhav — Mon, 31 Jan 2022 19:27:02 +0000

In this blog we’ll be having a quick look into how to document the code. Before we get into how to properly document code, let's first understand Why is it necessary to document your code?

As we gain more experience in the tech business or software development, we will notice that we spend far more time reading code than developing it. And this may include reading previous versions of your own code, evaluating someone else's documentation in your team, or analyzing code from third-party libraries and their examples.

As a result, we realize that our code should be more readable and maintainable in order to reduce the time it takes to understand it! We'll look at a few tricks and tips to help you make your code more readable and well-documented.

1. Add comments to your code

The purpose of adding comments to code is to provide an understandable description of what your code is doing.

When commenting a code, keep the following in mind:
a. Do not simply restate what the code is doing.
b. Describe why. Why is the code doing what it's doing? What's the business assumption or algorithm step?
c. Format your comments for maximum readability. Tab them properly, leave spaces where necessary
d. Try making use of tools/extensions of VS code.

few are GhostDoc and Add JSDoc comments

I personally prefer Add JSDoc for commenting, it is super easy to use.

Check this article on MSDN about writing effective comments

2. Write Test Cases :

Most of developers write unit tests for their code to ensure that the code works properly. This helps to detect and protect against bugs in the future.

Essentially test cases provides you an idea of how the code should behave, and we can be confident that this will not cause any problem in production..

For writing test cases, use language/framework-specific tools/libraries. I prefer Jest for NodeJS and React. It is fast and secure, and it allows for easy mocking and code coverage

3. Provide a suitable git commit message.

Proper git commit messages are beneficial in the following ways:
a. It adds clarity to pull requests (PRs) raised
b. It is the key to effective debugging within a team
c. Makes tracking an implementation easier

There’s a wonderful article about Git commit message

How to write a good commit message

Tip : Add task/issue id in your git commit message, this helps in identifying exact feature which was pushed and it becomes easy to trace it. And git commit messages should be imperative present tense

eg. #task_id commit_message #3201 add google login

4. Maintain proper Readme file

Its an documentation with guidelines on how to use a project. Usually it will have instructions on how to install and run the project. An idle readme should have
a. Project title
b. Project description
c. How to install and run the project
d. Folder structure explanation and challenges
e. Known issues and credits
f. License and versioning

An extension for creating a top-notch Readme file. : Markdown Preview Enhanced

5. Write a self documented clean code

There's a reason I saved this for last because I wanted to emphasise it as the most important point of all.

There are a few things that a developer should always keep in mind when writing production-level code :

Create a logical and manageable folder structure(for React refer React Project Structure Best Practices for Scalable Application )
Following meaningful naming conventions for files, variables and functions throughout project
Avoiding redundant code : Identify which code is getting repeated and try making it generalized by passing variable arguments
Commenting : Sometimes devs build a really complex logic and after few months we get to know what we did but hardly able to remember why we did it, so its better if you write some comments whenever it feels necessary.
Formatting : One of the way to make your code more readable is to format the code, follow same conventions/intentions throughout project. I use prettierr extension for formatting.
Review your code often :If you code for 8-10 hours per day, try devoting 1-2 hours to reviewing it, where you will look for improvements, optimization, working on complexities (time and space), and documenting the code. This will save you a lot of time in the future, and it will help you grow in a lot better ways. Personally, I prefer the afternoon for this.

Refer this book for getting better understanding of Clean Code.

Conclusion

In this section, we looked at how to write a code documentation which will help you make your code more readable and well-documented.

Add comments to your code
Write test cases
Provide a suitable git commit message.
Maintain proper Readme file
Write a self documented clean code

Overall, There are many other ways to document your code, use the one which you think is best!

If any point is missing over here, do let us know in comment section.

Roadmap for React JS 2024

Digvijay Jadhav — Tue, 07 Dec 2021 06:31:43 +0000

In the previous blog I talked about why one should prefer react for Frontend. (https://dev.to/digvijayjadhav98/why-choose-react-for-frontend-4m23) Now we'll take a look at React developer roadmap that will guide you through your journey from being a novice developer to a skilled plus experienced developer over time.

React is one of the most popular JavaScript library for designing rich and interactive User Interfaces.

Below is the mind-map of learning React.

I remember when I started learning React, I was confused how to start and what all things I should know before building some real time projects. After reading few books, referring blogs, online courses videos and two years of experience has made me enough confident about React and what to do and what not to.

Assuming you have basic understanding of HTML, CSS and JS

If not then do check out the resources section below. That being said, Lets dive in.

Lets divide the learning into three sections: Fundamentals, Advance and Ecosystem

1. Fundamentals:

Create React App
Components : react application is made up of reusable bits of code called components and in react you can create a function component or a class component
Functional Component
Class Component
JSX : the idea of writing HTML like code inside JavaScript this is what is termed as JSX and is a syntax extension to JavaScript with JSX you pretty much describe what the UI should look like
Props and State : Props which stands for properties are just arbitrary inputs for a component which play a major part in making the component reusable. However props are read-only the component can never modify its own props this is the point in time where you start learning about state, state allows react components to change their output
useState and useEffect Hooks
setState and Component Lifecycle Methods
Conditional Rendering
Lists and Keys
Building Simple forms

After doing this I recommend you to do a basic mini project. Here are some cool examples

✨8 React Projects Every Beginner Should Try

2. Ecosystem :
React is not framework, its a library which means to complete your web application you need to have a stable ecosystem which covers styling, testing, scalability, performance and application oriented dependencies(eg for language translation one can use i18Net or for Serverless application one can check firebase or AWS lambda)

State Management : Redux / Mobx / Flux / redux-toolkit
Routing : React Router
Styling : Styled Components, MaterialUI,Chakra,Tailwind.css, Bootstrap etc
Forms : Formik,React hook form
Testing :
1. Cypress → End to end testing
2. Jest → unit Testing
Misc:
1. TypeScript
2. Storybook
3. React i18Net
4. Firebase
5. Practical React libraries

After covering above topics you will be enough confident on React library and ready to build some real time projects. As you move ahead, you should also focus about performance optimization, caching, cookies, security and SEO. This leads to our last point Advance section.

Advance Topics:
1. Isomorphic
2. GraphQL
3. Higher Order Components
4. Render Props
5. Refs
6. Error boundaries
7. Portals
8. Http Requests : GET, PUT,POST,DELETE(fetch or axios)
9. Caching, Cookies, local and session storage 10.Hooks
  1. useContext
  2. useReducer
  3. useRef
  4. useMemo
  5. useCallBack
  6. Custome Hooks
Learning journey never get to an end. If you have came this far in your react learning then I will recommend you to learn Typescript and move towards Next JS as Next has removed few drawbacks of React and has so many additional functionalities. People also prefer learning React Native so along with Web you will also be able to build Android and IOS applications.

My intentions were to give an idea on how React looks like from top and what all useful things it contains. Below are some resources which I found most useful while learning ReactJS.

html and css : Code with harry : https://www.youtube.com/watch?v=GeykycZ4Ixs
Book: https://www.amazon.in/HTML-CSS-Design-Build-Websites/dp/1118008189

JS required for React JS : https://www.youtube.com/watch?v=XevQlT444qg

Plain JS : https://www.youtube.com/watch?v=W6NZfCO5SIk
JS ES6 : https://www.youtube.com/watch?v=NCwa_xi0Uuc

React JS:
playlist :Code evolution : https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

Mosh : https://www.youtube.com/watch?v=Ke90Tje7VS0&t=813s

*Tip: *Try making notes on Notion or some other notes making application. Try adding code snippets along with textual information. This will not only help you remember after long time but also you don't have to visit google every time, you can refer your notes.

Why choose React for frontend?

Digvijay Jadhav — Sat, 23 Oct 2021 12:05:25 +0000

Before I dive into some of the cool things you can do with React, lets understand what is React.
React JS is basically a JavaScript library built and maintained by Facebook. React is an efficient, declarative, and flexible open-source JavaScript library for building simple, fast, and scalable frontends of web applications.

Language used to build React applications is JSX. JSX is basic JavaScript that facilitates HTML quoting and uses the syntax of this HTML tag to make subcomponents

ReactJS is a stronger framework because of its ability to break down the complex interface and allow users to work on individual components.

ReactJS comes with the core objective is to deliver the best rendering performance possible. Its strength stems from the emphasis on individual parts. ReactJS helps a developer to break down the complicated UI into smaller components, rather than operating on the entire web framework

Key benefits of ReactJS for front-end development

Easy to Learn & Easy to Use : React, compared to other popular frontend frameworks like Angular & Vue, is much easier to learn. In fact, it’s one of the main reasons why React gained so much traction in little time. It helps businesses quickly build their projects.
Helps to build rich user interfaces : React supports frontend libraries such as Bootstrap, Material ui, Chakra, Tailwind etc to build rich UI.
Offers fast rendering : the DOM model is tree-structured. So, a minor modification at a higher level layer can awfully impact the user interface of an application. To solve this, Facebook has introduced a virtual DOM feature. Virtual DOM is the virtual representation of DOM that allows testing all changes to the virtual DOM first to calculate risks with each modification.
Strong community support : Currently, React JS has attained [136,079 stars on Github] and 1,331 regular contributors. Not only that, but experts are also regularly uploading free React tutorials on Youtube and writing in-depth React tutorial articles & blogs on the internet. For instance, a simple “free React tutorial” search on Google gives 13,00,00,000 results. The latest survey by Stack Overflow also revealed that React is the most loved web framework, while Angular ranked 9th on the same list.
Reusable elements : Technology used to be far more complicated than that, but ReactJS provides us with the ability to do just the same. Each React project is constructed using the so-called reusable elements. This means that by calling from other components, each element of the interface that you have already built can be used anywhere in your project.

Currently React is used by many fortune 500 companies

Airbnb, Tesla, Tencent QQ, and Walmart are among the top brands that built their mobile apps using the React Native framework.

React web framework, on the other hand, is currently being utilized by famous companies including Netflix, Paypal, NASA, BBC, Lyft, and New York Times to name just a few.

React Js inherits React Native which allows us to use the native look and feel to develop any mobile application(Android & IOS).

Like any other technology, React also has its flaws. The good news is that the number of them decreases month by month, year by year, and those left behind are acceptable in many cases.

Incompleteness : It is not a framework and hence demands other libraries to be included, which may include learning curve as well.
The high pace of development : Everything is evolving, and some developers are not comfortable with keeping up with such a pace. At the same time, we should admit that React’s core API has become more stable and rarely changeable.
Lack of proper documentation : he problem with documentation traces back to constant releases of new tools. Different and new libraries like Redux and Reflux are promising to accelerate the work of a library or improve the entire React ecosystem.

Along with React we also have Angular2, Vue.js, Ember.js,Vanilla js, etc according to business requirements one can use suitable frontend framework.

Tell us below comment section which frontend framework do you use?