Как правильно использовать хук useDispatch react-redux?

Часть кода компонента:

const TopicsScreen = ({navigation}) => {
  const topics = useSelector(selectTopics, shallowEqual)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getTopics())
  }, [])

Код селектора

export const selectTopics = (state) => {
  console.log('inside')
  return state.topicsData.topics
}

Меня мучают следующие вопросы:

  1. Правильно ли я использую хук useDispatch? Все работает, но консоль выводит фразу 'inside' 4 раза вместо двух, хотя я вроде пользуюсь функцией shallowEqual. Когда компонент был написан с помощью функции connect 'inside' выводилось всего два раза как и предполагается. Как оптимизировать код и нужно ли это?
  2. Читал что useEffect лучше не использовать с пустым аргументом в скобках, и код у меня не лучшее решение. Как исправить и что поместить внутрь?
  3. Также насчет useEffect. Нужно ли убирать за этим хуком и если да то как?

Не знаю насколько это важно, но я использую библиотеку redux-thunk, и функция getTopics - асинхронный запрос к БД


Ответы (1 шт):

Автор решения: Август
  1. нормально Вы используете useDispatch. по-другому его никак и не использовать. а если shallowEqual не помогает, то придется использовать Reselect или подобную ему чепуху для мемоизации (более подробно на офф документации). Вы, кстати, можете сами написать функцию shallowEqual, правда придется писать её для каждого селектора.

  2. использовать useEffect с пустыми зависимостями (аргументами) - нормально, потому что как Вы иначе будет использовать методы жизненного цикла в функциональных компонентах?

  3. если под убирать Вы имели в виду задачу цикла componentWillUnmount, то, конечно, да.

→ Ссылка