UNPKG

1.57 kBTypeScriptView Raw
1/**
2 *`expr` can be used to create temporary computed values inside computed values.
3 * Nesting computed values is useful to create cheap computations in order to prevent expensive computations from needing to run.
4 * In the following example the expression prevents that a component is rerender _each time_ the selection changes;
5 * instead it will only rerenders when the current todo is (de)selected.
6 *
7 * `expr(func)` is an alias for `computed(func).get()`.
8 * Please note that the function given to `expr` is evaluated _twice_ in the scenario that the overall expression value changes.
9 * It is evaluated the first time when any observables it depends on change.
10 * It is evaluated a second time when a change in its value triggers the outer computed or reaction to evaluate, which recreates and reevaluates the expression.
11 *
12 * In the following example, the expression prevents the `TodoView` component from being re-rendered if the selection changes elsewhere.
13 * Instead, the component will only re-render when the relevant todo is (de)selected, which happens much less frequently.
14 *
15 * @example
16 * const Todo = observer((props) => {
17 * const todo = props.todo
18 * const isSelected = mobxUtils.expr(() => props.viewState.selection === todo)
19 * const TodoView = observer(({ todo, editorState }) => {
20 * const isSelected = mobxUtils.expr(() => editorState.selection === todo)
21 * return <div className={isSelected ? "todo todo-selected" : "todo"}>{todo.title}</div>
22 * })
23 */
24export declare function expr<T>(expr: () => T): T;