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

Question

typescript

this is my code

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(....)

I am getting in console.
React Hook useMemo has an unnecessary dependency: 'match'. Either exclude it > or remove the dependency array.
I want that when the match changes and ImgCatIndx = 0. It's not clear why I'm getting a warning here. How can this be related? How to fix the warning?

Answer 1

Linter error because react-hooks/exhaustive-deps
1 rule is active. You should use useEffect instead of useMemo.
2. If you are using react router, then the match object changes when history is updated, even when passing the same parameters and correctly passing the parameters themselves. For example:

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