score:11

Accepted answer

The reason that your component is re-rendering on every update is because you are fetching the data again and updating it in redux store,

Since the reference of data changes, the useSelector function returns you a new value and re-renders the component.

You can pass a deepEqual comparison function as a second argument to useSelector to avoid re-rendering it data hasn't changed

import _ from 'underscore';
...
const contextData = useSelector(state => state.data, _.isEqual);

However, you must carefully use this and measure how frequently your data will be updated otherwise you will add an added calculation in your code which won't even prevent a re-render many times

Working demo

score:2

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render


Related Query

More Query from same tag