If I am unmounting a React component after some seconds, is the dependency array in Useeffect still needed?

Question

I have a question concerning this particular example where I am using useEffect without dependency array. ESLint complains that it needs "navigate" inside the dependency array or else the dependency array can be removed.

Would this be a use case of useEffect without dependency array since I am unmounting the component after 3 seconds? Am I correct in thinking that we would not risk any re-render by not using a [] in this particular example?

//Home.js

export default function Home {
return <h1>Home</h1>
} 

//NotFound.js
import { useEffect} from 'react' 
import { useNavigate } from "react-router-dom";
export default function NotFound() {
  const navigate = useNavigate();

useEffect(() => {
setTimeout(() => navigate("/"), 3000)
})

return <h1>Not Found</h1>


//App.js

import "./styles.css";
import { Routes, Route } from "react-router-dom";

import NotFound from "./NotFound";
import Home from "./Home.js";
export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

It works with both the dependency array containing "navigate" and without the dependency array.

Blank Space · Accepted Answer · 2022-03-25 18:23:02Z

1

Why would we use useEffect without a dependency array? you might wanna check this one, so if you don't pass any dependency to useEffect it will rerun every time state or prop changes to avoid that you should use []. I understand that Eslint gives you warning about it for that you can check this question over here useEffect dependency array and ESLint exhaustive-deps rule. Hope you will find this answer helpful.

edited Mar 25, 2022 at 18:23

answered Mar 25, 2022 at 18:17

Blank Space

565 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

claurennt Over a year ago

Thank you for the links, it's clearer now!

doesliz · Accepted Answer · 2022-03-25 18:10:08Z

0

You will risk re-render because, by default, the useEffect hook is triggered after each re-display. And with an array of dependencies, it runs once and then runs again with each change of the transmitted dependency. An empty array leaves no conditions for restarting the hook, ensuring that the message is received only when it is displayed for the first time. In this case use [].

answered Mar 25, 2022 at 18:10

doesliz

1

Collectives™ on Stack Overflow

If I am unmounting a React component after some seconds, is the dependency array in Useeffect still needed?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related