Τι είναι selectors και memoization στη διαχείριση κατάστασης;

Question

IT Interview Practice · Accepted Answer

Ένας **selector** είναι μια συνάρτηση που **διαβάζει (παράγει) ένα συγκεκριμένο τμήμα δεδομένων από την κατάσταση**. **Memoization** αποθηκεύει στη cache το αποτέλεσμα ενός selector ώστε να επανυπολογιστεί μόνο όταν αλλάξουν τα εισόδιά του — σημαντικό για την απόδοση όταν οι selectors κάνουν δαπανηρή δουλειά ή για να αποφευχθούν περιττές re-renders.

## Βασικοί selectors — ενθυλάκωση πρόσβασης κατάστασης

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Oι selectors συγκεντρώνουν τη γνώση της δομής της κατάστασης — τα στοιχεία ζητούν `selectCartTotal(state)` χωρίς να ξέρουν πού/πώς αποθηκεύεται, επομένως εάν αλλάξει το σχήμα κατάστασης, ενημερώνετε έναν selector, όχι κάθε στοιχείο.

## Το πρόβλημα: οι παράγωγοι selectors επανυπολογίζονται σε κάθε κλήση

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

Ένας selector που δημιουργεί ένα νέο array/object επιστρέφει μια **νέα αναφορά** σε κάθε κλήση — που μπορεί να προκαλέσει περιττές re-renders (το React βλέπει μια "νέα" τιμή) και σπαταλά υπολογισμό.

## Η λύση: memoized selectors (Reselect)

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

Το `createSelector` αποθηκεύει το αποτέλεσμα στη cache και εκτελεί μόνο εκ νέου τον δαπανηρό υπολογισμό όταν τα εισόδιά του (`state.items`) αλλάζουν πραγματικά — διαφορετικά επιστρέφει την **ίδια αναφορά**, αποτρέποντας τόσο τον επανυπολογισμό όσο και τις downstream re-renders.

## Σύνθεση selectors

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

Oι selectors συντάσσονται, δημιουργώντας πολύπλοκες παραγωγές από απλές, ξεχωριστά-cached τμήματα.

## Γιατί έχει σημασία

Oι selectors αποσυνδέουν τα στοιχεία από το σχήμα της κατάστασης (ένα κέρδος συντηρησιμότητας) και παρέχουν ένα μέρος για να εκφράσετε παράγωγα δεδομένα.

Η Memoization κάνει τους παράγωγους selectors αποδοτικούς — αποφεύγει επαναλαμβανόμενο δαπανηρό υπολογισμό και, κρυσιμότατα, επιστρέφει σταθερές αναφορές ώστε τα συνδεδεμένα στοιχεία να μην επανακαθίστανται περιττά.

Στις εφαρμογές Redux/NgRx, οι memoized selectors (Reselect/`createSelector`) είναι ένα κύριο εργαλείο απόδοσης και αρχιτεκτονικής. η ίδια ιδέα caching εμφανίζεται ως `useMemo` και `computed` αλλού.

Βασικοί selectors — ενθυλάκωση πρόσβασης κατάστασης

Το πρόβλημα: οι παράγωγοι selectors επανυπολογίζονται σε κάθε κλήση

Η λύση: memoized selectors (Reselect)

Σύνθεση selectors

Γιατί έχει σημασία

Σχετικές ερωτήσεις