Skip to content

Commit

Permalink
Fix: Avoid re-render when user settings haven't changed for FilterPro…
Browse files Browse the repository at this point in the history
…vider

The behavior of `useSelector` and `connect` is differently.
`useSelector` uses identity comparison `===` for detecting if the
returned object has changed and a re-render is necessary and `connect`
uses shallow comparison. See https://react-redux.js.org/api/hooks#equality-comparisons-and-updates
for all details.

Therefore to avoid re-renders in the FilterProvider we need to compare
the contents of returned array from the user settings selector via
`shallowEqual` because with every call a new array is created and the
identity changes.
  • Loading branch information
bjoernricks committed Feb 8, 2024
1 parent c2f960a commit c074336
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/web/entities/filterprovider.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import React, {useEffect, useState} from 'react';

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

import {ROWS_PER_PAGE_SETTING_ID} from 'gmp/commands/users';

Expand Down Expand Up @@ -84,7 +84,7 @@ const FilterProvider = ({
userSettingDefaultSel.getValueByName('rowsperpage'),
userSettingDefaultSel.getError(),
];
});
}, shallowEqual);

useEffect(() => {
if (!isDefined(rowsPerPage)) {
Expand Down

0 comments on commit c074336

Please sign in to comment.