React Hook useMemo has an unnecessary dependency: 'match'. Either exclude it >or remove the dependency array?

Question

[miliko mikoyan]

это мой код

const Head: FC<{ match: faceMatch<{}> }> = ({ match }) => {
      const [arrProd, setArrProd] = useState<JSX.Element[]>([]);
      const [ImgCatIndx, setImgCatIndx] = useState<number>(0);
      const [resError, setResError] = useState<string>("");
      useMemo(() => {
        setImgCatIndx(0);
>      }, [match]);//warning React Hook useMemo has an unnecessary dependency
    
      useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;
        document.title = `Hat Jacket Pants Shoes Suit | Amasia`;
        (async () => {
          setArrProd([]);
          setResError("");
          try {
            const Res = await fetch(
              `https://foo0022.firebaseio.com/New/${headcateg[ImgCatIndx]}.json`,
              {
                signal: signal
              }
            );
            if (!Res.ok) {
              throw new Error("Page Not Found 404");
            }
            const ResObj = await Res.json();
            const ResArr = await Object.values(ResObj).flat();
            await setArrProd(
              ResArr.map(
                ({
                  to,
                  id,
                  price,
                  src,
                  title,
                  sold,
                  shipping
                }: faceProductList) => (
                  <Fragment key={id}>
                    <NavLink to={to}>
                      <img
                        src={`/${src[0]}`}
                        alt={title}
                        height={"220px"}
                        width={"220px"}
                      />
                      <span>{price}</span>
                      <span>{shipping}</span>
                      <span>{sold}</span>
                    </NavLink>
                  </Fragment>
                )
              )
            );
          } catch (error) {
            if (error.name !== "AbortError") {
              setResError(error.message);
            }
          }
        })();
        return () => {
          abortController.abort();
        };
      }, [ImgCatIndx]);
    
      if (resError !== "") {
        return <HandlerErr error={resError} />;
      } else if (!arrProd.length) {
        return <Loding />;
      }
    return(....)

Я получаю в консоли.

React Hook useMemo имеет ненужную зависимость: 'match'. Либо исключите его>, либо удалите массив зависимостей.

Я хочу, чтобы при изменении совпадения и ImgCatIndx = 0. неясно, почему я получаю предупреждение здесь. Как это может быть связано? Как исправить предупреждение?

Answer 1

[Антон Спирин]

Ошибка линтера, так ка активно правило react-hooks/exhaustive-deps
1. Вам следует использовать useEffect, вместо useMemo.
2. Если вы используете react router, то объект match меняется при обновлении history, даже при передаче тех же параметров и правильно передавать сами параметры. Например:

useEffect(() => {
  doSomething();
}, [match.params.id]);