React Hook useEffect contains a call to & missing dependencies

Question

So we have a an issue here when running NPM start, this is what I have received warnings when compiling, can't for the life of me figure this one out, this is my first ever question after years of using StackOverflow. I have now included my app.js and index.js, I'm sure i am doing something else wrong too as when I include //eslint-disable-next-line to all pages mentioned the localhost shows a white screen.

 React Hook useEffect contains a call to 'setNewDevice'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [finishConfirmation] as a second argument to the useEffect Hook.

const Confirmed = props => {
  const [newDevice, setNewDevice] = useState(false);
  const [complete, setComplete] = useState(false);
  const db = firebase.firestore();

  useEffect(() => {
    let email = window.localStorage.getItem("confirmationEmail");
    if (!email) {
      setNewDevice(true);
    } else {
      finishConfirmation(email);
    }
  });

React Hook useEffect has missing dependencies: 'moreInfoComplete', 'requestNotifications', and 'userState.userData.firstName'. Either include them or remove the dependency array.

const Dashboard = () => {
  const [firstName, setFirstName] = useState(null);
  const [lastName, setLastName] = useState(null);
  const [moreInfoComplete, setMoreInfoComplete] = useState(false);
  const { userState, userDispatch } = useContext(UserContext);
  const { sendMessage } = useContext(ToastContext);
  const db = firebase.firestore();

  useEffect(() => {
    if (
      (moreInfoComplete || userState.userData.firstName) &&
      "Notification" in window &&
      Notification.permission === "default"
    ) {
      requestNotifications();
    }
  }, []);

React Hook useEffect has missing dependencies: 'db', 'userDispatch', and 'userState.userData.pushTokenWeb'. Either include them or remove the dependency array.


const MainRouter = () => {
  const [initializationComplete, setInitComplete] = useState(false);
  const { userState, userDispatch } = useContext(UserContext);
  const userId = userState.userId;
  const db = firebase.firestore();

  useEffect(() => {
    sendPushNotification({
      token: userState.userData.pushTokenWeb,
      title: "Boop",
      body: "shoop"
    });

App.js

import React from "react";
import { ToastProvider } from "./contexts/toastContext";
import { UserProvider } from "./contexts/userContext";
import MainRouter from "./MainRouter";

const App = () => {
  return (
    <ToastProvider>
      <UserProvider>
        <MainRouter />
      </UserProvider>
    </ToastProvider>
  );
};

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();