React series 2-Navigating the Advantages and Pitfalls

Your react series from introduction to pro.

In this react series I am going to explain the advantages and some disadvantages of this popular library. We will explore weather is it right fit for your next project. Here is the outline the topics discussed in this article.

1. Why is react so popular?
2. Navigating the Tradeoffs
3. When to look beyond react?

Why is react so popular?

React is very popular for developing interactive web applications. The reasons why you should choose react is flexibility, better developer experience, corporate investment, large community support, better performance and testability are to name a few. In the below section we will discuss each feature in detail.

1. Flexibility

React is a library and not framework. React is flexible because it doesn’t prescribe data fetching and routing. React equips you with tools and utilities for creating interactive web applications. You are free to use any framework of your choice like Next.js or Remix to define application structure. This makes react easy to integrate in you new project.

• React is used to create components for web applications
• It can be used to generate static websites using Gatsby and Phenomic.
• It can be used to build mobile applications using react native.
• It can be used to create installable cross platform desktop applications using tools like Electron.
• It can be used for server side rendering. Server side rendering is translating react web pages into interactive page that client sees. This is done at server side and not at client side making it faster to load. It can be achieved by using Next.js framework.
• It can also be used to create virtual reality website using React VR.

In a nut shell we can say that React can be learned once and used to create web pages for anything ranging from desktop to mobile. It is versatile because renderer is separate from React. You use react-dom library to render components to HTML in web applications. There are dozens of renderer for react you can check out the list here. You can start building smaller sections with react and move to larger portions of your application. Making it less risky for your new project. Facebook replaced the web pages build on PHP with react using this approach.

2. Better developer experience

React is very simple to learn. It consists of components.

• In react everything is a component from button to form to textbox.
• Each react component is atomic, which means you can work on each component in isolation.
• React uses JSX syntax. The JSX syntax compiles to java script shown in below image.

• React handles HTML with java script.
• No need to learn framework specific keywords, rules and syntax for looping, conditionals etc. You just need to know java script.
• In case of mistake you can see the complete stack trace of your error in the browser. It is easy to debug by setting the breakpoint in the source code.
• You can experiment with react using online react editor called code sandbox.

3. Corporate investment

React was created and is maintained by Facebook. React is used by other companies owned by Facebook like WhatsApp and Instagram. Facebook actively maintains React. There is a React blog which is an official source for the updates from react development team. Anything including release notes would be posted in this active blog here.

Facebook provides with react codemod. A codemod is a command line tool that you can point at your code base to automate changes. You can use react codemod to upgrade the older version of react with the new version without making any breaking changes to existing code. So, it is a tool with scripts that provides an interactive way to refactor and upgrade large code base. This can be assurance that react projects are stable in long term.

4. Large community support

React has become very popular after its release in 2013. React has huge developers community who continue to use and contribute. According to Statista React one of the most popular framework for web developers.

The below graph illustrate how the number of GitHub stars of react has increased over the years from 2014. React has been top 10 repositories among 6 million repositories. React is also downloaded around 22.4 million times in one week with more than 1600 contributors on GitHub page.

On stackshare over 11k companies uses react.

In a nut shell if you choose React, you're certainly in great hands. You can choose from huge list of existing components so, you need not create components from scratch. Large developer community has led to a wide variety of mature related libraries on GitHub. Jest can be used for automated testing. If you want to replace your REST calls you can use GraphQL which can be easily integrated with react projects. Next.js can be used for server side rendering in react. So, basically you can do anything using react library.

5. Good performance

There are a lot of java script library that are very fast. But what makes react better than others is that you can enhance the performance. There are some built-in performance enhancement feature available.

• Memorizing the expensive calculation that are recalculated or re-rendered when necessary.
• You can set the priority of updates. A low priority updates will be done by react when it is available.
• Lazy load components
• Render react on server reducing load time.
• Provides profiling tools to monitor the performance of application. React 16.5 adds support for a new DevTools profiler plugin.
• If the bundle size is a high priority for you can use several light weight react alternatives exists like Inferno and Preactjs.

6. Testability

React.js code is easy to test because to its component-based architecture, use of virtual DOM and availability of testing tools and frameworks. With the right tools and frameworks, you can create React.js code that is easy to maintain and update while adhering to best practices.

There are several testing frameworks and tools are available including Jest, Enzyme, and React Testing Library. It is possible to write hassle free unit tests, integration tests and end-to-end tests for your react code using these tools.

• Testing react components require no config. It is already configured out of the box.
• Traditional UI tests requires browser for testing but react runs in memory using Node hence it is faster.
• Possible to test a single component in isolation by mocking some components using Jest.
• A number of testing framework to choose from Mocha, Jasmine, Tape, QUnit, AVA, Jest

Navigating the Tradeoffs

React is developed and maintained by Facebook that has become very popular among web developers. Like any other technology react comes with its own set of tradeoffs that developers must consider.

1. Complexity vs. Flexibility

React component-based architecture enhances code modularity and reusability, but it also introduces a steeper learning curve for beginners. While this complexity can pay off in larger applications, simpler projects may find it overkill. Striking a balance between the flexibility React provides and the simplicity required for a project is crucial.

2. Performance vs. Development Speed

React uses virtual DOM for efficient updates, boosting performance by minimizing actual DOM manipulations. However, this abstraction comes with an associated cost in terms of memory usage. In scenarios where performance is critical, careful optimization is necessary. On the other side, React development speed is often praised due to its declarative syntax and the extensive ecosystem of third-party libraries.

3. Boilerplate Code vs. Productivity

Compared to frameworks like Angular and Ember react has some minimal boilerplate code. The tradeoff here lies in the flexibility it provides, allowing developers to make architectural decisions based on project specific needs. However, this flexibility comes at the expense of potentially writing more code to achieve similar functionality in more opinionated frameworks.

4. Learning Curve vs Community Support

Developers accustomed to traditional approaches can find declarative approach challenging to learn. However, the extensive community support, including an abundance of tutorials, documentation, and open-source projects, aids in overcoming the learning curve. The tradeoff is the initial investment in time required to grasp React concepts.

5. State Management Complexity

While React provides a straightforward way to manage state within components, handling state across the entire application can become complex. Developers often turn to additional libraries like Redux to manage state globally, introducing an additional layer of complexity. The tradeoff is between the simplicity of local state management and the structured but more complex global state management.

6. Tooling and Ecosystem

React ecosystem is vast and continually growing, offering a plethora of libraries and tools. However, this abundance can lead to decision fatigue and compatibility challenges. Developers must carefully select the tools that best fit their project requirements, considering the potential tradeoffs in terms of maintenance, community support and long-term viability.

7. Community vs Corporate

React was build by Facebook to solve its needs. This may not be suitable for your project needs. React community is vibrant and engaged with more than thousands to contributors. Benefit of ongoing support by Facebook.

When to look beyond react?

React has undeniably become a cornerstone of modern web development but there are scenarios where its use may not be the most suitable choice. Understanding when not to use React is crucial for making informed decisions and ensuring optimal outcomes in certain project contexts.

1. Simple Static Websites: For simple static websites with minimal interactivity and dynamic content using React might be overkill. Traditional HTML, CSS, and perhaps a touch of vanilla JavaScript can be more lightweight and easier to maintain for straightforward projects that don't require the reactivity and component-based structure React provides.
2. Learning Curve for Small Teams or Solo Developers: React component-based architecture and concepts like JSX can pose a learning curve, especially for smaller teams or solo developers with limited resources. When time constraints are a factor or when simplicity is paramount opting for a more lightweight framework or library may be a better fit.
3. Projects with Tight Deadlines: React power lies in its flexibility and scalability, but these benefits can come with a cost in terms of initial setup and learning curve. In scenarios where rapid development and quick turnaround times are imperative, frameworks with more streamlined setups and less configuration overhead might be a better choice.
4. SEO-Dependent Applications: While React can be made SEO-friendly, server-side rendering (SSR) or static site generation is often required for optimal search engine optimization. If your project heavily relies on SEO and you want to minimize the complexity of implementing SSR, other frameworks like Next.js, specifically designed for this purpose, might be a more suitable choice.
5. Limited Browser Support Requirements: React is designed to work on modern browsers, and although efforts have been made to support older versions, it may not be the best choice for projects requiring extensive compatibility with outdated browsers. If your target audience relies on browsers that are not well-supported by React, considering a framework with broader compatibility might be more pragmatic.
6. Projects with Existing Frameworks or Technologies: If you're working on a project that already relies heavily on another framework or technology stack, introducing React may lead to unnecessary complexity and integration challenges. In such cases, it's essential to assess whether the benefits of incorporating React outweigh the potential downsides of a mixed-stack approach.

So, in this post I have tried to come up with the benefits of react, what tradeoffs to consider while choosing react for your projects and when not to choose react. This should give you enough idea if react is right fit for your upcoming project. In the upcoming series we will delve into fundamentals of react library.