Performance Analysis of Hooks Functionality in

React and Vue Frameworks

Jason Sianandar Ida Bagus Kerthyayana Manuaba
Computer Science Department, Computer Science Department,
Faculty of Computing and Media Faculty of Computing and Media
Bina Nusantara University Bina Nusantara University
2022 International Conference on Information Management and Technology (ICIMTech) | 978-1-6654-5090-4/22/$31.00 ©2022 IEEE | DOI: 10.1109/ICIMTECH55957.2022.9915183

Jakarta, Indonesia 11480 Jakarta, Indonesia 11480

[email protected] [email protected]

Abstract—Front end plays a key role in web applications performance of web applications, and the reusable
since it ensures the users have a great experience when components that React offer [3].
interacting with the interface. Hence, optimizing front-end
performance is important in building web applications. Vue.js or also known as Vue is a progressive
ReactJS and Vue JS are popular front-end frameworks that framework used also for UI development. The core library
commonly be used in developing web-based applications and of Vue is focused on view layer only, therefore making it
also introduced hooks functionality. There have been many easier to integrate with other libraries or projects. Vue.js is
debates regarding which library or framework is better also a popular choice for the development of Single-Page
between these two. Therefore, this study discusses a Applications (SPA) when combined with modern tooling
comparative study relating to the performance of ReactJS and and other supporting libraries. Vue was first created by
Vue JS frameworks, specifically focusing on hooks Evan You, whom is a former Google engineer that worked
functionality. For the study, two sample web app prototypes on Angular.js and Meteor framework [4]. Vue is also
was developed using both frameworks. The performance test popular amongst developers, especially junior front-end
of these two frameworks is utilizing an extension for Google developers. This is due to the simplicity of the framework
Chrome for, using the frameworks’ respective hooks and where developers can code with little effort yet also
standard CRD (Create, Read, Delete) - API (Application achieve satisfactory results and great components. Vue.js
Programming Interface). The result of this research shows
can also be integrated with other frameworks such as React
that React’s hooks functionality performed slightly better for
[5].
API requests and managing states on the web application.
While React.js and Vue.js have their own advantages
Keywords—react, vue, hooks, front-End, performance and disadvantages towards each other, they have a
similarity in which they have their own “hooks” in their
I. INTRODUCTION framework features. According to the official
Web development has evolved rapidly and there are documentation of React.js [10], Hooks are defined as a
several factors that support web development to the best feature that allows developer to use state and other React
outcome. One of those factors is the existence of front-end features without the use of a class. It allows developer use
frameworks. Front-end frameworks or JavaScript and modify React state and lifecycle features from function
frameworks are considered as packages that consist of pre- components.
written, homogenous codes in folder and files that assist An example of a React hook would be useState hook
developers in developing user accessibility, and ease the where it enables the developer to add and modify local
development of interactive, user-centric websites [1]. state inside a function component. It is almost similar to
Nowadays for front-end development, developers tend this.setState() in a class component. Vue.js also has their
to choose a specific front-end framework or library that own hooks where they are defined as Lifecycle hooks.
can ease their job by reducing the time to code, easier code According to the official documentation of Vue.js [11],
maintenance, better performance, and productivity and Lifecycle hooks allows developers to add code at specific
many more [2]. ReactJS and Vue.js are two of the many stages such as updating the DOM, mounting the instance
popular front-end frameworks that developers use for of the DOM and many more. An example of a Vue hook
front-end development [9]. These two frameworks have would be the mounted hook where the developer can use it
also introduced hooks in their functionality. to run code after the Vue component has finished the initial
rendering of the project.
React.js or also known as React, is a JavaScript-based
User Interface (UI) development library. React was first This study shows a comparative study relating to the
developed by Facebook in 2013 and currently run by them performance of ReactJS and Vue JS frameworks,
and an open-source developer community. React itself is specifically focusing on hooks functionality. Both of the
more of a library instead of a framework making it very above frameworks was chosen as the subjects of
flexible. React is arguably popular amongst developers. comparison since those two of those frameworks are two
This is due to React being easy to use for dynamic of the most popular JavaScript frameworks and only those
applications since it requires less coding, and use more two and few others have hooks accessible. Hence, there are
functionality, also the feature of virtual DOM (Document two web applications prototypes, which can create, read,
Object Model) manipulation which increases the and delete data developed using React.js and Vue.js. The

978-1-6654-5090-4/22/$31.00 ©2022 IEEE 11 - 12 August 2022

2022 International Conference on Information Management and Technology (ICIMTech)
139
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:52:57 UTC from IEEE Xplore. Restrictions apply.
prototypes are implementing hooks for managing states III. METHODOLOGY
and fetching API according to their respective frameworks.
There are two objectives of this study, they are (1) how
much different the hook functionalities performance on
both frameworks tested and (2) how well could the hook’s
function perform in fetching API?

II. PREVIOUS STUDIES ON REACT AND VUE FRAMEWORKS

Several related studies have provided various results
regarding the performance of React and Vue frameworks.
For example, Levlin [6] conducted a study to compare the
DOM (Document Object Model) performance or to
benchmark the front-end JavaScript frameworks
specifically React, Angular, Vue, and Svelte.
In his research, he was creating a test application using
the four different frameworks to test DOM performance
for insertion, editing, and deletion, including the
compilation speed of the applications and size of the
frameworks used. He successfully showed that the React
performed better compared to the rest of the tested
frameworks.
However, another study conducted by Sireteanu and
Homocianu [7] showed different results. Their study
showed an analysis for choosing front-end frameworks of
SPA (Single Page Application) and MPA (Multi Page
Application) web applications between React.js, Vue.js Fig. 1. Diagram of the Development Phases
and Angular.
As seen in the figure above, the proposed methodology
For comparison of the frameworks, they conducted two covers three phases. The first phase is the development of
methodologies by first comparing StackOverflow and
Google Search trends for ranking the frameworks, and
secondly, comparing the performance of DOM a simple web application’s prototype using React.js
manipulation specifically in CRUD of data using a single that can do CRD for data with the help of API. The
application prototype developed using all frameworks. The development of the web app was strictly limited to front-
researchers concluded that Angular is the most suitable end development while also implementing the useEffect
framework for single page applications, while Vue.js and useState hooks. After completing the first phase, the
comes in second, and React.js comes in last. This is due to second phase is the development of the same web app but
Angular’s popularity and stability which contradicts the using Vue.js while also implementing its own hook which
previous researcher’s conclusion. is the Composition API. The third phase is the comparison
and testing of the performance of the hooks that was used
by both frameworks.
A. React.js
For development of the web prototype using React.js,
the researcher applied functional components for the pages
in the application. After finishing development for the
components, the useEffect and useState hooks were
implemented to be able create, read, and delete data from
the web application.

978-1-6654-5090-4/22/$31.00 ©2022 IEEE 11 - 12 August 2022

2022 International Conference on Information Management and Technology (ICIMTech)
140
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:52:57 UTC from IEEE Xplore. Restrictions apply.
 Fig. 3. Vue Lifecycle Hooks diagram in a Vue App [13].

For the implementation of the Composition API hook,

the researcher used the setup method in the beginning of
the component where it will render the component while
also fetching the GET request. As seen in Fig. 3, the setup
method was used when initializing the lifecycle and after
that the researcher used the onMount method in the
component to detect and re-render the component when
there are changes in the data for the fetch request. The
method falls into the Mounted category in Vue lifecycle
hooks.

C. Comparison and Testing Hooks’ performance

Fig. 2. React Hook Flow Diagram in a React App [12].
For testing the performance of the hooks from both
For the implementation of useState hook, the frameworks, the researcher focused on two metrics which
researcher used the hook in the beginning of the component are:
where the app will mount and render and re-rendered the
(1) Render/re-render duration measured in
component every time there is data change when fetching
milliseconds (ms)
the GET request or during the Mount and Update lifecycle
(2) Time taken to successfully fetch the API request
as seen in Fig. 2 as the app will run lazy initializers when
measured in milliseconds (ms).
the useState hook is called. For useEffect hook, the
researcher used it for fetching the request that was used in With this metrics, the tests was conducted 3 times for
the component which is also included in the Update when the researcher tested creating data, reading data, and
lifecycle since useEffect will directly run 3 lifecycle events deleting data to minimize errors in data collection.
inside the component which are componentDidMount,
componentDidMount, and componentWillUnmount which For the API itself, it will use MySQL as the database.
are all functions that are required in a standard lifecycle. The list of APIs (Application Programming Interface) used
can be seen in Table 1.

TABLE I. LIST OF API REQUEST THAT WAS USED DURING

B. Vue.js TESTING

For development of the web application prototype API Request Method Description
GET- Get all Freelancers This API method will get the data
using Vue.js, the researcher used standard Vue components of the freelancers. The structure
for the pages in the application. After finishing the for the table in the database will
development of components, the Composition API hooks have a name, position, skills, and
was implemented to do the same things as mentioned in the domicile.
React app. POST – Add Job Offer This API method will be able to
add job offers to the database.
The structure for the table in the
database will have the
freelancer_id that connects with
the Freelancers table, job name,
job description, and the price.
DEL – Delete Job Offer This API method will be able to
delete the job offers from the
database.

978-1-6654-5090-4/22/$31.00 ©2022 IEEE 11 - 12 August 2022

2022 International Conference on Information Management and Technology (ICIMTech)
141
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:52:57 UTC from IEEE Xplore. Restrictions apply.
 As seen in the flowchart in Fig. 4, after running both The Vue.js application used Vue Devtools for
the API and prototype locally, both apps will render their measuring the performance of the same target using the
components while also fetching the requests. For metrics of mount which is the duration needed to render the
components that are only fetching GET requests, after page with the API request as seen in Fig. 6 [8].
rendering the component, the researcher will directly use
the Google Chrome devtools to measure the time taken for
the fetch request and both frameworks’ respective devtools
to measure the time taken to render the component. The
methods are the same for components that use POST and
DEL requests. The difference is that the researcher input
the data or deleted the data first to measure the re-render
duration of the component and time taken for the API
request.

Fig. 6. Vue.js’s Composition API Hook performance according to Vue

Devtools

IV. RESULT AND DISCUSSION

A. Result

In this section, the results of the comparison and

scenarios for testing between hooks will be discussed
further.
From the data gathered from the bar graph in Fig. 7, it
is visible that React hooks were faster by an average of
3.7ms in rendering a component with GET request or re-
rendering components where a data change occurred in the
API request. We can also see that both frameworks require
slightly more time to render components that accepted a
POST request.

Fig. 4. Flowchart of testing scenario for the methodology

For analyzing the performance, the React.js

application used React Developer Tools extension for
Google Chrome specifically React Profiler for measuring
the performance or time taken for the hook that was used to
render the component fetching where the API request was
fetched as seen in Fig. 5.
Fig. 7. Bar graph for comparison between hooks performance in
rendering page with API request.

Fig. 8 shows the time taken for the hooks to fetch an

API request. It is observed that React hooks once again was
slightly faster than Vue hooks in fetching API requests.
Even so, the graph showed data based on standard API
query. Due to this, the comparison data might differ if the
API returned a long response time for the Front-End to
execute.

Fig. 5. React.js’s useState performance according to React Profiler

978-1-6654-5090-4/22/$31.00 ©2022 IEEE 11 - 12 August 2022

2022 International Conference on Information Management and Technology (ICIMTech)
142
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:52:57 UTC from IEEE Xplore. Restrictions apply.
 Although the research still has limitations due to it
being carried out in a simulation scenario instead of real-
world scenario where the data might even differ more.
Future works for this research or similar ones can
implement prototype applications that are hosted and using
a proper domain while also implementing fully functional
and hosted CRUD API for testing.
REFERENCES
[1]. J. Patel, “10 best front-end frameworks for web development in
2022,” Monocubed, 02-Mar-2022. [Online]. Available:
https://www.monocubed.com/blog/best-front-end-frameworks/.
[Accessed: 07-Mar-2022].
[2]. GKMIT, “The importance of selecting the right frontend
framework,” HackerNoon, 22-May-2021. [Online]. Available:
https://hackernoon.com/the-importance-of-selecting-the-right-
Fig. 8. Bar graph for comparison between hooks performance in fetching frontend-framework-4sk34ae. [Accessed: 17-Feb-2022].
API request [3]. Deshpande, “The best guide to know what is react [updated],”
Simplilearn.com, 28-Dec-2021. [Online]. Available:
B. Discussion https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-
reactjs. [Accessed: 17-Feb-2022].
Surmising the results in the section above, even though [4]. Vue, “# presentation of vue.js,” Presentation of Vue.js |
React hooks were slightly faster than Vue hooks, the Introduction to Vue.js. [Online]. Available:
https://worldline.github.io/vuejs-
difference was not that significant as they both can perform training/presentation/#development-team. [Accessed: 17-Feb-
well in numerous scenarios. The hooks themselves were 2022].
able to perform well in fetching API requests. They were [5]. Vasiutynska, “What are the pros and cons of using vue.js,” Medium,
able to fetch all requests under 250 ms as seen in Figure 8 21-Mar-2019. [Online]. Available:
which is under the maximum limit of acceptable which https://towardsdatascience.com/what-are-the-pros-and-cons-of-
using-vue-js-
Hamilton [14] states as around 0.1 to 1.0 second or 100ms 3689d00d87b0#:~:text=Developers%20can%20integrate%20Vue.
to 1000ms (about 1 second). &text=Due%20to%20the%20ease%20of,with%20many%20other
%20JavaScript%20applications. [Accessed: 17-Feb-2022].
Although the research was successfully conducted, [6]. M. Levlion, “DOM benchmark comparison of the front-end
there are some limitations to this study whereas the JavaScript frameworks React, Angular, Vue, and Svelte”, Master’s
researcher could not fully create a fully functional web Thesis in Computer Science, pp. 54 - 70, 2020.
application therefore limiting the apps to prototypes and the [7]. N. Alexandru Sireteanu and D. Homocianu, “Front-end
Frameworks for Development of SPA and MPA Web
testing are done locally using localhost instead of dedicated Applications”, Department of Accounting, Business Information
hosting or server so comparison data might not be universal Systems, and Statistics, Faculty of Economics and Business
since it depends on the PC specifications. The result of this Administration, Alexandru Ioan Cuza University, Carol I Blvd.,
no.22, pp. 4 - 7, 2021.
test also does not fully represent the undebatable
[8]. [8] K. Maniatis, Vue Performance Devtool. [Online]. Available:
conclusion for the comparison of React and Vue’s hooks https://vuejsfeed.com/blog/vue-performance-devtool. [Accessed:
performance. 07-Mar-2022].
[9]. Stack Overflow, “Stack overflow developer survey 2021,” Stack
V. CONCLUSION Overflow. [Online]. Available:
To surmise this paper, two prototype web applications https://insights.stackoverflow.com/survey/2021#most-popular-
technologies-webframe. [Accessed: 11-Mar-2022].
using both React and Vue respectively were successfully
[10]. React, “Introducing hooks,” React. [Online]. Available:
developed while also implementing their respective hooks. https://reactjs.org/docs/hooks-intro.html. [Accessed: 11-Mar-
For React, the useState hook was used to render the 2022].
component and manage its state and the useEffect hook was [11]. Vue, “Lifecycle hooks: Vue.js,” Lifecycle Hooks | Vue.js. [Online].
used to fetch API requests. Available: https://vuejs.org/guide/essentials/lifecycle.html.
[Accessed: 11-Mar-2022].
For Vue, the Composition API hook was used to both [12]. vinodchauhan7, “React-hooks - usestate, useeffect, useref,
render the component, manage its state, and fetch API usememo,” DEV Community, 16-Aug-2019. [Online]. Available:
https://dev.to/vinodchauhan7/react-hooks-usestate-useeffect-
requests using its setup() and onMounted() method. Results useref-usememo-2dj. [Accessed: 25-Mar-2022].
show that React was visibly slightly faster than Vue in [13]. M. Maribojoc, “A complete guide to Vue Lifecycle Hooks - with
terms of hooks performance but overall, both frameworks Vue 3 updates,” LearnVue. [Online]. Available:
are competitive in terms of their hooks’ performance. https://learnvue.co/2020/12/how-to-use-lifecycle-hooks-in-
vue3/#what-are-the-vue-lifecycle-hooks. [Accessed: 25-Mar-
Answering the research questions, both React hooks 2022].
and Vue hooks doesn’t have that much difference in their [14]. T. Hamilton, “What is response time testing? how to measure for
API, Tools,” Guru99, 19-Feb-2022. [Online]. Available:
hooks functionality since both have similar performance https://www.guru99.com/response-time-testing.html. [Accessed:
and they were able to fetch all API requests under 250 ms 27-Mar-2022].
that is under the average of an API request speed which is
1000 ms.

978-1-6654-5090-4/22/$31.00 ©2022 IEEE 11 - 12 August 2022

2022 International Conference on Information Management and Technology (ICIMTech)
143
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:52:57 UTC from IEEE Xplore. Restrictions apply.