From c074336f4f3393ef1475f622a7c60366330f615b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 8 Feb 2024 16:48:12 +0100 Subject: [PATCH] Fix: Avoid re-render when user settings haven't changed for FilterProvider 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. --- src/web/entities/filterprovider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/entities/filterprovider.js b/src/web/entities/filterprovider.js index 0c353d9bd8..bebae70ff0 100644 --- a/src/web/entities/filterprovider.js +++ b/src/web/entities/filterprovider.js @@ -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'; @@ -84,7 +84,7 @@ const FilterProvider = ({ userSettingDefaultSel.getValueByName('rowsperpage'), userSettingDefaultSel.getError(), ]; - }); + }, shallowEqual); useEffect(() => { if (!isDefined(rowsPerPage)) {