selectors.md
1---
2title: Selectors
3description: Deriving data with selectors
4---
5
6In a typical web app, the logic for deriving data is usually written as
7functions we call selectors.
8
9The basic function signature of a selector:
10
11```ts
12const selectData = (state: WebState) => state.data;
13```
14
15Selectors are primarily used to encapsulate logic for looking up specific values
16from state, logic for actually deriving values, and improving performance by
17avoiding unnecessary recalculations.
18
19To learn more, redux has excellent docs
20[on deriving data with selectors](https://redux.js.org/usage/deriving-data-selectors).
21
22There is 100% knowledge transfer between selectors in `starfx` and `redux`
23because we adhere to the same function signature.
24
25The only difference is that as part of our API we re-export
26[reselect.createSelector](https://reselect.js.org/api/createselector/), which
27will memoize functions:
28
29```ts
30import { createSelector } from "starfx";
31
32const selectData = (state) => state.data;
33const myselector = createSelector(
34 selectData,
35 (data) => data.sort((a, b) => a.id - b.id);
36);
37```
38
39Function memoization is just a way to cache a function call. If the dependencies
40(e.g. the result of `selectData`) don't change, then `myselector` will not be
41called: it will return its previous value.