Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix minor issues in docs #675

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ A library for creating memoized "selector" functions. Commonly used with Redux,

The **Redux docs usage page on [Deriving Data with Selectors](https://redux.js.org/usage/deriving-data-selectors)** covers the purpose and motivation for selectors, why memoized selectors are useful, typical Reselect usage patterns, and using selectors with [React-Redux].

<a id="installation" />

## Installation

### Redux Toolkit
Expand Down Expand Up @@ -38,16 +40,16 @@ yarn add reselect

The Reselect docs are available at **https://reselect.js.org**, and include usage guides and API references:

- [**Introduction**](#https://reselect.js.org/introduction/getting-started)
- [**How Does Reselect Work?**](#https://reselect.js.org/introduction/how-does-reselect-work)
- [**Introduction**](https://reselect.js.org/introduction/getting-started)
- [**How Does Reselect Work?**](https://reselect.js.org/introduction/how-does-reselect-work)
- **API Reference**:
- **[`createSelector`]**
- **[`createSelectorCreator`]**
- **[`createStructuredSelector`]**
- [**Development-Only Stability Checks**](#https://reselect.js.org/api/development-only-stability-checks)
- [**Development-Only Stability Checks**](https://reselect.js.org/api/development-only-stability-checks)
- **[`lruMemoize`]**
- **[`weakMapMemoize`]**
- [**FAQ**](#https://reselect.js.org/FAQ)
- [**FAQ**](https://reselect.js.org/FAQ)

## Basic Usage

Expand Down Expand Up @@ -162,7 +164,7 @@ These updates aim to enhance flexibility, performance, and developer experience.

- Removed `ParametricSelector` and `OutputParametricSelector` types. Their functionalities are now integrated into `Selector` and `OutputSelector` respectively, which inherently support additional parameters.

<div align="right">[ <a href="installation">↑ Back to top ↑</a> ]</div>
<div align="right">[ <a href="#installation">↑ Back to top ↑</a> ]</div>

---

Expand Down
9 changes: 3 additions & 6 deletions docs/examples/weakMapMemoize/cacheSizeSolution.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createSelector, weakMapMemoize } from 'reselect'
import { createSelector } from 'reselect'
import type { RootState } from './cacheSizeProblem'

const state: RootState = {
Expand All @@ -10,16 +10,13 @@ const state: RootState = {
]
}

// `createSelector` uses `weakMapMemoize` by default.
const selectItemsByCategory = createSelector(
[
(state: RootState) => state.items,
(state: RootState, category: string) => category
],
(items, category) => items.filter(item => item.category === category),
{
memoize: weakMapMemoize,
argsMemoize: weakMapMemoize
}
(items, category) => items.filter(item => item.category === category)
)

selectItemsByCategory(state, 'Electronics') // Selector runs
Expand Down
9 changes: 8 additions & 1 deletion docs/examples/weakMapMemoize/usingWithCreateSelector.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { shallowEqual } from 'react-redux'
import { createSelector, weakMapMemoize } from 'reselect'
import type { RootState } from './cacheSizeProblem'

Expand All @@ -18,7 +19,13 @@ const selectItemsByCategory = createSelector(
(items, category) => items.filter(item => item.category === category),
{
memoize: weakMapMemoize,
argsMemoize: weakMapMemoize
argsMemoize: weakMapMemoize,
argsMemoizeOptions: {
resultEqualityCheck: shallowEqual
},
memoizeOptions: {
resultEqualityCheck: shallowEqual
}
}
)

Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { shallowEqual } from 'react-redux'
import { createSelectorCreator, weakMapMemoize } from 'reselect'
import type { RootState } from './cacheSizeProblem'

Expand All @@ -12,7 +13,13 @@ const state: RootState = {

const createSelectorWeakMap = createSelectorCreator({
memoize: weakMapMemoize,
argsMemoize: weakMapMemoize
argsMemoize: weakMapMemoize,
argsMemoizeOptions: {
resultEqualityCheck: shallowEqual
},
memoizeOptions: {
resultEqualityCheck: shallowEqual
}
})

const selectItemsByCategory = createSelectorWeakMap(
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@
"type-check": "vitest --run --typecheck.only",
"type-check:trace": "vitest --run --typecheck.only && tsc --noEmit -p typescript_test/tsconfig.json --generateTrace trace && npx @typescript/analyze-trace trace && rimraf trace",
"test:typescript": "tsc --noEmit -p typescript_test/tsconfig.json",
"docs:start": "yarn --cwd website start",
"docs:build": "yarn --cwd website build",
"docs:clear": "yarn --cwd website clear",
"docs:serve": "yarn --cwd website serve"
"docs:start": "yarn ./website start",
"docs:build": "yarn ./website build",
"docs:clear": "yarn ./website clear",
"docs:serve": "yarn ./website serve"
},
"keywords": [
"react",
Expand Down
18 changes: 9 additions & 9 deletions website/docs/api/createSelectorCreator.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ Accepts either a `memoize` function and `...memoizeOptions` rest parameter, or s

## Parameters (since 5.0.0)

| Name | Description |
| :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `options` | An options object containing the `memoize` function responsible for memoizing the `resultFunc` inside <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). It also provides additional options for customizing memoization. While the `memoize` property is mandatory, the rest are optional. |
| `options.argsMemoize?` | The optional memoize function that is used to memoize the arguments passed into the <InternalLinks.OutputSelector /> generated by <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). <br /> **`Default`** = `lruMemoize` before 5.0.0 and `weakMapMemoize` after |
| `options.argsMemoizeOptions?` | Optional configuration options for the `argsMemoize` function. These options are passed to the `argsMemoize` function as the second argument. <br /> since 5.0.0 |
| `options.inputStabilityCheck?` | Overrides the global input stability check for the selector. Possible values are: <br /> `once` - Run only the first time the selector is called. <br /> `always` - Run every time the selector is called. <br /> `never` - Never run the input stability check. <br /> **`Default`** = `'once'` <br /> since 5.0.0 |
| `options.memoize` | The memoize function that is used to memoize the `resultFunc` inside <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). since 5.0.0 |
| `options.memoizeOptions?` | Optional configuration options for the `memoize` function. These options are passed to the `memoize` function as the second argument. <br /> since 5.0.0 |
| Name | Description |
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `options` | An options object containing the `memoize` function responsible for memoizing the `resultFunc` inside <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). It also provides additional options for customizing memoization. While the `memoize` property is mandatory, the rest are optional. |
| `options.argsMemoize?` | The optional memoize function that is used to memoize the arguments passed into the <InternalLinks.OutputSelector /> generated by <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). <br /> **`Default`** = `lruMemoize` before 5.0.0 and `weakMapMemoize` after |
| `options.argsMemoizeOptions?` | Optional configuration options for the `argsMemoize` function. These options are passed to the `argsMemoize` function as the second argument. <br /> since 5.0.0 |
| `options.devModeChecks?` | Reselect performs [additional checks](https://reselect.js.org/api/development-only-stability-checks) in development mode to help identify and warn about potential issues in selector behavior. This option allows you to customize the behavior of these checks per selector. <br /> since 5.0.0 |
| `options.memoize` | The memoize function that is used to memoize the `resultFunc` inside <InternalLinks.CreateSelector /> (e.g., `lruMemoize` or `weakMapMemoize`). <br /> since 5.0.0 |
| `options.memoizeOptions?` | Optional configuration options for the `memoize` function. These options are passed to the `memoize` function as the second argument. <br /> since 5.0.0 |

## Parameters

Expand Down Expand Up @@ -69,7 +69,7 @@ customSelector(

The `memoize` argument is a memoization function to replace the default configured memoizer (normally `weakMapMemoize`).

The `...memoizeOptions` rest parameters are zero or more configuration options to be passed to `memoizeFunc`. The selectors `resultFunc` is passed as the first argument to `memoize` and the `memoizeOptions` are passed as the second argument onwards:
The `...memoizeOptions` rest parameters are zero or more configuration options to be passed to `memoizeFunc`. The selector's `resultFunc` is passed as the first argument to `memoize` and the `memoizeOptions` are passed as the second argument onwards:

```ts
const customSelectorCreator = createSelectorCreator(
Expand Down
20 changes: 10 additions & 10 deletions website/docs/api/development-only-stability-checks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ Since this is a common mistake, we've added a development mode check to catch th
type DevModeCheckFrequency = 'always' | 'once' | 'never'
```

| Possible Values | Description |
| :-------------- | :---------------------------------------------- |
| `once` | Run only the first time the selector is called. |
| `always` | Run every time the selector is called. |
| `never` | Never run the input stability check. |
| Possible Values | Description |
| :-------------- | :-------------------------------------------------------- |
| `once` | Run only the first time the selector is called. (default) |
| `always` | Run every time the selector is called. |
| `never` | Never run the input stability check. |

:::info

Expand Down Expand Up @@ -158,11 +158,11 @@ const brokenSelector = createSelector(
type DevModeCheckFrequency = 'always' | 'once' | 'never'
```

| Possible Values | Description |
| :-------------- | :---------------------------------------------- |
| `once` | Run only the first time the selector is called. |
| `always` | Run every time the selector is called. |
| `never` | Never run the identity function check. |
| Possible Values | Description |
| :-------------- | :-------------------------------------------------------- |
| `once` | Run only the first time the selector is called. (default) |
| `always` | Run every time the selector is called. |
| `never` | Never run the identity function check. |

:::info

Expand Down
22 changes: 15 additions & 7 deletions website/docs/api/lruMemoize.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,15 @@ import { ExternalLinks } from '@site/src/components/ExternalLinks'

# `lruMemoize`

A memoization function that uses a provided equality check function to compare its inputs. This was originally known as `defaultMemoize`, and was the default inside of <InternalLinks.CreateSelector /> up through version 4.x.
:::info

- **Previous Versions:** Prior to version 5.0.0, Reselect used `lruMemoize` as the default memoizer in <InternalLinks.CreateSelector />. At that time, it was referred to as `defaultMemoize`.

- **Reselect 5.0.0 and Later:** Starting with version 5.0.0, Reselect has switched to using <InternalLinks.WeakMapMemoize /> as the default memoizer in <InternalLinks.CreateSelector />.

:::

A memoization function that uses a provided equality check function to compare its inputs. **This was originally known as `defaultMemoize`**, and was the default inside of <InternalLinks.CreateSelector /> up through version 4.x.

It has a default cache size of 1. This means it always recalculates when the value of an argument changes. However, this can be customized as needed with a specific max cache size (since 4.1.0).

Expand Down Expand Up @@ -57,7 +65,7 @@ const referenceEqualityCheck = (previousValue, currentValue) => {
| `func` | The function to be memoized. |
| `equalityCheckOrOptions` | Either an equality check function or an `options` object. |

Since 4.1.0, `lruMemoize` also accepts an options object as its first argument instead of an `equalityCheck` function. The `options` object may contain:
Since 4.1.0, `lruMemoize` also accepts an options object as its second argument instead of an `equalityCheck` function. The `options` object may contain:

```ts
type EqualityFn<T = any> = (a: T, b: T) => boolean
Expand All @@ -69,11 +77,11 @@ interface LruMemoizeOptions<Result = any> {
}
```

| Name | Description |
| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `equalityCheck` | Used to compare the individual arguments of the provided calculation function. <br /> **`Default`** = `defaultEqualityCheck` |
| `resultEqualityCheck` | If provided, used to compare a newly generated output value against previous values in the cache. If a match is found, the old value is returned. This addresses the common <code>todos.map(todo => todo.id)</code> use case, where an update to another field in the original data causes a recalculation due to changed references, but the output is still effectively the same. |
| `maxSize` | The cache size for the selector. If greater than 1, the selector will use an LRU cache internally. <br /> **`Default`** = 1 |
| Name | Description |
| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `equalityCheck` | Used to compare the individual arguments of the provided calculation function. <br /> **`Default`** = `referenceEqualityCheck` |
| `resultEqualityCheck` | If provided, used to compare a newly generated output value against previous values in the cache. If a match is found, the old value is returned. This addresses the common <code>todos.map(todo => todo.id)</code> use case, where an update to another field in the original data causes a recalculation due to changed references, but the output is still effectively the same. <br /> Since 4.1.0 |
| `maxSize` | The cache size for the selector. If greater than 1, the selector will use an LRU cache internally. <br /> **`Default`** = 1 |

:::warning

Expand Down
Loading