Saturday, 6 February 2021

Difference between this useReduxState hook and useSelector in terms of performance?

I wrote a useReduxState hook, which looks like this:

import { useSelector } from 'react-redux';

const pick = (object, keys) =>
    keys.reduce(
        (obj, key) => (object && Object.prototype.hasOwnProperty.call(object, key) ? { ...obj, [key]: object[key] } : obj),
        {},
    );

export default (reducer, values) =>
    pick(
        useSelector((state) => state[reducer]),
        values,
    );

I use this as,

const Component = React.memo(() => {
    const { someStateFromReducerA, someMoreStateFromReducerA } = useReduxState('reducerA', ['someStateFromReducerA', 'someMoreStateFromReducerA']);
    const { someStateFromReducerB } = useReduxState('reducerB', ['someStateFromReducerB']);

    return (
        <div>
            {someStateFromReducerA}
            {someMoreStateFromReducerA}
            {someStateFromReducerB}
        </div>
    );
});

export default Component;

Although this seems like a convenient approach, I'm wondering if there is a difference between this approach and the below approach:

const Component = React.memo(() => {
    const [
        someStateFromReducerA,
        someMoreStateFromReducerA
    ] = useSelector(
            ({ reducerA: { someStateFromReducerA, someMoreStateFromReducerA } }) =>
                [someStateFromReducerA, someMoreStateFromReducerA]
        );
    const someStateFromReducerB = useSelector(({ reducerB: { someStateFromReducerB } }) => someStateFromReducerB);

    return (
        <div>
            {someStateFromReducerA}
            {someMoreStateFromReducerA}
            {someStateFromReducerB}
        </div>
    );
});

export default Component;

Are there more re-renders with useReduxState? I plan on using this hook across many different modules in different components, and I'm wondering if anything else is affected, such as more redundant references being created to state, causing rerenders.



from Difference between this useReduxState hook and useSelector in terms of performance?

No comments:

Post a Comment