React-tRace: A Semantics for Understanding React Hooks: An Operational Semantics and a Visualizer for Clarifying React Hooks

React has become the most widely used web front-end framework, enabling the creation of user interfaces in a declarative and compositional manner. Hooks are a set of APIs that manage side effects in function components in React. However, their semantics are often seen as opaque to developers, leadin...

Celý popis

Uloženo v:
Podrobná bibliografie
Vydáno v:Proceedings of ACM on programming languages Ročník 9; číslo OOPSLA2; s. 471 - 498
Hlavní autoři: Lee, Jay, Ahn, Joongwon, Yi, Kwangkeun
Médium: Journal Article
Jazyk:angličtina
Vydáno: New York, NY, USA ACM 09.10.2025
Témata:
ISSN:2475-1421, 2475-1421
On-line přístup:Získat plný text
Tagy: Přidat tag
Žádné tagy, Buďte první, kdo vytvoří štítek k tomuto záznamu!
Abstract React has become the most widely used web front-end framework, enabling the creation of user interfaces in a declarative and compositional manner. Hooks are a set of APIs that manage side effects in function components in React. However, their semantics are often seen as opaque to developers, leading to UI bugs. We introduce React-tRace, a formalization of the semantics of the essence of React Hooks, providing a semantics that clarifies their behavior. We demonstrate that our model captures the behavior of React, by theoretically showing that it embodies essential properties of Hooks and empirically comparing our React-tRace-definitional interpreter against a test suite. Furthermore, we showcase a practical visualization tool based on the formalization to demonstrate how developers can better understand the semantics of Hooks.
AbstractList React has become the most widely used web front-end framework, enabling the creation of user interfaces in a declarative and compositional manner. Hooks are a set of APIs that manage side effects in function components in React. However, their semantics are often seen as opaque to developers, leading to UI bugs. We introduce React-tRace, a formalization of the semantics of the essence of React Hooks, providing a semantics that clarifies their behavior. We demonstrate that our model captures the behavior of React, by theoretically showing that it embodies essential properties of Hooks and empirically comparing our React-tRace-definitional interpreter against a test suite. Furthermore, we showcase a practical visualization tool based on the formalization to demonstrate how developers can better understand the semantics of Hooks.
ArticleNumber 289
Author Lee, Jay
Yi, Kwangkeun
Ahn, Joongwon
Author_xml – sequence: 1
  givenname: Jay
  orcidid: 0000-0002-2224-4861
  surname: Lee
  fullname: Lee, Jay
  email: jhlee@ropas.snu.ac.kr
  organization: Seoul National University, Seoul, Republic of Korea
– sequence: 2
  givenname: Joongwon
  orcidid: 0009-0007-0055-7297
  surname: Ahn
  fullname: Ahn, Joongwon
  email: jwahn@ropas.snu.ac.kr
  organization: Seoul National University, Seoul, Republic of Korea
– sequence: 3
  givenname: Kwangkeun
  orcidid: 0009-0007-5027-2177
  surname: Yi
  fullname: Yi, Kwangkeun
  email: kwang@ropas.snu.ac.kr
  organization: Seoul National University, Seoul, Republic of Korea
BookMark eNpdkDFPwzAQRi1UJEqp2Jm8MQXs2EkctqoCilSpUqGs0cU-I0PqVHYYivjxhBZQxXR3-t694TslA996JOScsyvOZXYtilywvDgiw1QWWcJlygcH-wkZx_jKGOOlkEqUQ_K5RNBd0i1B4w2d0Edcg--cjtS2ga68wRA78Mb5F7pD6axt32KPerrYYIDOtR6ag78epkCfXXyHxn1g2ImmDQRnt_8sZ-TYQhNx_DNHZHV3-zSdJfPF_cN0Mk-AZ3mRKIslKCbLTGkwIhWyNjVXdV2rugBTChR5qnRqmZBW8ZTnheCAhhmUWPbHiFzuvTq0MQa01Sa4NYRtxVn13Vv101tPXuxJ0Os_6Df8Arn8aaM
Cites_doi 10.1002/spe.2187
10.1145/2491956.2462161
10.1145/2737924.2737991
10.1145/3360577
10.1145/3064899.3064901
10.1145/512950.512973
10.1007/978-3-642-14107-2_7
10.1007/BFb0039592
10.1145/3397495
10.1145/2384577.2384579
10.1145/2784731.2784741
10.1145/2983990.2984010
10.1145/3624723
10.1145/3158138
10.5281/zenodo.16916356
10.1007/978-3-540-74792-5_12
10.4230/LIPIcs.ECOOP.2020.12
10.1007/978-3-540-89330-1_22
10.1145/1640089.1640091
10.1145/3192366.3192407
10.1145/3324884.3416632
10.1145/258948.258973
10.4230/LIPIcs.ECOOP.2020.14
10.1145/3632865
10.1145/2676726.2677004
10.1145/2980991
10.1145/3133910
10.1109/sp46215.2023.10179465
10.1145/2220365.2220369
ContentType Journal Article
Copyright Owner/Author
Copyright_xml – notice: Owner/Author
DBID AAYXX
CITATION
DOI 10.1145/3763067
DatabaseName CrossRef
DatabaseTitle CrossRef
DatabaseTitleList CrossRef

DeliveryMethod fulltext_linktorsrc
Discipline Computer Science
EISSN 2475-1421
EndPage 498
ExternalDocumentID 10_1145_3763067
3763067
GrantInformation_xml – fundername: Samsung Electronics Co., Ltd.
  grantid: 0536-20230088
– fundername: Greenlabs Co., Ltd.
  grantid: 0536-20220078
– fundername: National Research Foundation of Korea
  grantid: 4199990214639
  funderid: https://doi.org/10.13039/501100003725
GroupedDBID AAKMM
AAYFX
ACM
AEFXT
AEJOY
AIKLT
AKRVB
ALMA_UNASSIGNED_HOLDINGS
GUFHI
LHSKQ
M~E
OK1
ROL
AAYXX
CITATION
ID FETCH-LOGICAL-a1567-8fe9a804958cad3234bdb18bbb8b7ad93e3628c2f034f81216731aed0de4e9673
ISSN 2475-1421
IngestDate Thu Oct 16 04:28:21 EDT 2025
Mon Oct 13 16:30:15 EDT 2025
IsDoiOpenAccess true
IsOpenAccess true
IsPeerReviewed true
IsScholarly true
Issue OOPSLA2
Keywords Hooks
Functional reactive programming
Render semantics
React
Language English
License This work is licensed under Creative Commons Attribution International 4.0.
LinkModel OpenURL
MergedId FETCHMERGED-LOGICAL-a1567-8fe9a804958cad3234bdb18bbb8b7ad93e3628c2f034f81216731aed0de4e9673
ORCID 0009-0007-5027-2177
0009-0007-0055-7297
0000-0002-2224-4861
OpenAccessLink https://dl.acm.org/doi/10.1145/3763067
PageCount 28
ParticipantIDs crossref_primary_10_1145_3763067
acm_primary_3763067
PublicationCentury 2000
PublicationDate 20251009
2025-10-09
PublicationDateYYYYMMDD 2025-10-09
PublicationDate_xml – month: 10
  year: 2025
  text: 20251009
  day: 09
PublicationDecade 2020
PublicationPlace New York, NY, USA
PublicationPlace_xml – name: New York, NY, USA
PublicationTitle Proceedings of ACM on programming languages
PublicationTitleAbbrev ACM PACMPL
PublicationYear 2025
Publisher ACM
Publisher_xml – name: ACM
References Gabriel Radanne, Vasilis Papavasileiou, Jérôme Vouillon, and Vincent Balat. 2016. Eliom: tierless Web programming from the ground up. In Proceedings of the 28th Symposium on the Implementation and Application of Functional Programming Languages (IFL ’16). Association for Computing Machinery, New York, NY, USA. Article 8, 12 pages. isbn:9781450347679 https://doi.org/10.1145/3064899.3064901 10.1145/3064899.3064901
Adam Chlipala. 2015. An Optimizing Compiler for a Purely Functional Web-Application Language. In Proceedings of the 20th ACM SIGPLAN International Conference on Functional Programming (ICFP ’15). Association for Computing Machinery, New York, NY, USA. 10–21. isbn:9781450336697 https://doi.org/10.1145/2784731.2784741 10.1145/2784731.2784741
Jérôme Vouillon and Vincent Balat. 2014. From bytecode to JavaScript: the Js_of_ocaml compiler. Softw. Pract. Exper., 44, 8 (2014), Aug., 951–972. issn:0038-0644 https://doi.org/10.1002/spe.2187 10.1002/spe.2187
Meta Platforms, Inc. 2025. Queueing a Series of State Updates – React. https://react.dev/learn/queueing-a-series-of-state-updates Accessed: 2025-03-12
Sukyoung Ryu and Jihyeok Park. 2024. JavaScript Language Design and Implementation in Tandem. Commun. ACM, 67, 5 (2024), May, 86–95. issn:0001-0782 https://doi.org/10.1145/3624723 10.1145/3624723
Meta Platforms, Inc. 2025. Component – React. https://react.dev/reference/react/Component Accessed: 2025-03-12
Pavel Panchekha, Adam T. Geller, Michael D. Ernst, Zachary Tatlock, and Shoaib Kamil. 2018. Verifying That Web Pages Have Accessible Layout. In Proceedings of the 39th ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI ’18). Association for Computing Machinery, New York, NY, USA. 1–14. isbn:9781450356985 https://doi.org/10.1145/3192366.3192407 10.1145/3192366.3192407
Dioxus Labs. 2024. Hooks and component state. https://dioxuslabs.com/learn/0.6/reference/hooks/ Accessed: 2025-03-25
Simon Fowler. 2020. Model-View-Update-Communicate: Session Types Meet the Elm Architecture. In 34th European Conference on Object-Oriented Programming (ECOOP 2020), Robert Hirschfeld and Tobias Pape (Eds.) (Leibniz International Proceedings in Informatics (LIPIcs), Vol. 166). Schloss Dagstuhl – Leibniz-Zentrum für Informatik, Dagstuhl, Germany. 14:1–14:28. isbn:978-3-95977-154-2 issn:1868-8969 https://doi.org/10.4230/LIPIcs.ECOOP.2020.14 10.4230/LIPIcs.ECOOP.2020.14
Jay Lee. 2025. A screenshot of the StackOverflow search results of ‘üseEffect" ïnfinite“. https://archive.org/details/useeffect-infinite Accessed: 2025-03-24
Pranjal. 2019. The useState set method is not reflecting a change immediately. https://stackoverflow.com/q/54069253 Accessed: 2025-03-24
Jay Lee and Joongwon Ahn. 2025. Artifact for “ React-tRace: A Semantics for Understanding React Hooks”. https://doi.org/10.5281/zenodo.16916356 10.5281/zenodo.16916356
Arjun Guha, Claudiu Saftoiu, and Shriram Krishnamurthi. 2010. The Essence of JavaScript. In ECOOP 2010 – Object-Oriented Programming, Theo D’Hondt (Ed.) (Lecture Notes in Computer Science, Vol. 6183). Springer Berlin Heidelberg, Berlin, Heidelberg. 126–150. isbn:978-3-642-14107-2 https://doi.org/10.1007/978-3-642-14107-2_7 10.1007/978-3-642-14107-2_7
CACM Staff. 2016. React: Facebook’s Functional Turn on Writing JavaScript. Commun. ACM, 59, 12 (2016), Dec., 56–62. issn:0001-0782 https://doi.org/10.1145/2980991 10.1145/2980991
Meta Platforms, Inc. 2025. React Compiler – React. https://react.dev/learn/react-compiler Accessed: 2025-03-25
Meta Platforms, Inc. 2025. Synchronizing with Effects – React. https://react.dev/learn/synchronizing-with-effects Accessed: 2025-03-12
Magnus Madsen, Ondřej Lhoták, and Frank Tip. 2017. A Model for Reasoning About JavaScript Promises. Proc. ACM Program. Lang., 1, OOPSLA (2017), Article 86, Oct., 24 pages. https://doi.org/10.1145/3133910 10.1145/3133910
Richard Feldman. 2020. Elm in Action. Manning Publications, Shelter Island, NY. isbn:9781617294044 https://www.manning.com/books/elm-in-action
Gérard Boudol, Zhengqin Luo, Tamara Rezk, and Manuel Serrano. 2012. Reasoning about Web Applications: An Operational Semantics for HOP. ACM Trans. Program. Lang. Syst., 34, 2 (2012), Article 10, June, 40 pages. issn:0164-0925 https://doi.org/10.1145/2220365.2220369 10.1145/2220365.2220369
Sergio Maffeis, John C. Mitchell, and Ankur Taly. 2008. An Operational Semantics for JavaScript. In Programming Languages and Systems (APLAS ’08), Ganesan Ramalingam (Ed.) (Lecture Notes in Computer Science, Vol. 5356). Springer Berlin Heidelberg, Berlin, Heidelberg. 307–325. https://doi.org/10.1007/978-3-540-89330-1_22 10.1007/978-3-540-89330-1_22
Joe Gibbs Politz, Matthew J. Carroll, Benjamin S. Lerner, Justin Pombrio, and Shriram Krishnamurthi. 2012. A Tested Semantics for Getters, Setters, and Eval in JavaScript. In Proceedings of the 8th Symposium on Dynamic Languages (DLS ’12). Association for Computing Machinery, New York, NY, USA. 1–16. isbn:9781450315647 https://doi.org/10.1145/2384577.2384579 10.1145/2384577.2384579
Jihyeok Park, Jihee Park, Seungmin An, and Sukyoung Ryu. 2021. JISET: JavaScript IR-based Semantics Extraction Toolchain. In Proceedings of the 35th IEEE/ACM International Conference on Automated Software Engineering (ASE ’20). Association for Computing Machinery, New York, NY, USA. 647–658. isbn:9781450367684 https://doi.org/10.1145/3324884.3416632 10.1145/3324884.3416632
Adam Chlipala. 2015. Ur/Web: A Simple Model for Programming the Web. In Proceedings of the 42nd Annual ACM SIGPLAN-SIGACT Symposium on Principles of Programming Languages (POPL ’15). Association for Computing Machinery, New York, NY, USA. 153–165. isbn:9781450333009 https://doi.org/10.1145/2676726.2677004 10.1145/2676726.2677004
Meta Platforms, Inc. 2025. Rules of React – React. https://react.dev/reference/rules Accessed: 2025-03-12
Will Crichton and Shriram Krishnamurthi. 2024. A Core Calculus for Documents: Or, Lambda: The Ultimate Document. Proc. ACM Program. Lang., 8, POPL (2024), Article 23, Jan., 28 pages. https://doi.org/10.1145/3632865 10.1145/3632865
Patrick Cousot and Radhia Cousot. 1977. Abstract Interpretation: A Unified Lattice Model for Static Analysis of Programs by Construction or Approximation of Fixpoints. In Proceedings of the 4th ACM SIGACT-SIGPLAN Symposium on Principles of Programming Languages (POPL ’77). Association for Computing Machinery, New York, NY, USA. 238–252. isbn:9781450373500 https://doi.org/10.1145/512950.512973 10.1145/512950.512973
Conal Elliott and Paul Hudak. 1997. Functional Reactive Animation. In Proceedings of the Second ACM SIGPLAN International Conference on Functional Programming (ICFP ’97). Association for Computing Machinery, New York, NY, USA. 263–273. isbn:0897919181 https://doi.org/10.1145/258948.258973 10.1145/258948.258973
vadirn. 2018. Does React batch state update functions when using hooks? https://stackoverflow.com/q/53048495 Accessed: 2025-03-24
Magnus Madsen, Ondřej Lhoták, and Frank Tip. 2020. A Semantics for the Essence of React. In 34th European Conference on Object-Oriented Programming (ECOOP 2020), Robert Hirschfeld and Tobias Pape (Eds.) (Leibniz International Proceedings in Informatics (LIPIcs), Vol. 166). Schloss Dagstuhl – Leibniz-Zentrum für Informatik, Dagstuhl, Germany. 12:1–12:26. isbn:978-3-95977-154-2 issn:1868-8969 https://doi.org/10.4230/LIPIcs.ECOOP.2020.12 10.4230/LIPIcs.ECOOP.2020.12
Meta Platforms, Inc. 2022. JSX. https://facebook.github.io/jsx/ Accessed: 2025-03-24
Meta Platforms, Inc. 2025. Rules of Hooks – React. https://react.dev/reference/rules/rules-of-hooks Accessed: 2025-03-12
Meta Platforms, Inc. 2025. useState – React. https://react.dev/reference/react/useState Accessed: 2025-03-25
Evan Czaplicki and Stephen Chong. 2013. Asynchronous Functional Reactive Programming for GUIs. In Proceedings of the 34th ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI ’13). Association for Computing Machinery, New York, NY, USA. 411–422. isbn:9781450320146 https://doi.org/10.1145/2491956.2462161 10.1145/2491956.2462161
Ezra Cooper, Sam Lindley, Philip Wadler, and Jeremy Yallop. 2007. Links: Web Programming Without Tiers. In Formal Methods for Components and Objects (FMCO ’06), Frank S. de Boer, Marcello M. Bonsangue, Susanne Graf, and Willem-Paul de Roever (Eds.) (Lecture Notes in Computer Science, Vol. 4709). Springer Berlin Heidelberg, Berlin, Heidelberg. 266–296. https://doi.org/10.1007/978-3-540-74792-5_12 10.1007/978-3-540-74792-5_12
Pascal Weisenburger, Johannes Wirth, and Guido Salvaneschi. 2020. A Survey of Multitier Programming. ACM Comput. Surv., 53, 4 (2020), Article 81, Sept., 35 pages. issn:0360-0300 https://doi.org/10.1145/3397495 10.1145/3397495
Meta Platforms, Inc. 2025. Higher-Order Components – React. https://legacy.reactjs.org/docs/higher-order-components.html Accessed: 2025-03-18
Manuel Serrano, Erick Gallesio, and Florian Loitsch. 2006. Hop, a Language for Programming the Web 2.0. In Companion to the 21st ACM SIGPLAN Symposium on Object-Oriented Programming Systems, Languages, and Applications (OOPSLA ’06). Association for Computing Machinery, New York, NY, USA. 975–985.
Xavier Rival and Kwangkeun Yi. 2020. Introduction to Static Analysis: An Abstract Interpretation Perspective. The MIT Press, Cambridge, Massachusetts. isbn:978-0-262-04341-0
Pavel Panchekha, Michael D. Ernst, Zachary Tatlock, and Shoaib Kamil. 2019. Modular Verification of Web Page Layout. Proc. ACM Program. Lang., 3, OOPSLA (2019), Article 151, Oct., 26 pages. https://doi.org/10.1145/3360577 10.1145/3360577
Pavel Panchekha and Emina Torlak. 2016. Automated Reasoning for Web Page Layout. In Proceedings of the 2016 ACM SIGPLAN International Conference on Object-Oriented Programming, Systems, Languages, and Applications (OOPSLA ’16). Association for Computing Machinery, New York, NY, USA. 181–194. isbn:9781450344449 https://doi.org/10.1145/2983990.2984010 10.1145/2983990.2984010
Meta Platforms, Inc. 2025. Render and Commit – React. https://react.dev/
Serrano Manuel (e_1_2_1_43_1)
e_1_2_1_20_1
e_1_2_1_24_1
e_1_2_1_45_1
e_1_2_1_22_1
e_1_2_1_28_1
e_1_2_1_49_1
e_1_2_1_26_1
e_1_2_1_47_1
e_1_2_1_31_1
e_1_2_1_8_1
Rival Xavier (e_1_2_1_41_1)
e_1_2_1_6_1
e_1_2_1_12_1
e_1_2_1_35_1
e_1_2_1_50_1
e_1_2_1_4_1
e_1_2_1_33_1
e_1_2_1_2_1
e_1_2_1_16_1
e_1_2_1_39_1
e_1_2_1_14_1
e_1_2_1_37_1
e_1_2_1_18_1
e_1_2_1_42_1
e_1_2_1_40_1
e_1_2_1_23_1
e_1_2_1_46_1
e_1_2_1_21_1
e_1_2_1_44_1
e_1_2_1_27_1
e_1_2_1_25_1
e_1_2_1_48_1
e_1_2_1_29_1
e_1_2_1_7_1
e_1_2_1_30_1
e_1_2_1_5_1
e_1_2_1_3_1
e_1_2_1_13_1
e_1_2_1_34_1
e_1_2_1_51_1
e_1_2_1_1_1
e_1_2_1_11_1
e_1_2_1_32_1
e_1_2_1_17_1
e_1_2_1_38_1
e_1_2_1_15_1
e_1_2_1_36_1
Feldman Richard (e_1_2_1_10_1)
e_1_2_1_9_1
e_1_2_1_19_1
References_xml – reference: Leo A. Meyerovich, Arjun Guha, Jacob Baskin, Gregory H. Cooper, Michael Greenberg, Aleks Bromfield, and Shriram Krishnamurthi. 2009. Flapjax: A Programming Language for Ajax Applications. In Proceedings of the 24th ACM SIGPLAN Conference on Object Oriented Programming Systems Languages and Applications (OOPSLA ’09). Association for Computing Machinery, New York, NY, USA. 1–20. isbn:9781605587660 https://doi.org/10.1145/1640089.1640091 10.1145/1640089.1640091
– reference: Conal Elliott and Paul Hudak. 1997. Functional Reactive Animation. In Proceedings of the Second ACM SIGPLAN International Conference on Functional Programming (ICFP ’97). Association for Computing Machinery, New York, NY, USA. 263–273. isbn:0897919181 https://doi.org/10.1145/258948.258973 10.1145/258948.258973
– reference: Manuel Serrano, Erick Gallesio, and Florian Loitsch. 2006. Hop, a Language for Programming the Web 2.0. In Companion to the 21st ACM SIGPLAN Symposium on Object-Oriented Programming Systems, Languages, and Applications (OOPSLA ’06). Association for Computing Machinery, New York, NY, USA. 975–985.
– reference: Adam Chlipala. 2015. Ur/Web: A Simple Model for Programming the Web. In Proceedings of the 42nd Annual ACM SIGPLAN-SIGACT Symposium on Principles of Programming Languages (POPL ’15). Association for Computing Machinery, New York, NY, USA. 153–165. isbn:9781450333009 https://doi.org/10.1145/2676726.2677004 10.1145/2676726.2677004
– reference: Evan Czaplicki and Stephen Chong. 2013. Asynchronous Functional Reactive Programming for GUIs. In Proceedings of the 34th ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI ’13). Association for Computing Machinery, New York, NY, USA. 411–422. isbn:9781450320146 https://doi.org/10.1145/2491956.2462161 10.1145/2491956.2462161
– reference: Meta Platforms, Inc. 2022. JSX. https://facebook.github.io/jsx/ Accessed: 2025-03-24
– reference: Pavel Panchekha and Emina Torlak. 2016. Automated Reasoning for Web Page Layout. In Proceedings of the 2016 ACM SIGPLAN International Conference on Object-Oriented Programming, Systems, Languages, and Applications (OOPSLA ’16). Association for Computing Machinery, New York, NY, USA. 181–194. isbn:9781450344449 https://doi.org/10.1145/2983990.2984010 10.1145/2983990.2984010
– reference: Jérôme Vouillon and Vincent Balat. 2014. From bytecode to JavaScript: the Js_of_ocaml compiler. Softw. Pract. Exper., 44, 8 (2014), Aug., 951–972. issn:0038-0644 https://doi.org/10.1002/spe.2187 10.1002/spe.2187
– reference: José Fragoso Santos, Petar Maksimović, Daiva Naudžiūnienė, Thomas Wood, and Philippa Gardner. 2017. JaVerT: JavaScript Verification Toolchain. Proc. ACM Program. Lang., 2, POPL (2017), Article 50, Dec., 33 pages. https://doi.org/10.1145/3158138 10.1145/3158138
– reference: Ezra Cooper, Sam Lindley, Philip Wadler, and Jeremy Yallop. 2007. Links: Web Programming Without Tiers. In Formal Methods for Components and Objects (FMCO ’06), Frank S. de Boer, Marcello M. Bonsangue, Susanne Graf, and Willem-Paul de Roever (Eds.) (Lecture Notes in Computer Science, Vol. 4709). Springer Berlin Heidelberg, Berlin, Heidelberg. 266–296. https://doi.org/10.1007/978-3-540-74792-5_12 10.1007/978-3-540-74792-5_12
– reference: Meta Platforms, Inc. 2025. React Compiler – React. https://react.dev/learn/react-compiler Accessed: 2025-03-25
– reference: Simon Fowler. 2020. Model-View-Update-Communicate: Session Types Meet the Elm Architecture. In 34th European Conference on Object-Oriented Programming (ECOOP 2020), Robert Hirschfeld and Tobias Pape (Eds.) (Leibniz International Proceedings in Informatics (LIPIcs), Vol. 166). Schloss Dagstuhl – Leibniz-Zentrum für Informatik, Dagstuhl, Germany. 14:1–14:28. isbn:978-3-95977-154-2 issn:1868-8969 https://doi.org/10.4230/LIPIcs.ECOOP.2020.14 10.4230/LIPIcs.ECOOP.2020.14
– reference: Arjun Guha, Claudiu Saftoiu, and Shriram Krishnamurthi. 2010. The Essence of JavaScript. In ECOOP 2010 – Object-Oriented Programming, Theo D’Hondt (Ed.) (Lecture Notes in Computer Science, Vol. 6183). Springer Berlin Heidelberg, Berlin, Heidelberg. 126–150. isbn:978-3-642-14107-2 https://doi.org/10.1007/978-3-642-14107-2_7 10.1007/978-3-642-14107-2_7
– reference: Meta Platforms, Inc. 2025. Rules of React – React. https://react.dev/reference/rules Accessed: 2025-03-12
– reference: Meta Platforms, Inc. 2025. Reconciliation – React. https://legacy.reactjs.org/docs/reconciliation.html Accessed: 2025-07-23
– reference: CACM Staff. 2016. React: Facebook’s Functional Turn on Writing JavaScript. Commun. ACM, 59, 12 (2016), Dec., 56–62. issn:0001-0782 https://doi.org/10.1145/2980991 10.1145/2980991
– reference: Lorenzo Veronese, Benjamin Farinier, Pedro Bernardo, Mauro Tempesta, Marco Squarcina, and Matteo Maffei. 2023. WebSpec: Towards Machine-Checked Analysis of Browser Security Mechanisms. In 2023 IEEE Symposium on Security and Privacy (SP ’23). IEEE, San Francisco, CA, USA. 2761–2779. https://doi.org/10.1109/sp46215.2023.10179465 10.1109/sp46215.2023.10179465
– reference: Meta Platforms, Inc. 2025. Component – React. https://react.dev/reference/react/Component Accessed: 2025-03-12
– reference: Pascal Weisenburger, Johannes Wirth, and Guido Salvaneschi. 2020. A Survey of Multitier Programming. ACM Comput. Surv., 53, 4 (2020), Article 81, Sept., 35 pages. issn:0360-0300 https://doi.org/10.1145/3397495 10.1145/3397495
– reference: Sergio Maffeis, John C. Mitchell, and Ankur Taly. 2008. An Operational Semantics for JavaScript. In Programming Languages and Systems (APLAS ’08), Ganesan Ramalingam (Ed.) (Lecture Notes in Computer Science, Vol. 5356). Springer Berlin Heidelberg, Berlin, Heidelberg. 307–325. https://doi.org/10.1007/978-3-540-89330-1_22 10.1007/978-3-540-89330-1_22
– reference: Pavel Panchekha, Michael D. Ernst, Zachary Tatlock, and Shoaib Kamil. 2019. Modular Verification of Web Page Layout. Proc. ACM Program. Lang., 3, OOPSLA (2019), Article 151, Oct., 26 pages. https://doi.org/10.1145/3360577 10.1145/3360577
– reference: Meta Platforms, Inc. 2025. useState – React. https://react.dev/reference/react/useState Accessed: 2025-03-25
– reference: Daejun Park, Andrei Stefănescu, and Grigore Roşu. 2015. KJS: A Complete Formal Semantics of JavaScript. In Proceedings of the 36th ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI ’15). Association for Computing Machinery, New York, NY, USA. 346–356. isbn:9781450334686 https://doi.org/10.1145/2737924.2737991 10.1145/2737924.2737991
– reference: Adam Chlipala. 2015. An Optimizing Compiler for a Purely Functional Web-Application Language. In Proceedings of the 20th ACM SIGPLAN International Conference on Functional Programming (ICFP ’15). Association for Computing Machinery, New York, NY, USA. 10–21. isbn:9781450336697 https://doi.org/10.1145/2784731.2784741 10.1145/2784731.2784741
– reference: Magnus Madsen, Ondřej Lhoták, and Frank Tip. 2017. A Model for Reasoning About JavaScript Promises. Proc. ACM Program. Lang., 1, OOPSLA (2017), Article 86, Oct., 24 pages. https://doi.org/10.1145/3133910 10.1145/3133910
– reference: Jay Lee and Joongwon Ahn. 2025. Artifact for “ React-tRace: A Semantics for Understanding React Hooks”. https://doi.org/10.5281/zenodo.16916356 10.5281/zenodo.16916356
– reference: Sukyoung Ryu and Jihyeok Park. 2024. JavaScript Language Design and Implementation in Tandem. Commun. ACM, 67, 5 (2024), May, 86–95. issn:0001-0782 https://doi.org/10.1145/3624723 10.1145/3624723
– reference: Gilles Kahn. 1987. Natural Semantics. In STACS 87, Franz J. Brandenburg, Guy Vidal-Naquet, and Martin Wirsing (Eds.) (Lecture Notes in Computer Science, Vol. 247). Springer Berlin Heidelberg, Berlin, Heidelberg. 22–39. isbn:978-3-540-47419-7 https://doi.org/10.1007/BFb0039592 10.1007/BFb0039592
– reference: Tehila. 2022. Updating state to the same value directly in the component body during render causes infinite loop. https://stackoverflow.com/q/74034014 Accessed: 2025-03-24
– reference: Richard Feldman. 2020. Elm in Action. Manning Publications, Shelter Island, NY. isbn:9781617294044 https://www.manning.com/books/elm-in-action
– reference: Jihyeok Park, Jihee Park, Seungmin An, and Sukyoung Ryu. 2021. JISET: JavaScript IR-based Semantics Extraction Toolchain. In Proceedings of the 35th IEEE/ACM International Conference on Automated Software Engineering (ASE ’20). Association for Computing Machinery, New York, NY, USA. 647–658. isbn:9781450367684 https://doi.org/10.1145/3324884.3416632 10.1145/3324884.3416632
– reference: Gabriel Radanne, Vasilis Papavasileiou, Jérôme Vouillon, and Vincent Balat. 2016. Eliom: tierless Web programming from the ground up. In Proceedings of the 28th Symposium on the Implementation and Application of Functional Programming Languages (IFL ’16). Association for Computing Machinery, New York, NY, USA. Article 8, 12 pages. isbn:9781450347679 https://doi.org/10.1145/3064899.3064901 10.1145/3064899.3064901
– reference: Magnus Madsen, Ondřej Lhoták, and Frank Tip. 2020. A Semantics for the Essence of React. In 34th European Conference on Object-Oriented Programming (ECOOP 2020), Robert Hirschfeld and Tobias Pape (Eds.) (Leibniz International Proceedings in Informatics (LIPIcs), Vol. 166). Schloss Dagstuhl – Leibniz-Zentrum für Informatik, Dagstuhl, Germany. 12:1–12:26. isbn:978-3-95977-154-2 issn:1868-8969 https://doi.org/10.4230/LIPIcs.ECOOP.2020.12 10.4230/LIPIcs.ECOOP.2020.12
– reference: Meta Platforms, Inc. 2025. Queueing a Series of State Updates – React. https://react.dev/learn/queueing-a-series-of-state-updates Accessed: 2025-03-12
– reference: Pranjal. 2019. The useState set method is not reflecting a change immediately. https://stackoverflow.com/q/54069253 Accessed: 2025-03-24
– reference: Stack Exchange, Inc. 2024. 2024 Stack Overflow Developer Survey. https://survey.stackoverflow.co/2024/ Accessed: 2025-01-21
– reference: Dioxus Labs. 2024. Hooks and component state. https://dioxuslabs.com/learn/0.6/reference/hooks/ Accessed: 2025-03-25
– reference: Will Crichton and Shriram Krishnamurthi. 2024. A Core Calculus for Documents: Or, Lambda: The Ultimate Document. Proc. ACM Program. Lang., 8, POPL (2024), Article 23, Jan., 28 pages. https://doi.org/10.1145/3632865 10.1145/3632865
– reference: Gabriel Radanne, Jérôme Vouillon, and Vincent Balat. 2016. Eliom: A Core ML Language for Tierless Web Programming. In Programming Languages and Systems, Atsushi Igarashi (Ed.). Springer International Publishing, Cham. 377–397. isbn:978-3-319-47958-3
– reference: Xavier Rival and Kwangkeun Yi. 2020. Introduction to Static Analysis: An Abstract Interpretation Perspective. The MIT Press, Cambridge, Massachusetts. isbn:978-0-262-04341-0
– reference: Quoc Van Tang. 2019. React hooks useState setValue still rerender one more time when value is equal. https://stackoverflow.com/q/57652176 Accessed: 2025-03-24
– reference: Jay Lee. 2025. A screenshot of the StackOverflow search results of ‘üseEffect" ïnfinite“. https://archive.org/details/useeffect-infinite Accessed: 2025-03-24
– reference: Joe Gibbs Politz, Matthew J. Carroll, Benjamin S. Lerner, Justin Pombrio, and Shriram Krishnamurthi. 2012. A Tested Semantics for Getters, Setters, and Eval in JavaScript. In Proceedings of the 8th Symposium on Dynamic Languages (DLS ’12). Association for Computing Machinery, New York, NY, USA. 1–16. isbn:9781450315647 https://doi.org/10.1145/2384577.2384579 10.1145/2384577.2384579
– reference: Meta Platforms, Inc. 2025. Render and Commit – React. https://react.dev/learn/render-and-commit Accessed: 2025-03-25
– reference: Meta Platforms, Inc. 2025. Higher-Order Components – React. https://legacy.reactjs.org/docs/higher-order-components.html Accessed: 2025-03-18
– reference: Gérard Boudol, Zhengqin Luo, Tamara Rezk, and Manuel Serrano. 2012. Reasoning about Web Applications: An Operational Semantics for HOP. ACM Trans. Program. Lang. Syst., 34, 2 (2012), Article 10, June, 40 pages. issn:0164-0925 https://doi.org/10.1145/2220365.2220369 10.1145/2220365.2220369
– reference: vadirn. 2018. Does React batch state update functions when using hooks? https://stackoverflow.com/q/53048495 Accessed: 2025-03-24
– reference: Meta Platforms, Inc. 2025. Synchronizing with Effects – React. https://react.dev/learn/synchronizing-with-effects Accessed: 2025-03-12
– reference: Patrick Cousot and Radhia Cousot. 1977. Abstract Interpretation: A Unified Lattice Model for Static Analysis of Programs by Construction or Approximation of Fixpoints. In Proceedings of the 4th ACM SIGACT-SIGPLAN Symposium on Principles of Programming Languages (POPL ’77). Association for Computing Machinery, New York, NY, USA. 238–252. isbn:9781450373500 https://doi.org/10.1145/512950.512973 10.1145/512950.512973
– reference: Pavel Panchekha, Adam T. Geller, Michael D. Ernst, Zachary Tatlock, and Shoaib Kamil. 2018. Verifying That Web Pages Have Accessible Layout. In Proceedings of the 39th ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI ’18). Association for Computing Machinery, New York, NY, USA. 1–14. isbn:9781450356985 https://doi.org/10.1145/3192366.3192407 10.1145/3192366.3192407
– reference: Meta Platforms, Inc. 2025. Rules of Hooks – React. https://react.dev/reference/rules/rules-of-hooks Accessed: 2025-03-12
– ident: e_1_2_1_50_1
  doi: 10.1002/spe.2187
– ident: e_1_2_1_21_1
– ident: e_1_2_1_7_1
  doi: 10.1145/2491956.2462161
– ident: e_1_2_1_35_1
  doi: 10.1145/2737924.2737991
– ident: e_1_2_1_27_1
– ident: e_1_2_1_32_1
  doi: 10.1145/3360577
– ident: e_1_2_1_39_1
  doi: 10.1145/3064899.3064901
– ident: e_1_2_1_5_1
  doi: 10.1145/512950.512973
– ident: e_1_2_1_26_1
– ident: e_1_2_1_20_1
– ident: e_1_2_1_13_1
  doi: 10.1007/978-3-642-14107-2_7
– volume-title: Companion to the 21st ACM SIGPLAN Symposium on Object-Oriented Programming Systems, Languages, and Applications (OOPSLA ’06)
  ident: e_1_2_1_43_1
– ident: e_1_2_1_14_1
  doi: 10.1007/BFb0039592
– volume-title: Introduction to Static Analysis: An Abstract Interpretation Perspective
  ident: e_1_2_1_41_1
– ident: e_1_2_1_51_1
  doi: 10.1145/3397495
– ident: e_1_2_1_37_1
  doi: 10.1145/2384577.2384579
– ident: e_1_2_1_2_1
  doi: 10.1145/2784731.2784741
– ident: e_1_2_1_34_1
  doi: 10.1145/2983990.2984010
– ident: e_1_2_1_42_1
  doi: 10.1145/3624723
– volume-title: Elm in Action
  ident: e_1_2_1_10_1
– ident: e_1_2_1_12_1
  doi: 10.1145/3158138
– ident: e_1_2_1_16_1
  doi: 10.5281/zenodo.16916356
– ident: e_1_2_1_8_1
– ident: e_1_2_1_48_1
– ident: e_1_2_1_4_1
  doi: 10.1007/978-3-540-74792-5_12
– ident: e_1_2_1_18_1
  doi: 10.4230/LIPIcs.ECOOP.2020.12
– ident: e_1_2_1_19_1
  doi: 10.1007/978-3-540-89330-1_22
– ident: e_1_2_1_31_1
  doi: 10.1145/1640089.1640091
– ident: e_1_2_1_33_1
  doi: 10.1145/3192366.3192407
– ident: e_1_2_1_40_1
  doi: 10.1145/3064899.3064901
– ident: e_1_2_1_36_1
  doi: 10.1145/3324884.3416632
– ident: e_1_2_1_46_1
– ident: e_1_2_1_38_1
– ident: e_1_2_1_9_1
  doi: 10.1145/258948.258973
– ident: e_1_2_1_24_1
– ident: e_1_2_1_11_1
  doi: 10.4230/LIPIcs.ECOOP.2020.14
– ident: e_1_2_1_23_1
– ident: e_1_2_1_6_1
  doi: 10.1145/3632865
– ident: e_1_2_1_3_1
  doi: 10.1145/2676726.2677004
– ident: e_1_2_1_29_1
– ident: e_1_2_1_45_1
  doi: 10.1145/2980991
– ident: e_1_2_1_17_1
  doi: 10.1145/3133910
– ident: e_1_2_1_15_1
– ident: e_1_2_1_49_1
  doi: 10.1109/sp46215.2023.10179465
– ident: e_1_2_1_25_1
– ident: e_1_2_1_22_1
– ident: e_1_2_1_44_1
– ident: e_1_2_1_47_1
– ident: e_1_2_1_30_1
– ident: e_1_2_1_1_1
  doi: 10.1145/2220365.2220369
– ident: e_1_2_1_28_1
SSID ssj0001934839
Score 2.305787
Snippet React has become the most widely used web front-end framework, enabling the creation of user interfaces in a declarative and compositional manner. Hooks are a...
SourceID crossref
acm
SourceType Index Database
Publisher
StartPage 471
SubjectTerms Formal language definitions
Functional languages
Graphical user interface languages
Human-centered computing
Interpreters
Operational semantics
Software and its engineering
Theory of computation
Visualization systems and tools
SubjectTermsDisplay Human-centered computing -- Visualization systems and tools
Software and its engineering -- Formal language definitions
Software and its engineering -- Functional languages
Software and its engineering -- Graphical user interface languages
Software and its engineering -- Interpreters
Theory of computation -- Operational semantics
Title React-tRace: A Semantics for Understanding React Hooks: An Operational Semantics and a Visualizer for Clarifying React Hooks
URI https://dl.acm.org/doi/10.1145/3763067
Volume 9
hasFullText 1
inHoldings 1
isFullTextHit
isPrint
journalDatabaseRights – providerCode: PRVHPJ
  databaseName: ROAD: Directory of Open Access Scholarly Resources
  customDbUrl:
  eissn: 2475-1421
  dateEnd: 99991231
  omitProxy: false
  ssIdentifier: ssj0001934839
  issn: 2475-1421
  databaseCode: M~E
  dateStart: 20170101
  isFulltext: true
  titleUrlDefault: https://road.issn.org
  providerName: ISSN International Centre
link http://cvtisr.summon.serialssolutions.com/2.0.0/link/0/eLvHCXMwtV1LbxMxELZC4cCFQgFRCsgHbtXCPryxzW1VgXpom6gvlVNl785CBNlESfpQVfUX9UcytvfhtEjAgctq4_WMIs-XmdnJPAh5zwsVKrRTgSogDVgCZSDKNA_6aCyEEjznYFvm7_C9PXFyIoe93m1TC3P-k1eVuLyU0_8qalxDYZvS2X8Qd8sUF_AehY5XFDte_0rw-6jkFsFi34THbdn5AYzx-Ew3ZpNSeLRUzWI3b26jpz2vQ4SDKcyaAGFHaVu6bh6P5qYG8wpmlpXJ7Rm5OimPj-_uDlvzaDNGsq1d8-dEnRM2NoRNvLR17ZvMoC65J_vu6kcmk-rbRZc18NXlIVwggx9wVvnhi9i2PQ1lp-VixnGNuTLpD_CbtVpNSw-Ng8HwYCeLPcXLeOTZcOYmW983D8x00jA6NXRDQJYbcN8xjG26oiveTk9rwgfkYcxTaRIId2-8iJ5MmLCj69rv76q0De3HmtY4QfnYc4I8b-bwKXlSv4bQzMHnGelBtUZWmxEftNb4z8m1h6ZPNKMtIigCgC5hidqt1GIAt1bUQ5JHh5upoh2SLKMOST6XF-Toy-fDre2gHtgR4M8dDa4oQSqB75ypyFWRxAnThY6E1lporgqZALpLIo_LMGElepZRnyeRgiIsgIHEDy_JSjWp4BWhaQj9UCZKR4yzsJAy74ucxUzqkpWax-tkDc_xdOpasjSSWSe0Odf20R3hvf7zlg3yuEPqG7KymJ3BW_IoP1-M5rN3Vui_AGU4hw8
linkProvider ISSN International Centre
openUrl ctx_ver=Z39.88-2004&ctx_enc=info%3Aofi%2Fenc%3AUTF-8&rfr_id=info%3Asid%2Fsummon.serialssolutions.com&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=React-tRace%3A+A+Semantics+for+Understanding+React+Hooks%3A+An+Operational+Semantics+and+a+Visualizer+for+Clarifying+React+Hooks&rft.jtitle=Proceedings+of+ACM+on+programming+languages&rft.au=Lee%2C+Jay&rft.au=Ahn%2C+Joongwon&rft.au=Yi%2C+Kwangkeun&rft.date=2025-10-09&rft.issn=2475-1421&rft.eissn=2475-1421&rft.volume=9&rft.issue=OOPSLA2&rft.spage=471&rft.epage=498&rft_id=info:doi/10.1145%2F3763067&rft.externalDBID=n%2Fa&rft.externalDocID=10_1145_3763067
thumbnail_l http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/lc.gif&issn=2475-1421&client=summon
thumbnail_m http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/mc.gif&issn=2475-1421&client=summon
thumbnail_s http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/sc.gif&issn=2475-1421&client=summon