How it all began
React is a JavaScript library for building user interfaces that was developed by Facebook. It was released in 2013 and has since become one of the most popular tools for building web applications.
React was created by Jordan Walke, a software engineer at Facebook. He was inspired by the functional programming language Lisp and sought to create a library that would allow developers to create reusable components that could be easily combined to build complex user interfaces.
React was initially used to build the Facebook news feed and was later released as an open-source project. It quickly gained traction within the developer community due to its simplicity and flexibility.
Since its release, React has continued to evolve and has been adopted by a wide range of companies and organizations. It is now used to build many of the web's most popular applications, including Instagram, Airbnb, and Netflix.
React has also spawned a large ecosystem of supporting libraries and tools, including React Native, which allows developers to build native mobile applications using React.
The dark ages
There is no specific 'dark chapter' in the history of React that stands out as particularly negative or controversial, when react first launched, it was obvious not everyone was fond of it though.
Articles and Reddit posts quickly appeared detailing why React is a bad idea, some even stating it’s a bad situation for the entire software industry, instead opting to use web components. The biggest complaints seemed to stem from the coupling that react imposes between event handlers, the DOM and representing views. Some have also raised concerns about the potential for React to be used to build applications or websites that engage in unethical or malicious activities. Others have criticized the way in which React has been developed or maintained, or have raised concerns about its performance or scalability.
Some of these concerns include:
Dependency hell: React has a large number of dependencies, which can make it difficult for developers to manage and update their projects. This can lead to "dependency hell," where it is difficult to resolve conflicts between different dependencies.
Lack of transparency: Some have criticized the way in which React is developed and maintained, arguing that the process is not transparent enough. This has led to concerns about the direction of the project and the priorities of the React team.
Rapid release cycle: React has a rapid release cycle, with new versions being released frequently. This can make it difficult for developers to keep up with changes and can lead to compatibility issues.
Lack of backward compatibility: Some have criticized the way in which React handles backward compatibility, arguing that it can be difficult for developers to upgrade to new versions without breaking their existing code.
Overall, these concerns have not significantly impacted the adoption or use of React within the developer community, but they have been raised by some as areas for improvement.
React has gained a relatively positive reputation over the years and is widely considered to be a powerful and useful tool for building user interfaces, but not without dealing with its fair share of controversy. While there may have been some challenges or controversies along the way, these have not significantly affected the overall adoption and use of React within the developer community.
Do you want to know more about React, its story, and how it all began? Go check out Honeypot's React.js: The Documentary.
Rethinking 'Best Practices'
React is backed by a strong belief that best practices are good but should be challenged. The React team and community may regularly review and discuss the most effective ways to use React to build scalable, maintainable, and performant applications, and may revise their recommendations for best practices accordingly. This could involve considering new features or changes to the library itself, as well as changes to the broader ecosystem of tools and libraries that are used in conjunction with React.
Some of the major best practices they focus on are:
Separation of concerns: In software development, 'separation of concerns' refers to the practice of dividing a complex system into distinct components or modules, each of which addresses a specific aspect or concern of the overall system. The goal of this approach is to make the system easier to understand, develop, and maintain by reducing complexity and increasing modularity.
Reusable components: In React, reusable components are implemented using functions or classes that return a JSX element, which is a declarative description of a DOM element. The JSX element can contain other JSX elements as children, and can also have props (short for properties) passed to it to customize its behavior or render different content.
Virtual DOM: In React, the virtual DOM (VDOM) is a lightweight in-memory representation of the actual DOM. It allows React to optimize updates to the actual DOM by minimizing the number of DOM manipulations required. When a component's state changes, React creates a new virtual DOM representation of the component. It then compares this new representation with the previous representation and calculates the minimal set of changes required to update the actual DOM. This process is known as 'reconciliation'. By using the virtual DOM, React can minimize the amount of work that needs to be done to update the actual DOM, which can improve the performance of a React application.
Besides this, there are several best practices for improving the performance of a React application:
Use the React Developer Tools browser extension to identify performance bottlenecks and optimize component rendering.
Use the shouldComponentUpdate lifecycle method to prevent unnecessary re-renders of components.
Use the PureComponent class, which implements shouldComponentUpdate with a shallow prop and state comparison, to optimize component rendering.
Use the React.memo higher-order component to memoize functional components and prevent unnecessary re-renders.
Use the React.lazy and Suspense APIs to code-split your application and reduce the initial bundle size.
Use the React Fragments feature to avoid unnecessary DOM nodes.
Use the React.useCallback hook to memoize callback functions and prevent unnecessary re-renders.
Use the React.useMemo hook to memoize expensive calculations and prevent unnecessary re-renders.
Use the React.useEffect hook to optimize the rendering of components that depend on external data by avoiding unnecessary re-fetches.
Use the React.useReducer hook to optimize state updates in components that have complex state logic.
React in numbers
It's difficult to accurately estimate the number of websites that use React, as it is a popular and widely-used tool for building user interfaces. According to BuiltWith, a website that tracks technology adoption on the web, React is used on over 1 million websites.
React is particularly popular among developers building single-page applications (SPAs) and progressive web applications (PWAs). It is used by many well-known companies and organizations, including Facebook, Airbnb, Netflix, and Asana.
It is important to note that React is just one tool among many that can be used to build websites and web applications. There are many other frameworks and libraries available, and the specific tools used can vary depending on the needs and goals of the project.
The advantages of React
There are many advantages to using React for building user interfaces, including:
Reusable components: React allows developers to create reusable components that can be easily combined to build complex user interfaces. This makes it easier to develop and maintain large-scale applications.
Virtual DOM: React uses a virtual DOM (Document Object Model) to optimize updates to the actual DOM, which can improve performance and reduce the amount of work that the browser needs to do.
Fast rendering: React's virtual DOM and functional components make it fast at rendering updates to the user interface.
Declarative syntax: React uses a declarative syntax, which makes it easier for developers to understand and reason about the code.
Community support: React has a large and active community of developers, which means there are many resources available for learning and troubleshooting, and a wealth of third-party libraries and tools that can be integrated into React projects.
Overall, React is a powerful and popular tool for building user interfaces that offers many benefits to developers.
The disadvantages of React
Like any tool or technology, React has some disadvantages or challenges that developers should be aware of. Some of the potential disadvantages of using React include:
Complexity: React can be complex to learn and use, particularly for developers who are new to frontend development or who are not familiar with functional programming concepts.
Steep learning curve: Because React is a large and feature-rich library, it can have a steep learning curve for developers who are new to it. This can make it time-consuming to get up to speed with React.
Dependency on other technologies: React is just one part of a larger ecosystem of technologies that are required to build modern web applications. This can make it difficult for developers to understand and manage all of the dependencies required to build a React application.
Lack of guidance: Because React is a flexible and unopinionated library, it does not provide a lot of guidance on how to structure and organize code. This can make it difficult for developers to know how best to approach building a React application.
Conclusion
React is a JavaScript library for building user interfaces that allow developers to create reusable components and optimize updates to the DOM. It knows many advantages and many challenges but overall, these challenges can be overcome with time and experience, and many developers find that the benefits of using React outweigh any potential disadvantages.
