解决 React useEffect hook 中的位置依赖警告

Question

I have a useEffect that I would like to execute only the first time in a React component. I am using location.pathname in the useEffect , if I leave the array dependencies empty, I get this warning:

React Hook useEffect has a missing dependency: 'location.pathname'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

If I include the dependency, useEffect will be executed each time the user navigates.

I see many people telling that the warning is just a potential problem, but if you know what you are doing, you can just simply ignore it, or disable the warning with // eslint-disable-line react-hooks/exhaustive-deps .

I have been reading about this problem, I know that for functions I should use useCallback . What would be the equivalent for this case?

import { useLocation } from 'react-router-dom';

// Inside component

  const location = useLocation();
  useEffect(() => {
    if (location.pathname === VIEWS.initial) {
      setChecked(false);
    }
  }, []);

What would be the most correct solution to this problem?

Answer 1

I would recommend setting the initial value in useState instead of useEffect :

const location = useLocation();
const [checked, setChecked] = useState(location.pathname === VIEWS.initial)

If you really want to set the state on mount via useEffect , the least verbose alternative would be to suppress the warning with a comment. However, if you at a later point extend this effect with more logic, you run the risk of encountering cryptic bugs regarding stale data that this warning might have prevented.

The third way would be to make sure that the effect is only run once while keeping the location.pathname dependency:

  const [hasMounted, setHasMounted] = useState(false)
  const location = useLocation();

  useEffect(() => {
    if (!hasMounted && location.pathname === VIEWS.initial) {
      setChecked(false);
      setHasMounted(true);
    }
  }, [location.pathname, hasMounted]);

This is in my opinion not advisable because of poor readability and unnecessary complexity compared to my first suggestion.

Answer 2

Solved with useRef . It seems working fine, warning disappeared:

import { useLocation } from 'react-router-dom';
import { useRef } from 'react';

// Inside component

  const location = useLocation();
  const initialView = useRef(location.pathname);

  useEffect(() => {
    if (initialView.current === VIEWS.initial) {
      setChecked(false);
    }
  }, []);

Answer 3

const location = useLocation();
  useEffect(() => {
    
    if ((location.pathname)&&location.pathname === VIEWS.initial) {
      setChecked(false);
    }
  }, []);