React (software): Difference between revisions

Revision as of 21:55, 19 June 2025

Latest revision as of 12:35, 21 August 2025

(9 intermediate revisions by 8 users not shown)

Line 33:

== Notable features ==

=== Declarative ===

React adheres to the [[declarative programming]] [[Programming paradigm|paradigm]].<ref>{{Cite web |date=2017-09-27 |title=React Introduction |url=https://www.geeksforgeeks.org/reactjs-introduction/ |access-date=2024-10-12 |website=GeeksforGeeks |language=en-US}}</ref> React adheres to the [[declarative programming]] [[Programming paradigm|paradigm]].{{sfn|Wieruch|2020}}{{rp|76}} Developers design views for each state of an application, and React updates and renders components when data changes. This is in contrast with [[imperative programming]].{{sfn|Schwarzmüller|2018}}

=== Components ===

Line 41:

=== Function components ===

Function components, announced at React Conf 2018, and available since React v16.8 and, are declared with a function that accepts a single "props" argument and returns JSX. Function components can use internal state with the <code>useState</code> Hook.

<ref name="introducing_hooks"/>

Line 79:

Currently, server components are most readily usable with [[Next.js]]. With Next.js, it's possible to write components for both the server and the client (browser). When a server rendered component is received by the browser, React in the browser takes over and creates the virtual DOM and attach event handlers. This is called hydration.

<ref>{{Cite web |title= hydrate |url=https://18.react.dev/reference/react-dom/hydrate#hydrating-server-rendered-html |access-date=2025-06-19 |language=en |archive-date=YYYY-MM-DD |archive-url=https://web.archive.org/web/20240716002720/https://18.react.dev/reference/react-dom/hydrate#hydrating-server-rendered-html |archive-date=2024-07-16 |url-status=live }}</ref>

=== Class components ===

Line 104:

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, similar to the browser DOM. Every time components are rendered, the result is compared with the virtual DOM. It then updates the browser's displayed DOM efficiently with only the computed differences.<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–137 |date=March 2018 |url-status=live}}</ref>

==== Updates ====

When <code>ReactDOM.render</code><ref>{{Cite web |title=ReactDOM – React |url=https://reactjs.org/docs/react-dom.html |access-date=2023-01-08 |website=reactjs.org |language=en |archive-date=2023-01-08 |archive-url=https://web.archive.org/web/20230108104936/https://reactjs.org/docs/react-dom.html |url-status=live }}</ref> is called again for the same component and target, React represents the new UI state in the Virtual DOM and determines which parts (if any) of the living DOM needs to change.<ref>{{Cite web |title=Reconciliation – React |url=https://reactjs.org/docs/reconciliation.html |access-date=2023-01-08 |website=reactjs.org |language=en |archive-date=2023-01-08 |archive-url=https://web.archive.org/web/20230108105122/https://reactjs.org/docs/reconciliation.html |url-status=live }}</ref>

Line 204:

This pattern is sometimes expressed as "properties flow down, actions flow up". Many implementations of Flux have been created since its inception, perhaps the most well-known being [[Redux (JavaScript library)|Redux]], which features a single store, often called a [[single source of truth]].<ref>{{cite web|title=State Management Tools – Results|url=http://2016.stateofjs.com/2016/statemanagement/|website=The State of JavaScript|access-date=29 October 2021|archive-date=31 May 2022|archive-url=https://web.archive.org/web/20220531133609/http://2016.stateofjs.com/2016/statemanagement/|url-status=live}}</ref>

In February 2019, <code>useReducer</code> was introduced as a [[React (web framework)#React Hooks|React hook]] in the 16.8 release. It provides an API that is consistent with Redux, enabling developers to create Redux-like stores that are local to component states.<ref>{{Cite web |url=https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#react-1 |title=React v16.8: The One with Hooks |access-date=2023-01-08 |archive-date=2023-01-08 |archive-url=https://web.archive.org/web/20230108090021/https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#react-1 |url-status=live }}</ref>

== Future development ==

Project status can be tracked via the core team discussion forum.<ref>{{Cite web|title = Meeting Notes|url = https://discuss.reactjs.org/c/meeting-notes|website = React Discuss|access-date = 2015-12-13|archive-date = 2015-12-22|archive-url = https://web.archive.org/web/20151222141426/https://discuss.reactjs.org/c/meeting-notes|url-status = dead}}</ref> However, major changes to React go through the Future of React repository issues and [[pull request]]s.<ref>{{Cite web|title = reactjs/react-future – The Future of React|url = https://github.com/reactjs/react-future|website = GitHub|access-date = 2015-12-13|archive-date = 2022-07-13|archive-url = https://web.archive.org/web/20220713230021/https://github.com/reactjs/react-future|url-status = live}}</ref><ref>{{Cite web|title = facebook/react – Feature request issues|url = https://github.com/facebook/react/labels/Type:%20Feature%20Request|website = GitHub|access-date = 2015-12-13|archive-date = 2022-07-09|archive-url = https://web.archive.org/web/20220709131412/https://github.com/facebook/react/labels/Type%3A%20Feature%20Request|url-status = live}}</ref> This enables the React community to provide feedback on new potential features, experimental APIs and JavaScript syntax improvements.

== History ==