Gatsby Starter Blog RSS Feed

Proficiency with state management patterns - React

Sun, 23 Feb 2025 22:18:22 GMT

Proficiency with state management patterns refers to a person's level of expertise or understanding in applying various state management patterns in application development.

Dalam konteks frontend development (terutama di React), ini mencakup:

Local component state

* `useState`
* `useReducer`

Global state

* Context API
* Redux
* Zustand
* Recoil
* Jotai

Server state

* React Query
* SWR

Pola umum dalam state management

Flux/Redux Pattern
- Menggunakan reducer, actions, dan store global
Atomic State Pattern
- Seperti yang digunakan di Recoil/Jotai
Selector Pattern
- Meminimalkan re-render dengan memisahkan state yang relevan
Modular/Slice Pattern
- Memisahkan state ke dalam slice untuk aplikasi skala besar

Kemampuan

* Mampu memilih pola yang tepat sesuai dengan kompleksitas aplikasi.
* Mampu mengoptimalkan state management untuk meningkatkan performa aplikasi.

In this case, we discuss Zustand state management:

Zustand

Zustand is a lightweight state management library for React that offers a simpler and more minimalist approach compared to Redux. Here are some key patterns in state management using Zustand:

Basic Global State Pola ini cocok untuk aplikasi kecil atau fitur yang hanya memerlukan state global sederhana.

    import { create } from 'zustand';

    type Store = {
        count: number;
        increment: () => void;
    };

    const useCounterStore = create<Store>((set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
    }));

    export default useCounterStore;

📌 Pola ini sederhana dan cukup untuk state management kecil.

🔹 2. Selector Pattern (Avoid Unnecessary Re-renders)

Untuk menghindari re-render berlebihan, gunakan selector agar hanya membaca bagian state yang dibutuhkan.

import { create } from 'zustand';

    const useCounterStore = create((set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
    }));

    const CounterComponent = () => {
        const count = useCounterStore((state) => state.count); // Hanya re-render jika 'count' berubah

        return <div>Count: {count}</div>;
    };

📌 Menggunakan selector akan meningkatkan performa dengan menghindari re-render tidak perlu.

🔹 3. Middleware Pattern (Logging & Persistence)

Zustand mendukung middleware untuk logging, persistence, atau devtools.

    import { create } from 'zustand';
    import { devtools, persist } from 'zustand/middleware';

    const useUserStore = create(
    devtools(
        persist(
        (set) => ({
            user: null,
            login: (user) => set({ user }),
            logout: () => set({ user: null }),
        }),
        { name: 'user-storage' } // Persistent storage key
        )
    )
    );

📌 Pola ini ideal untuk debugging (devtools) dan menyimpan state ke localStorage (persist).

🔹 4. Action Pattern (Encapsulation of Logic)

    Untuk meningkatkan keterbacaan, logika dapat dipisahkan dalam fungsi actions.

    import { create } from 'zustand';

    const useTodoStore = create((set) => ({
    todos: [],
    addTodo: (text) =>
        set((state) => ({ todos: [...state.todos, { text, completed: false }] })),
    toggleTodo: (index) =>
        set((state) => ({
        todos: state.todos.map((todo, i) =>
            i === index ? { ...todo, completed: !todo.completed } : todo
        ),
        })),
    }));

📌 Memisahkan actions mempermudah pengelolaan logika state.

🔹 5. Slice Pattern (Modular State Management)

Untuk aplikasi besar, pecah state menjadi "slice" modular.

    import { create } from 'zustand';

    // User slice
    const createUserSlice = (set) => ({
    user: null,
    setUser: (user) => set({ user }),
    });

    // Cart slice
    const createCartSlice = (set) => ({
    cart: [],
    addToCart: (item) => set((state) => ({ cart: [...state.cart, item] })),
    });

    // Combine slices
    const useStore = create((set) => ({
    ...createUserSlice(set),
    ...createCartSlice(set),
    }));

    export default useStore;

📌 Pendekatan ini bagus untuk memisahkan domain state menjadi modular dan scalable.

Angular SSR - Angular Universal Packages

Thu, 23 Nov 2023 22:14:23 GMT

Pengertian dari teknik SSR, Server Side Rendering atau SSR merupakan salah satu jenis metode rendering, dimana proses kompilasi / rendering dilakukan pada sisi server.

Berbeda dengan SSR, CSR melakukan rendering saat client atau web browser menerima data dari server, hal ini biasanya dilakukan oleh Javascript saat menampilkan data ke halaman web.

Server Side Rendering :

Kelebihan

Memiliki kelebihan pada optimasi index mesin pencari, mesin pencari lebih mudah menemukan keyword pada konten yang telah dirender.

Kekurangan

Mengandalkan perfomance/resource server dalam melakukan rendering, sehingga membutuhkan resource yang terus meningkat seiring peningkatan jumlah visitor.

Client Side Rendering :

Kelebihan

Menggunakan mode CSR akan mengurangi beban server, hal ini dikarenakan proses rendering dilakukan oleh web browser.

Kekurangan

Fungsional / perfomance website sangat bergantung pada kemampuan web browser.

Mengapa menggunakan rendering disisi server?

Ada 3 alasan kenapa kita melakukan hal ini dengan bantuan dari angular Universal version pada aplikasi kita.

Memfasilitasi web crawlers terkait optimasi SEO search engine optimization (SEO).
improvisasi dari segi performa di mobile / device yang memiliki device rendah.
Menampilkan halaman dengan cepat dengan metrik Page Speed Insight salah satunya adalah **first-contentful paint (FCP).**

Penerapan Metode SSR pada Sahabat Bisnis Inovasi ( SABI ).

Pada repo landing dengan metode CSR kita install package dari angular universal https://angular.io/guide/universal

Enable server-side rendering

Untuk membuat aplikasi baru dengan SSR, jalankan :

  ng new --ssr

Untuk menambahkan SSR ke proyek yang sudah ada, gunakan perintah Angular CLI ng add.

  ng add @angular/ssr

Perintah ini membuat dan memperbarui kode aplikasi untuk mengaktifkan SSR dan menambahkan file tambahan ke struktur proyek.

 my-app
 |-- server.ts                       # application server
 └── src
     |-- app
     |   └── app.config.server.ts    # server application configuration
     └── main.server.ts              # main server application bootstrapping

Check SSR sudah berhasil terimplementasi di sabiweb-landing, Universal in action type in your terminal ng add @nguniversal/express-engine.

Hasil Angular universal express engine.

Cara menjalankan aplikasi sabiweb-landing-ssr contoh ****perintah dasar tanpa environment yang berbeda ditiap server.

"dev:ssr": "ng run sabi-landing:serve-ssr",
"serve:ssr": "node dist/sabi-landing/server/main.js",
"build:ssr": "ng build && ng run sabi-landing:server",
"prerender": "ng run sabi-landing:prerender"

Pengertian :
"dev:ssr" -> perintah menjalankan development SSR mode di local env.
"serve:ssr" -> perintah menjalankan mode SSR hasil dari build:ssr
"build:ssr" -> perintah menjalankan mode bundle / build dengan SSR build:ssr:{env}
"prerender" -> perintah untuk prarendering adalah proses di mana halaman dinamis diproses pada waktu pembuatan menghasilkan HTML statis.

Pertimbangan Penting saat Menggunakan Angular Universal

Meskipun tujuan dari proyek Universal adalah kemampuan untuk merender aplikasi Angular dengan mulus di server, ada beberapa inkonsistensi yang harus di pertimbangkan.

Pertama, ada perbedaan yang jelas antara lingkungan server dan browser. Saat merender di server, aplikasi Anda dalam status singkat atau "snapshot". Aplikasi sepenuhnya dirender sekali, dengan HTML yang dihasilkan dikembalikan, dan status aplikasi yang tersisa dimusnahkan hingga render berikutnya.
Lingkungan server secara inheren ( berhubungan erat ) tidak memiliki kemampuan yang sama dengan browser (memiliki beberapa yang juga tidak dimiliki browser). Misalnya, server tidak memiliki konsep cookie. Anda dapat melakukan polyfill ini dan fungsionalitas lainnya, tetapi tidak ada solusi sempurna untuk ini.
Di bagian selanjutnya, kita akan membahas potensi mitigasi ( upaya untuk mengurangi resiko ), untuk mengurangi cakupan kesalahan saat merender di server.

Harap perhatikan juga tujuan SSR : meningkatkan waktu rendering awal untuk aplikasi.

Ini berarti bahwa segala sesuatu yang berpotensi mengurangi kecepatan aplikasi dalam rendering awal ini harus dihindari atau dicegah. Sekali lagi, kita akan meninjau cara melakukannya di bagian selanjutnya.

Masalah yang dihadapi ketika enable SSR mode :

“**window”** contoh jika kita menggunakan window.location.href =’target_link’
“**document**” contoh jika kita ingin memanipulasi DOM element misal document.getElementById(’your_class_name’).
“navigator” contoh jika kita ingin enable service worker ( webworker ) untuk kerpeluan PWA.
“********************strategy guard********************”
Initial Rendering menjadi lambat saat ini masih di cari solusinya.

Solusi untuk mengatasi error tersebut :

Check setiap fungsi fungsi native js seperti window, document, navigator, cookies ketika ingin di inisialisasi jika ada kebutuhan di proses development ada beberapa tahapan. contoh lengkap disini : https://github.com/angular/universal/blob/main/docs/gotchas.md

API router strategy : initialNavigation https://angular.io/api/router/InitialNavigation

Catatan Kaki :

My Second Post!

Wed, 06 May 2015 23:46:37 GMT

Wow! I love blogging so much already.

Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."? (Wikipedia Link)

Yeah, I didn't either.

Hello World

Fri, 01 May 2015 22:12:03 GMT

This is my first post on my new fake blog! How exciting!

I'm sure I'll write a lot more interesting things in the future.

Oh, and here's a great quote from this Wikipedia on salted duck eggs.

A salted duck egg is a Chinese preserved food product made by soaking duck eggs in brine, or packing each egg in damp, salted charcoal. In Asian supermarkets, these eggs are sometimes sold covered in a thick layer of salted charcoal paste. The eggs may also be sold with the salted paste removed, wrapped in plastic, and vacuum packed. From the salt curing process, the salted duck eggs have a briny aroma, a gelatin-like egg white and a firm-textured, round yolk that is bright orange-red in color.

You can also write code blocks here!

const saltyDuckEgg = "chinese preserved food product"

Number	Title	Year
1	Harry Potter and the Philosopher’s Stone	2001
2	Harry Potter and the Chamber of Secrets	2002
3	Harry Potter and the Prisoner of Azkaban	2004

View raw (TEST.md)

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header.

This is the first list item.

This is the second list item.

Here's some example code:
Markdown.generate();

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

Red
Green
Blue

Red
Green
Blue

Red
Green
Blue

- Red
- Green
- Blue

* Red
* Green
* Blue

- Red
- Green
- Blue

code goes here in this line
bold goes here

- `code goes` here in this line
- **bold** goes here

Buy flour and salt
Mix together with water
Bake

1. Buy flour and salt
1. Mix together with water
1. Bake

code goes here in this line
bold goes here

1. `code goes` here in this line
1. **bold** goes here

Paragraph:

Code

Paragraph:

    Code

* * *

***

*****

- - -

---------------------------------------

This is an example link.

This link has no title attr.

This is an example reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

![Alt Text](https://via.placeholder.com/200x50 "Image Title")