React Re-rendering and Redux Issues

Question

When we use useSelector hook all the components where I have used the useSelector hooks gets re rendered whenever i change the state

how to avoid this and is there any other way I can prevent the components from re rendering

Answer 1

useSelector takes a second argument which is a function that checks if the previous and current state are equal to determine when to update.

import { shallowEqual, useSelector } from 'react-redux'

// Pass it as the second argument directly
const selectedData = useSelector(selectorReturningObject, shallowEqual)

// or pass it as the `equalityFn` field in the options argument
const selectedData = useSelector(selectorReturningObject, {
  equalityFn: shallowEqual,
})