React Hooks - 防止深度比较导致无限重新渲染

Question

我正在使用如下反应钩子。

我等待通过 useSelector react-redux 钩子加载用户对象，然后更新 useFirestoreConnect 钩子使用的 firebase 查询。

const MyComponent = () => {
  const [query, setQuery] = useState({
    collection: 'account',
    query: [['userId', '==', user.uid]]
  })

  const user = useSelector(state => state.firebase.profile)

  useFirestoreConnect(query)

  useEffect(() => {
    const userId = user.uid ? user.uid ? null
    setQuery({
      collection: 'account',
      query: [['userId', '==', null]]
    })
  }, [user, initialQuery])
}

由于传递给 useFirestoreConnect 的对象每次都是新的，因此它会无限期地强制重新渲染。为了完成这项工作，我不得不编写一些丑陋的代码来确保我只是用一个对象的变异版本更新状态。这太可怕了。由于我的重新渲染仅以 user.uid 为条件，是否有一种方法可以 "wrap" 和 useFirestoreConnect 以便我只传递一个单一字符串进行简单比较？

感谢您提供任何见解，还是我的做法有误？

Answer 1

您应该使用 useMemo 为相同的输入参数强制 return 相同的对象。

const MyComponent = () => {

  const user = useSelector(state => state.firebase.profile)

  const query = useMemo(
    () => ({
      collection: 'account',
      where: [['userId', '==', user.uid ? user.uid : null]],
    }),
    [user]
  )
  useFirestoreConnect(query)
}

React Hooks - 防止深度比较导致无限重新渲染

React Hooks - Prevent deep comparison causing infinite rerenders

reactjs

react-hooks