Is using Redux selectors throughout your application bad practice?

user_2891356 0
Viewed 41

Can someone please explain to me what would be a better approach? I haven't really seen much written about this online, although I feel like there are more rerenders with Approach A than Approach B.

// Approach A
// ComponentA.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// ComponentB.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// ComponentC.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// Entry.jsx
export default () => {
    return (
        . . .
        <ComponentA />
        <ComponentB />
        <ComponentC />
        . . .
    )
}

// Approach B
// ComponentA.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentB.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentC.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// Entry.jsx
export default () => {
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
        <ComponentA user={user} token={token} />
        <ComponentB user={user} token={token} />
        <ComponentC user={user} token={token} />
        . . .
    )
}

Am I mistaken, and there is really no difference, or is there a better approach of the two?

react-hooks reactjs
1 Answers

Since all the child components are using the same state from redux, its better you define it in the parent and let all the child elements use the same reference instead of creating multiple references of the same variable in each child component.

This way, your app will be using lesser memory.

So the following solution is much more efficient in your case

// ComponentA.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentB.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentC.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// Entry
export default () => {
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
        <ComponentA user={user} token={token} />
        <ComponentB user={user} token={token} />
        <ComponentC user={user} token={token} />
        . . .
    )
}

Also please refer to the the following post for more details:

Use Connect or pass data as props to children

user_59281860
Related