Trouble with React Hooks, which react hook rule am I breaking?

Question

I am receiving this error:

Invalid hook call. Hooks can only be called inside of the body of a function component.

I am using a hook to grab the router location with the function HeaderView() (which alone works fine) and setting state so that I can play around with my components based on the current route.

Here is the composition of my hook:

const Navbar = () => {
  const [route, setRoute] = useState("/");


  function HeaderView() {
    let location = useLocation();
    console.log(location.pathname);
    setRoute(location.pathname);
    return;
  }

  useEffect(() => {
   HeaderView()
  }, [route]);

.. rest of the component.

useLocation is a function provided by "react-router-dom"; Everytime I think I have a handle on hooks, there seems to be something else that trips me up, so frustration, thanks for reading.

Answer 1

I think you're seeing that error because you're calling the hook inside useEffect.

Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

source: https://reactjs.org/warnings/invalid-hook-call-warning.html

Answer 2

What happens if you unwrap HeaderView?

const Navbar = () => {
const [route, setRoute] = useState("/");
let location = useLocation();

useEffect(() => {
    console.log(location.pathname);
    setRoute(location.pathname);
}, [location]);

.. rest of the component.

Only Call Hooks at the Top Level

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.

Note: Also, be careful of infinite loops in useEffect.

Answer 3

One of the rules for hooks is that they cannot be called inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function.

https://reactjs.org/docs/hooks-rules.html

There is a good article, which explained the concept of how hooks were implemented thanks to closure. I enjoyed reading it and it helped me understand better how it works under the hood

https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/