ReactJS передовых практик использования хуков и Redux. Должен ли я использовать useSelector в каждом компоненте или передавать через реквизиты?

Question

Я должен использовать один и тот же useSelector в каждом дочернем компоненте, или я должен передать useSelector через реквизиты?

Оба приведенных ниже примера работают, я просто хочу знать, что является лучшим методом. Пример передачи через props:

const FatherComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
   <ChildComponent userId={userId} />
 )
}

const ChildComponent = ({userId}) => {
 return (
 <>{userId}</>
)
}

или пример повторения useSelector:

const FatherComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
  <ChildComponent />
 )
}

const ChildComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
  <>{userId}</>
 )
}

Answer 1

Предпочтите иметь больше компонентов пользовательского интерфейса, подписанных на хранилище Redux, и читать данные на более детальном уровне

Просто для полноты, выше - рекомендация официального сайта redux.

Полная благодарность Николасу Тауэру, который указал на страницу в разделе комментариев.

Предпочитаю иметь больше компонентов пользовательского интерфейса, подписанных на хранилище Redux, и читать данные на более детальном уровне. Как правило, это приводит к повышению производительности пользовательского интерфейса, поскольку при изменении заданного состояния требуется выполнять рендеринг меньшего количества компонентов.

Например, вместо простого подключения компонента и чтения всего массива пользователей необходимо получить список всех идентификаторов пользователей, отображать элементы списка как и были подключены и извлекать собственную запись пользователя из хранилища. 1014 *

По ссылке - https://redux.js.org/style-guide/style-guide#connect -more-components-to-read-data-from-the-store