如何在钩子内调用钩子？ （或替代，因为这无法完成：D）

Question

so I've created a custom hook that needs to be fired on page view

so I thought I could just call this hook inside useEffect but it doesn't look like this is possible

so does anyone know how I can do this?

it will be triggering Google Analytics once I fire it so it has to be onload. is this possible?

ok here's an example

export const usePageView = props => {
    const counter = useSelector(state => state) // useSelector coming from react redux
    console.log(counter, '===')
}

import { usePageView } from '../myhooks'

export const myComponent = () => {
   useEffect(() => {
      usePageView() // get error saying Error: Invalid hook call.
},[])

}

Answer 1

The Rules of Hooks state to only call hooks from the top level of a function.

Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

You can not compose a custom hook into a useEffect call because that is by definition an "nested function". Instead, you should build your custom hooks to include all the hooks or useEffect calls they need to do inside the custom hook (but at the top level of the custom hook).

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

It would be helpful to have more specific code of what exactly you are trying to do, because currently your question is too vague to give a more direct answer.

Answer 2

You don't need here an useEffect .

export const usePageView = props => {
    const counter = useSelector(state => state) // useSelector coming from react redux
    console.log(counter, '===')
}

import { usePageView } from '../myhooks'

export const myComponent = () => {
      usePageView();
}

This should work.