createSelector analysis support

[seescode]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

What is the current behavior?

createSelector creates memoized selectors that improve performance of the application but no insight into when it recomputes.

Expected behavior:

In my application I have about 50 different selectors. Many selectors read across multiple slices of the app state. There's also a lot of composition of selectors.

Ideally I would like to know the following things about my selectors:
-When does a given selector recompute?
-How much time does a selector take to run?

This will help me optimize my selectors.

[phillipzada]

@brandonroberts I was thinking for this too a while back. I have a prototype which I can submit via a PR. Essentially it would work as follows:

1. New interface for the selector configuration
2. Open the selector to configuration, allow for individual selector configuration options. Could also translate to a shared hash-map or single configuration variable
3. Update the initialization code to read
4. Add and update the memoizedState Fn call within the Selector
5. Default output to console including the selectorKey and time in milliseconds to run.

Example Changes using a custom Selector Fn

export interface SelectorConfiguration {
    selectorKey: string;
    enabled?: boolean;
    timerCallback?: Function;
}

export function createTimedSelector<State, S1, S2, Result>(
    s1: Selector<State, S1>,
    s2: Selector<State, S2>,
    projector: (s1: S1, s2: S2) => Result,
    config?: SelectorConfiguration
): MemoizedSelector<State, Result>;
export function createTimedSelector<State, S1, S2, Result>(
    selectors: [Selector<State, S1>, Selector<State, S2>],
    projector: (s1: S1, s2: S2) => Result,
    config?: SelectorConfiguration
): MemoizedSelector<State, Result>;
export function createTimedSelector(...input: any[]): Selector<any, any> {
    let args = input;
    if (Array.isArray(args[0])) {
        const [head, ...tail] = args;
        args = [...head, ...tail];
    }

    let config: SelectorConfiguration = {
        enabled: false,
        selectorKey: 'Unnamed Selector',
        timerCallback: (config: any, interval: number) => {
            console.log(config.selectorKey, interval);
        }
    };
    let splitIndex = 1;
    if (args[args.length - 1].selectorKey) {
        splitIndex = 2;
        config = { ...config, ...args[args.length - 1] };
    }
    const selectors = args.slice(0, args.length - splitIndex);
    const projector = args[args.length - splitIndex];

    const memoizedSelectors = selectors.filter(
        (selector: any) =>
            selector.release && typeof selector.release === 'function'
    );

    const memoizedProjector = memoize(function (...selectors: any[]) {
        return projector.apply(null, selectors);
    });

    const performTracking = function (interval: number) {
        config.enabled && config.timerCallback && config.timerCallback.apply(null, [config, interval]);
    };

    const memoizedState = memoize(function (state: any) {
        const start = Date.now();
        const args = selectors.map(fn => fn(state));
        const newState = memoizedProjector.memoized.apply(null, args);
        performTracking(Date.now() - start);
        return newState;
    });

    function release() {
        memoizedState.reset();
        memoizedProjector.reset();

        memoizedSelectors.forEach(selector => selector.release());
    }

    return Object.assign(memoizedState.memoized, {
        release,
        projector: memoizedProjector.memoized,
    });
}

Tested in example app and works perfectly, even though in this case most of the selectors return 0 or 1 millisecond.

[alexciesielski]

What would be most interesting to me is a way to check the value of a selector at a given time.

Is this possible without console logging it?

[phillipzada]

yep, the callback function is configurable. console.log is just the default

[phillipzada]

@brandonroberts PR acceptable for a "timedSelector"?

[brandonroberts]

@phillipzada I'd rather see us expose a way to create your own selector function similar to https://github.com/reactjs/reselect#createselectorcreatormemoize-memoizeoptions and also add recomputations to see how many times the selector gets reset. Then you can analyze your selector using your own defined set of metrics.

[phillipzada]

@brandonroberts that looks awesome! Will take a look hopefully this side of the year 😄 🎉