使用useSelector钩子从Redux状态中提取特定值时采用对象解构是否安全？直接解构整个state的写法是否会引发重渲染问题或属于不良实践？

Great questions—these are super common pitfalls when working with Redux's useSelector hook, so let's break them down clearly.

1. Is object destructuring safe when extracting values with useSelector? #

The answer depends on where you're doing the destructuring:

• If you destructure after getting a stable value from useSelector: This is totally safe. For example:

  // Safe: Selects individual values (each returns a stable reference unless changed)
  const item1 = useSelector(state => state.item1);
  const item2 = useSelector(state => state.item2);
  // Destructuring here is just plain JS, no Redux-related issues
  const items = { item1, item2 };
  

• If you destructure inside the selector function (returning a new object): This is unsafe for performance. Here's why:

  // Unsafe: Returns a new object every time any part of state changes
  const { item1, item2 } = useSelector(state => ({ item1: state.item1, item2: state.item2 }));
  

  useSelector compares the previous return value with the new one using reference equality by default. Since this selector creates a new object on every call, your component will re-render every time any action is dispatched—even if item1 and item2 haven't changed.

  The fix here is to use a memoized selector (via Reselect's createSelector) to only return a new object when the relevant state slices change:

  import { createSelector } from '@reduxjs/toolkit';
  
  const selectItem1 = state => state.item1;
  const selectItem2 = state => state.item2;
  
  const selectItems = createSelector(
    [selectItem1, selectItem2],
    (item1, item2) => ({ item1, item2 })
  );
  
  // Now safe: Only re-renders if item1 or item2 change
  const { item1, item2 } = useSelector(selectItems);
  

2. Is const {item1, item2, item3} = useSelector(state => state); safe, and is it bad practice? #

The short answer: This is not safe, and it's absolutely a bad practice—here's why:

• useSelector(state => state) returns the entire Redux store state every time it runs. Redux requires immutable state updates, so every time any action is dispatched (even one that updates an unrelated slice like state.user or state.cart), the entire state object gets a new reference.
• Since useSelector checks reference equality, your component will re-render on every single action dispatch, regardless of whether item1, item2, or item3 actually changed. This leads to massive unnecessary re-renders and kills performance, especially in larger apps.

What to do instead: #

• Either call useSelector separately for each value you need:

  const item1 = useSelector(state => state.item1);
  const item2 = useSelector(state => state.item2);
  const item3 = useSelector(state => state.item3);
  

• Or use a memoized selector to only extract and return the specific slices you care about, as shown in the first question's fix.

内容的提问来源于stack exchange，提问作者lanxion