React (software): Difference between revisions

Revision as of 15:08, 28 January 2025

Revision as of 05:27, 29 January 2025

Line 64:

=== Server components ===

React server components (RSC) <ref>{{Cite web|url=https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components|title=React Labs: What We've Been Working On – March 2023|website=react.dev|language=en|access-date=2023-07-23|archive-date=2023-07-26|archive-url=https://web.archive.org/web/20230726201006/https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components|url-status=live}}</ref> are function components that run exclusively on the server. The concept was first introduced in the talk "Data Fetching with Server Components".<ref>{{Cite web |lastlast1=Abramov |firstfirst1=Dan |last2=Tan |first2=Lauren |last3=Savona |first3=Joseph |last4=Markbåge |first4=Sebastian |date=2020-12-21 |title=Introducing Zero-Bundle-Size React Server Components |url=https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components |access-date=2024-09-28 |website=react.dev |language=en}}</ref> Though a similar concept to Server Side Rendering, RSCs do not send corresponding JavaScript to the client as no hydration occurs. As a result, they have no access to hooks. However, they may be [[Async/await|asynchronous function]], allowing them to directly perform asynchronous operations:

<syntaxhighlight lang="jsx" line="1">

Line 99:

=== Virtual DOM ===

Another notable feature is the use of a virtual [[Document Object Model]], or [[Virtual DOM]]. React creates an [[In-memory processing|in-memory]] data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.<ref name="React Blog">{{cite web |title=Refs and the DOM |url=https://reactjs.org/docs/refs-and-the-dom.html |access-date=2021-07-19 |website=React Blog |archive-date=2022-08-07 |archive-url=https://web.archive.org/web/20220807171328/https://reactjs.org/docs/refs-and-the-dom.html |url-status=live }}</ref> This process is called '''reconciliation'''. This allows the programmer to write code as if the entire page is rendered on each change, while React only renders the components that actually change. This selective rendering provides a major performance boost.<ref name="Codecademy">{{Cite web |title=React: The Virtual DOM |url=https://www.codecademy.com/articles/react-virtual-dom |access-date=2021-10-14 |website=Codecademy |language=en |archive-date=2021-10-28 |archive-url=https://web.archive.org/web/20211028172953/https://www.codecademy.com/articles/react-virtual-dom |url-status=live }}</ref><ref name="Aggarwal">{{cite web |last1=Aggarwal |first1=Sanchit |title=Modern Web-Development using ReactJS |url=https://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf |website=International Journal of Recent Research Aspects |access-date=11 December 2024 |archive-url=https://web.archive.org/web/20240417143754/https://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf |archive-date=17 April 2024 |pages=133-137133–137 |date=March 2018 |url-status=live}}</ref>

== Updates ==

Line 353:

== Comparison with other frameworks ==

JavaScript-based web application frameworks, such as React, provide extensive capabilities but come with associated trade-offs. These frameworks often extend or enhance features available through native web technologies, such as routing, component-based development, and state management. While native web standards, including Web Components, modern JavaScript APIs like Fetch and ES Modules, and browser capabilities like Shadow DOM, have advanced significantly, frameworks remain widely used for their ability to enhance developer productivity, offer structured patterns for large-scale applications, simplify handling edge cases, and provide tools for performance optimization. <ref name=":02">{{Cite book |title=JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now |isbn=978-1484249949 |last1=Uzayr |first1=Sufyan bin |last2=Cloud |first2=Nicholas |last3=Ambler |first3=Tim |date=November 2019 |publisher=Apress }}</ref><ref name=":12">{{Cite book |title=Building Native Web Components: Front-End Development with Polymer and Vue.js |isbn=978-1484259047}}</ref><ref name=":22">{{Cite book |title=Hands-On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js, and WebAssembly |isbn=978-1838821098}}</ref>

Frameworks can introduce abstraction layers that may contribute to performance overhead, larger bundle sizes, and increased complexity. Modern frameworks, such as React 18, address these challenges with features like concurrent rendering, tree-shaking, and selective hydration. While these advancements improve rendering efficiency and resource management, their benefits depend on the specific application and implementation context. Lightweight frameworks, such as Svelte and Preact, take different architectural approaches, with Svelte eliminating the virtual DOM entirely in favor of compiling components to efficient JavaScript code, and Preact offering a minimal, compatible alternative to React. Framework choice depends on an application’s requirements, including the team’s expertise, performance goals, and development priorities. <ref name=":02" /><ref name=":12" /><ref name=":22" />

A newer category of web frameworks, including enhance.dev, Astro, and Fresh, leverages native web standards while minimizing abstractions and development tooling. <ref>{{Cite web |title=Enhance |website=[[GitHub]] |url=https://github.com/enhance-dev |url-status=live}}</ref><ref>{{Cite web |title=Astro framework |website=[[GitHub]] |url=https://github.com/withastro/astro |url-status=live}}</ref><ref>{{Cite web |title=Fresh |website=[[GitHub]] |url=https://github.com/denoland/fresh |url-status=live}}</ref> These solutions emphasize [[progressive enhancement]], [[server-side rendering]], and optimizing performance. Astro renders static HTML by default while hydrating only interactive parts. Fresh focuses on server-side rendering with zero runtime overhead. Enhance.dev prioritizes progressive enhancement patterns using Web Components. While these tools reduce reliance on client-side JavaScript by shifting logic to build-time or server-side execution, they still use JavaScript where necessary for interactivity. This approach makes them particularly suitable for performance-critical and content-focused applications. <ref name=":02" /><ref name=":12" /><ref name=":22" />

== See also ==