Mengenal State Management dan Kegunaanya untuk Frontend Developent

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

Didalam frontend development pada saat ini, kebanyakan framework yang digunakan adalah berbasis component seperti React, Vue, Agular, dan lain - lain.

Component yang dibuat biasanya dibuat untuk digunakan kembali didalam component lain atau sering disebut Reusable Component, sehingga tidak perlu membuat component yang sama secara berulang ulang dan akan menghemat waktu dalam pengembangan selain itu kode program menjadi lebih rapi dan bersih.

Dalam satu halaman web atau aplikasi biasanya terdiri dari banyak component yang saling terkait satu sama lain

Pada gambar diatas terlihat didalam satu halaman website memiliki banyak component dan tentunya masing - masing component saling terhubung satu sama lain.

Bagimana caranya antar component saling terhubung dan berbagi data atau informasi?

Biasanya didalam framework seperti React atau Vue sudah menyediakan mekanisme yang digunakan untuk mengirim atau menerima informasi antar component yang sering disebut Props.

Pada gambar diatas adalah bagaimana cara kerja props, dimana kita bisa berbagi data kepada setiap component yang dituju.

Apakah props menyelesaikan masalah? jawabanya adalah Ya. namun bagaimana jika terdapat banyak component? puluhan, bahkan lebih.

Jika terdapat banyak component saya rasa menggunakan props akan sangat rumit dan membutuhkan effort yang sangat banyak karena kita akan berinteraksi secara langsung dengan component yang dituju.

Solusinya dalah dengan menggunakan State Management

Dengan bantuan State Management kita akan lebih mudah dalam berbagi data atau informasi ke masing - masing component yang terkait tanpa harus berinterak si terhadap component secara langsung.

Contoh state management yang sering dipakai

• Redux
• Recoil
• Pinia
• Vuex
• Ngxs
• MobX