shnoby shnoby - 1 month ago 16
React JSX Question

prevent selectors of child components being triggerred in redux

How can i prevent my child selectors from being updated each time the parent component bring data?

selectors behaviour make sense i am just looking for alternative approaches more like simpler approach then using reselect( not allowed use beyond redux).

gist

Answer

Reselect selectors are memoized, which means that if the selector's params are the same, the resulting props are the same object. Even if you can use reselect, you can memoized your selectors easily by implementing a memoization method, like the one from Addy Osmani's article:

function memoize( fn ) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
            hash = "",
            i = args.length;
        currentArg = null;
        while (i--) {
            currentArg = args[i];
            hash += (currentArg === Object(currentArg)) ?
            JSON.stringify(currentArg) : currentArg;
            fn.memoize || (fn.memoize = {});
        }
        return (hash in fn.memoize) ? fn.memoize[hash] :
        fn.memoize[hash] = fn.apply(this, args);
    };
}

And then use it for creating the selectors:

const selector = memoize((state) =>({
   alerts: selectors.alerts(state) 
}));
Comments