Dampak Pemilihan Pustaka State Management Terhadap Efisiensi dan Kompleksitas Kode pada Aplikasi React: Studi Kasus Redux, Zustand, dan Signals

Naila Nurul Faizah, Egin Sefiano Widodo, Najwa Chava Safiera, Muhammad Amrullah Widyapratama, Delia Indrawati, Saifudin Yahya

Abstract

Abstrak :

Pengembangan aplikasi web modern menggunakan React sering menghadapi tantangan dalam mengelola state aplikasi secara efisien, terutama seiring dengan meningkatnya kompleksitas. Pemilihan pustaka state management menjadi keputusan arsitektural yang penting karena berdampak langsung pada performa aplikasi dan pengalaman pengguna. Penelitian ini bertujuan untuk menganalisis dan membandingkan secara mendalam dampak performa dari tiga pustaka state management populer dalam ekosistem React, yaitu Redux, Zustand, dan Signals. Metode penelitian yang digunakan adalah eksperimen kuantitatif dengan membangun dua skenario aplikasi: aplikasi sederhana untuk mengukur overhead dasar dan aplikasi CRUD kompleks untuk mensimulasikan beban kerja dunia nyata. Evaluasi dilakukan berdasarkan empat metrik teknis, yaitu penggunaan memori (MB), penggunaan CPU (%), waktu rendering (ms), dan ukuran bundle (KB). Hasil pengujian menunjukkan bahwa Signals secara konsisten memberikan performa terbaik di semua metrik. Pada skenario CRUD, Signals mencatat penggunaan memori terendah (45,8 MB) dan waktu rendering tercepat (28,9 ms). Zustand menempati posisi kedua sebagai pustaka modern yang ringan dan efisien, sedangkan Redux menunjukkan beban performa tertinggi (65,2 MB memori; 45,3 ms rendering). Kesimpulannya, pemilihan pustaka state management memiliki dampak langsung dan terukur terhadap performa aplikasi React. Pustaka modern seperti Signals dan Zustand menawarkan alternatif yang lebih efisien dibandingkan Redux, terutama untuk aplikasi yang menekankan kecepatan, skalabilitas, dan efisiensi sumber daya. 

================================================

Abstract : 

The development of modern web applications using React often faces challenges in efficiently managing application state, especially as complexity increases. Choosing the right state management library is an essential architectural decision because it directly affects application performance and user experience. This study aims to analyze and compare the performance impacts of three popular state management libraries in the React ecosystem: Redux, Zustand, and Signals. The research employs a quantitative experimental method by developing two application scenarios: a simple app to measure baseline overhead and a complex CRUD app to simulate real-world workloads. Evaluation was conducted based on four technical metrics: memory usage (MB), CPU usage (%), rendering time (ms), and bundle size (KB). The results show that Signals consistently delivers the best performance across all metrics. In the CRUD scenario, Signals recorded the lowest memory usage (45.8 MB) and fastest rendering time (28.9 ms). Zustand ranked second as a lightweight and efficient modern library, while Redux demonstrated the highest performance overhead (65.2 MB memory; 45.3 ms rendering). In conclusion, the choice of state management library has a direct and measurable impact on React application performance. Modern libraries such as Signals and Zustand provide more efficient alternatives to Redux, especially for applications that emphasize speed, scalability, and resource efficiency.

Keywords

react; manajemen state; performa; redux; zustand; signals

Full Text:

PDF

References

[1] V. Veeri, “State Management in React: Redux vs Zustand - A Comprehensive Guide,” International Journal of Scientific Research in Computer Science, Engineering and Information Technology, 2024. doi: 10.32628/CSEIT24106172.

[2] G. N. C. Aluri and H. K. Mupparapu, “Redux State Management Patterns for Large-Scale React.js Enterprise Applications: An Empirical Analysis,” Int. J. Emerg. Res. Eng. Technol., 2024, doi: 10.63282/3050-922X.IJERET-V5I2P120.

[3] A. S. Bachelor dan B. I. Technology, “Comparing State Management Between Redux And Zustand In React,” 2023. [Daring]. Tersedia pada: https://www.theseus.fi/handle/10024/816299

[4] N. S., S. C., S., dan D. S., “Performance and Developer Experience Comparison of Redux, Zustand, and Context API in React Applications,” Int. J. Sci. Technol., vol. 16, no. 2, hal. 1–9, 2025, doi: 10.71097/ijsat.v16.i2.5026.

[5] R. Yeh, “Zustand vs Redux: Making Sense of React State Management,” 7 November 2025. [Daring]. Tersedia pada: https://www.wisp.blog/blog/zustand-vs-redux-making-sense-of-React-state-management

[6] Poimandres, “Introduction,” 7 November 2025. [Daring]. Tersedia pada: https://zustand.docs.pmnd.rs/getting-started/introduction

[7] M. Hagemeister dan J. Miller, “Introducing Signals,” 7 November 2025. [Daring]. Tersedia pada: https://pReactjs.com/blog/introducing-signals/

[8] E. Bainomugisha, A. Lombide Carreton, T. Van Cutsem, S. Mostinckx, dan W. De Meuter, “A Survey on Reactive Programming,” ACM Comput. Surv., vol. 45, 2012, doi: 10.1145/0000000.0000000.

[9] S. Ulili, “Zustand vs. Redux Toolkit vs. Jotai.” [Daring]. Tersedia pada: https://betterstack.com/community/guides/scaling-nodejs/zustand-vs-redux-toolkit-vs-jotai/

[10] S. Shubham, “Signals and Fine-grained Reactivity: The Next Wave in State Management,” 7 November 2025. [Daring]. Tersedia pada: https://medium.com/@shubhamsinghsengar8/signals-and-fine-grained-Reactivity-the-next-wave-in-state-management-3c32e3762fa6

[11] PReact, “Signals,” 7 November 2025. [Daring]. Tersedia pada: https://pReactjs.com/guide/v10/signals/

[12] M. Weststrate, “MobX: Simple, Scalable State Management,” 7 November 2025. [Daring]. Tersedia pada: https://mobx.js.org/README.html

DOI: https://doi.org/10.20961/ijai.v10i2.111556

Refbacks

  • There are currently no refbacks.