CODEWITHSUNDEEP
react-reduxhook
Keitaro
Keitaro

Reputation: 133

React redux useSelector best practice

Learning redux/react-redux, I'm using useSelector with inner selector function in a separate file. It's working perfectly but I have question about best practices.

Assuming that I have a state with 3 entries (firstname, lastname, email), is it better to :

1. Have a specific selector for each case?

selector.js

export const selectFirstname = (state) => state.currentUser.firstName
export const selectLastname = (state) => state.currentUser.lastName
export const selectEmail = (state) => state.currentUser.email

component.js

const firstName = useSelector(selectFirstname)
const lastName = useSelector(selectLastname )
const email = useSelector(selectEmail)

2. Have a generic selector with param?

selector.js

export const selectItem = (key) => {
  return (state) => state.currentUser[key]
}

component.js

const firstName = useSelector(selectItem('firstName'))
const lastName = useSelector(selectItem('lastName'))
const email = useSelector(selectItem('email'))

3. Have a global selector and use it with destructuring in my component?

selector.js

export const selectItem = (state) => state.currentUser

component.jsx

const {firstName, lastName, email} = useSelector(selectItem)

Thank you in advance

Upvotes: 7

Views: 5367

Answers (1)

Jamie R Rytlewski
Jamie R Rytlewski

Reputation: 1221

No, you shouldn't be doing #3. You should be returning the smallest amounts of data per the docs: https://redux.js.org/tutorials/fundamentals/part-5-ui-react#using-multiple-selectors-in-a-component

So 1 or 2 is your best option. Also, anytime currentUser changes the whole thing will re-render and if you are only using 3 of the values, why re-render the component when the values have not changed.

Upvotes: 5

Related Questions