Unveiling some Lesser-Known Facts About React [JS] (2024)

Introduction

If I had a dollar every time I heard React in Developer conferences and docs, I would probably be a millionaire by now.

ReactJS has undoubtedly emerged as one of the most popular JavaScript libraries for building user interfaces. As developers, you and I often dive into the depths of React, utilizing its key concepts and best practices. However, amidst our journey with this powerful library, there are several lesser-known facts that remain hidden from the limelight.

In this blog post, we will unravel some of these intriguing aspects of React that some of you might have missed out on, shedding light on its lesser-known features and functionalities that can enhance your development process.

Founding Story

React’s Founding Story: React was initially developed by Jordan Walke, a software engineer at Facebook, and it was first deployed on Facebook’s newsfeed in 2011. It was later open-sourced in 2013, allowing developers worldwide to leverage its potential. React’s primary goal was to solve the problem of efficiently updating the user interface in large-scale applications.

Virtual DOM

If you are working with React and still haven’t heard about the virtual DOM, you might want to revisit your tutorials/docs. One of the key reasons behind React’s efficiency and popularity is its Virtual DOM (Document Object Model). The Virtual DOM is an abstraction of the HTML DOM, representing the current state of the UI. React compares the current Virtual DOM with the previous one and calculates the most efficient way to update the actual DOM. This approach minimizes unnecessary re-renders, resulting in faster rendering and improved performance.

Mutating the virtual DOM (a heirarchy of JS objects) is amuch lighter process as compared to mutating the actual document tree

React Fiber

If you haven’t heard about React Fiber, you probably are not alone. In the React universe, there lies a mysterious concept known as the React Fiber. Introduced in React 16, React Fiber is a complete reimplementation of React’s core algorithm. It completely rewrote the rules of the rendering game, enabling concurrent rendering and allowing React to work on multiple tasks simultaneously. This feature improves the overall performance and responsiveness of React applications, especially in scenarios with complex and interactive UIs. React Fiber is a huge change and discussing its implementation details is beyond the scope of this blog. If you are interested to know more, I found this article online: https://flexiple.com/react/react-fiber/

Fragments

Many of you might already know about this, but I still decided to include this here just for those tutorial binge-watchers who might have missed this case if they haven’t developed a project on their own.

When working with React components, we often need to return multiple elements. Traditionally, we would wrap them in a container element, such as a <div>. However, this approach may introduce unnecessary nodes in the DOM. React provides a solution to this with the introduction of Fragments. Fragments allow us to group multiple components without introducing an additional DOM node, resulting in cleaner and more efficient code.

Portals | The closest thing to teleportation.

React Portals enable rendering components outside their parent’s DOM hierarchy. This feature is particularly useful when you need to render a component in a different part of the page or even outside the current document structure, such as modals, tooltips, or overlays. Portals provide a clean and straightforward way to achieve this functionality without breaking the component tree.

Error Boundaries

Every hero encounters obstacles along their journey, and React is no exception. But fear not! React’s Error Boundaries act as a shield of resilience, protecting your application from catastrophic crashes. By wrapping components in an Error Boundary, you can gracefully handle errors, display fallback UIs, and ensure that a single error doesn’t bring down your entire application.

Strict Mode

In the realm of React development, secrets, and hidden dangers lurk around every corner. But with React’s Strict Mode, you gain the power of a truth serum that exposes potential issues in your codebase. Introduced in React 16.3, By enabling Strict Mode during development, you unveil hidden pitfalls, receive helpful warnings, and ensure that your React code adheres to best practices. It’s like having a vigilant sidekick by your side, guiding you towards a cleaner and more reliable codebase.

Conclusion

React’s popularity as a JavaScript library stems not only from its core features but also from its vast ecosystem and supportive community. However, exploring its lesser-known aspects can unlock hidden potential and make your development process even more efficient. By leveraging features like the Virtual DOM, Fragments, Portals, Error Boundaries, and Strict Mode, you can elevate your React skills and build robust and high-performing applications by unlocking the true potential of this Web Development superhero.