Understanding Tradeoffs in Front-end Development with a Focus on React

Introduction: The Dominance of React in 2023

As of 2023, React stands as one of the most widely utilized frameworks for frontend development. Throughout my journey in frontend development, I have predominantly used React for a majority of my projects. Today, we will delve deep into the tradeoffs one should be aware of when working with React for web frontend development.

Web Frontend: The Basics

A website is fundamentally an amalgamation of HTML, CSS, and JavaScript. When a user visits a website, data such as HTML, CSS, and JS is relayed from the web server via network communication and subsequently rendered on the screen. Using input devices like mouse and keyboard, users can interact with a website using various browser-provided APIs.

Why Choose React Over Basic HTML, CSS, and JS?

The reason lies in the evolution of web development. When the first web browsers appeared in the 1990s, websites primarily functioned as documents. As the internet and browsers evolved, so did the potential of websites, gradually morphing into applications. By the early 2010s, the predominant mode of web development was through the Multi-page Application using the MVC pattern.

But with growing complexities in requirements, a paradigm shift was necessary. This gave birth to React, introduced by Facebook in 2013. Unlike the traditional MVC pattern where server-based controllers manipulated the view, React introduced the Flux pattern. This allowed for a shift from server-centric Multi-page Applications to client-centric Single-page Applications.

Key Features of React

React boasts of several unique features:

  • SPA (Single Page Application): Updates within a single page as needed.
  • VirtualDOM: Enhances performance by updating only necessary components in the browser.
  • Declarative Approach: Developers can focus on the outcome without being bogged down by processes.
  • Components: Reusable UI development units available in both class and functional forms.
  • Hooks: Allows functionalities previously bound to class components to be utilized in functional components.
  • Community: Being one of the most used libraries since the late 2010s, React offers immense community support.

Considerations When Adopting React

  • SPA: Initial loading might be slower compared to server-based Multi-page Applications, and additional measures might be required for SEO and routing.
  • Virtual DOM: While it improves performance, it is not a one-size-fits-all solution and can come with its own overheads.
  • Declarative Approach: There's a learning curve, and developers might become overly reliant on React's ecosystem.
  • Component: Developers need to make informed decisions about component granularity, as overcompartmentalization can impact performance.
  • Hooks: Care must be taken with hooks like useEffect, ensuring thorough testing for unexpected asynchronous side-effects.
  • Community: Some JS libraries might not be compatible with React and would require workarounds or reimplementation.
  • Bundle Size: Compared to some other frontend frameworks, React doesn't always produce the smallest build sizes.

Is React Always the Right Choice?

While React remains a dominant force in 2023, numerous other frontend frameworks offer competitive features. Some challenges addressed by React a decade ago might now have more efficient solutions in newer frameworks. It's essential to question if React is always the best tool for the job.


This article provided a glimpse into frontend development with a focus on React. No technology offers a silver bullet, and in development, understanding the requirements and context is vital. Consider factors like project requirements, performance needs, team familiarity, and framework efficiency to ensure you're making the best choice for your project's success.

Happy coding!

Written by Henry, function12 front-end lead

Types and Usage of Image Files
Image files predominantly fall under two main categories: Raster Image File Format and Vector Image File Format. Raster Image File Types and Characteristics JPEG (JPG) * JPEG implements the DCT (discrete cosine transform) algorithm and further reduces data using Quantization. Simply put, Quanti…
The Essential Toolbox: Figma Tools Every Product Team Should Use
In the fast-paced world of digital product design, the ability to streamline processes, encourage collaboration, and foster creativity is paramount. As a product team, it’s essential to leverage the right tools to facilitate these tasks. If your team uses Figma, a popular vector graphics editor and…

What is FUNCTION12?

The ultimate design to code tool for professionals.
You've successfully subscribed to FUNCTION12 Blog - Design to code automation for professionals
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.