React (software): Difference between revisions

Revision as of 13:27, 28 November 2024

Revision as of 03:27, 6 December 2024

Line 51:

|archive-url=https://web.archive.org/web/20181025163202/https://reactjs.org/docs/hooks-intro.html

|url-status=live

}}</ref> Hooks are functions that let developers "hook into" React state and lifecycle features from function components.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-overview.html|title=Hooks at a Glance – React|website=reactjs.org|language=en|access-date=2019-08-08|archive-date=2023-03-15|archive-url=https://web.archive.org/web/20230315054047/https://reactjs.org/docs/hooks-overview.html|url-status=live}}</ref> Notably, Hooks do not work inside classes — they let developers use more features of React without classes.<ref>{{Cite web |urldate=https://blog.soshace.com/what2020-the01-heck-is-react-hooks/16 |title=What the Heck is React Hooks? |dateurl=https://soshace.com/2020-/01-/16|website=Soshace|language=en|access/what-date=2020the-01heck-24|archiveis-date=2022react-05hooks/ |url-31status=live |archive-url=https://web.archive.org/web/20220531133601/https://blog.soshace.com/what-the-heck-is-react-hooks/ |urlarchive-statusdate=live2022-05-31 |access-date=2020-01-24 |website=Soshace |language=en}}</ref>

React provides several built-in hooks such as <code>useState</code>,<ref>{{Cite web|url=https://reactjs.org/docs/hooks-state.html|title=Using the State Hook – React|website=reactjs.org|language=en|access-date=2020-01-24|archive-date=2022-07-30|archive-url=https://web.archive.org/web/20220730180312/https://reactjs.org/docs/hooks-state.html|url-status=live}}</ref>{{sfn|Larsen|2021}}{{rp|37}} <code>useContext</code>,{{sfn|Wieruch|2020}}{{rp|11}}<ref name="reactjs.org-2">{{Cite web|url=https://reactjs.org/docs/hooks-state.html|title=Using the State Hook – React|website=reactjs.org|language=en|access-date=2020-01-24|archive-date=2022-07-30|archive-url=https://web.archive.org/web/20220730180312/https://reactjs.org/docs/hooks-state.html|url-status=live}}</ref>{{sfn|Larsen|2021}}{{rp|12}} <code>useReducer</code>,{{sfn|Wieruch|2020}}{{rp|92}}<ref name="reactjs.org-2" />{{sfn|Larsen|2021}}{{rp|65-66}} <code>useMemo</code>{{sfn|Wieruch|2020}}{{rp|154}}<ref name="reactjs.org-2" />{{sfn|Larsen|2021}}{{rp|162}} and <code>useEffect</code>.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-effect.html|title=Using the Effect Hook – React|website=reactjs.org|language=en|access-date=2020-01-24|archive-date=2022-08-01|archive-url=https://web.archive.org/web/20220801212858/https://reactjs.org/docs/hooks-effect.html|url-status=live}}</ref>{{sfn|Larsen|2021}}{{rp|93-95}} Others are documented in the Hooks API Reference.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-reference.html|title=Hooks API Reference – React|website=reactjs.org|language=en|access-date=2020-01-24|archive-date=2022-08-05|archive-url=https://web.archive.org/web/20220805061010/https://reactjs.org/docs/hooks-reference.html|url-status=live}}</ref>{{sfn|Wieruch|2020}}{{rp|62}} <code>useState</code> and <code>useEffect</code>, which are the most commonly used, are for controlling state{{sfn|Wieruch|2020}}{{rp|37}} and side effects,{{sfn|Wieruch|2020}}{{rp|61}} respectively.