1

While the NotFound component is being loaded, I want to process the method I sent as props by giving a value as a parameter. I also used useEffect for this. As it stands, I get what I want but I get the following warning and I couldn't find how to get rid of it!!!

import React, { useEffect } from "react";
import NotFound404 from "../assets/images/nfx404.png";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { Screen404ButtonsVariant } from "../Helpers/Variants";
import { FaHandPointLeft } from "react-icons/fa";

const NotFound = ({ chageFooterColorsHandler }) => {
  useEffect(() => {
    chageFooterColorsHandler("#0e37633c", "#0E3763");
  }, []);

  return (
    <div className="notfound-container">
      <img src={NotFound404} alt="notfoundpage" />
      <motion.div
        className="div-navigation-button"
        variants={Screen404ButtonsVariant}
        initial="hidden"
        animate="visible"
      >
        <Link to="/" className="btn btn-outline-navy">
          <span>
            <FaHandPointLeft
              onClick={() =>
                chageFooterColorsHandler(
                  "rgba(220, 20, 60, 0.3)",
                  "rgba(220, 20, 60, 1)"
                )
              }
            />
          </span>
        </Link>
      </motion.div>
    </div>
  );
};

export default NotFound;

  Line 11:6:  React Hook useEffect has a missing dependency: 'chageFooterColorsHandler'. Either include it or remove the dependency array. If 'chageFooterColorsHandler' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

How can I solve this warning in React.js? Thank you!

Cihat Turgut
  • 11
  • 1
  • 1
    Does this answer your question? [How to fix missing dependency warning when using useEffect React Hook](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) – Taxel Nov 15 '22 at 10:20
  • 1
    Just add this line `// eslint-disable-next-line react-hooks/exhaustive-deps` as comment before the `useEffect` dependency array line. – Maniraj Murugan Nov 15 '22 at 10:41

1 Answers1

0

When react/typescript complains about dependency arrays, its expecting for you to put the dependency(dependencies) it mentions into the array that proceeds the useEffect functionality. With your example it wants this:

 useEffect(() => {
    chageFooterColorsHandler("#0e37633c", "#0E3763");
  }, [chageFooterColorsHandler]);

However, I often believe that its just plain wrong about this error. In your case its wanting to check for changes with your function so it can rerun useEffect on those changes, which just seems silly! Because that looks like a TypeScript error, you can also always turn the react-hooks/exhaustive-deps to off in your tsconfig.

Vayne Valerius
  • 158
  • 1
  • 9
  • First of all, thank you very much for your interest. But when I do it this way, " useEffect(() => { chageFooterColorsHandler("#0e37633c", "#0E3763"); }, [chageFooterColorsHandler]); " which I've tried before, I get stuck in an infinite loop. And my computer locks automatically (: – Cihat Turgut Nov 15 '22 at 10:31
  • Should have thought it would loop you infinitely! This is why I think its a silly error! You do what it wants and it puts you in an infinite loop. Functions should never be dependencies! Whats happening is you run the function, useEffect sees you've run the function and reruns useEffect because the function is a dependency. Honestly turn off react-hooks/exhaustive-deps in your tsconfig instead. :) – Vayne Valerius Nov 15 '22 at 10:41
  • Thanks Vayne! I disabled for this line! Take care! – Cihat Turgut Nov 15 '22 at 10:49