shnoby shnoby - 1 year ago 67
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).


Answer Source

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 =,
            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)