faced such a problem - I decided to optimize the React application and found out that when I destructure two values ​​from an object,

const { quoteCurr, baseCurr } = useAppSelector(state => state.portfolio.selectedCoins)

the remaining value of the object, when changed in other components, causes this component to be re-rendered.

Please tell me what to do in such a situation? Do not use destructuring and create each variable separately? Like this:

const baseCurr = useAppSelector(
  (state) => state.portfolio.selectedCoins.baseCurr
);
const quoteCurr = useAppSelector(
  (state) => state.portfolio.selectedCoins.quoteCurr
);

This is what is stored in the component when destructuring, I only need two object values, but the component keeps track of the name 4