Feature Request: useRecoilValueMemo and useRecoilValueLoadableMemo

Prerequire code

const counterSelector = selector({
    key: 'my counter',
    get: async () => fetch('/some/api')
});

function Counter() {
    const value = useRecoilValue(counterSelector);
    const refreshCounter = useRecoilRefresher(counterSelector);

    const addCounter = useCallback(async () => {
        await fetch('/add/counter');
        refreshCounter();
    }, []);
    
    return (
        <div>
            <div onClick={addCounter}>{ value }</div>
        </div>
    )
}

Currently useRecoilValue and useRecoilValueLoadable will cause the page to be replaced by suspense when the selector is refreshed, especially when it is not rendered for the first time, this behavior often interrupts the user’s operation, so I propose to add two hooks: useRecoilValueMemo and useRecoilLoadableMemo.

We can easily implement a memoize version

export function useRecoilValueMemo(recoilValue) {
    const loadable = useRecoilValueLoadable(recoilValue);
    const ref = useRef(null);

    if (loadable.state === 'hasValue') {
        ref.current = loadable.contents;
    }

    if (ref.current == null && loadable.state === 'loading') throw loadable.contents;

    if (loadable.state === 'hasError') {
        throw loadable.contents;
    }

    return ref.current;
}

Same idea for useRecoilValueLoadable.

export function useRecoilValueLoadableMemo(recoilValue) {
    const loadable = useRecoilValueLoadable(recoilValue);
    const ref = useRef(loadable);

    if (loadable.state === 'hasValue') {
        ref.current = loadable;
    }

    if (loadable.state === 'hasError') return loadable;

    return ref.current;
}

This can be more smooth for page refresh.

[Qquanwei]

We should add new package like recoil-enhance , that will provide some great practice hooks. should we create another new package?

[Qquanwei]

@signorbusi Thanks reply !

recoil-enhance was published , see also https://github.com/Qquanwei/recoil-enhance