使用useEffect的React自定义Hook直接调用方式是否合规？

我创建了一个自定义Hook，当Redux store中特定值发生变化时，它会通过useEffect更新store，代码如下：

import { useRef, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { index } from '../actions'
import { createSelector } from 'reselect'
import { omit } from 'lodash'
const selectPerformanceSearch = createSelector(
  state => omit(state.eventSearch, ['results', 'isFetching']),
  items => items
)
export default function useEventSearch() {
  const state = useSelector(selectPerformanceSearch)
  const dispatch = useDispatch()
  const initialFetch = useRef(true)
  const { tags, near, filters } = state
  const { lng, lat, location } = near
  useEffect(() => {
    if (!initialFetch.current) {
      const data = { tags, lng, lat, filters }
      dispatch(index('/event/search', 'EVENT_SEARCH', data))
    }
  }, [tags, lng, lat, filters, dispatch])
  useEffect(() => {
    if (initialFetch.current && location) {
      initialFetch.current = false
      const data = { lng, lat }
      dispatch(index('/event/closest', 'EVENT_SEARCH', data))
    }
  }, [lng, lat, location, dispatch])
}

随后我在React组件中如下使用该Hook：

import usePerformanceSearch from '../../hooks/usePerformanceSearch'
const SearchBar = props => {
  // ...code
  usePerformanceSearch()
  /// ...other code
  return (
    ...
  )
}

目前功能运行符合预期，但想确认这种直接调用使用Hook的方式是否符合规范？

你的用法完全符合React Hook规范！ #

这正是自定义Hook的正确打开方式，原因如下：

• 自定义Hook的核心目的就是复用组件间的逻辑，你把Redux状态监听、副作用触发的逻辑封装到useEventSearch中，在组件里直接调用，完美契合Hook的设计初衷。
• 你严格遵循了React Hook的两条核心规则：
  • 只在组件的顶层作用域调用Hook：你在SearchBar组件的顶层直接调用usePerformanceSearch()，没有把它放在条件判断、循环或者嵌套函数里，避免了Hook执行顺序混乱的问题。
  • 只在React函数组件或其他自定义Hook中调用Hook：SearchBar是标准的函数组件，完全符合调用场景要求。
• 你的Hook内部也正确使用了内置Hook：useEffect的依赖项数组配置完整（包含了所有用到的状态和dispatch），useRef也正确用来追踪初始状态，保证了副作用的触发时机准确。

小提醒 #

注意到你的Hook导出名称是useEventSearch，但组件中导入的是usePerformanceSearch，这应该是笔误，建议统一命名，避免后续维护时产生混淆。

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