Solve toast issue with InviteInvalid (#4689)

app/javascript/App.jsx

@@ -39,7 +39,7 @@ export default function App() {
       <Toaster
         position="bottom-right"
         toastOptions={{
-          duration: 3000,
+          duration: 4000,
         }}
       />
       <Footer />

app/javascript/components/home/HomePage.jsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import {
   Col, Row,
 } from 'react-bootstrap';
@@ -31,15 +31,13 @@ export default function HomePage() {
     [currentUser.signed_in],
   );
 
-  useEffect(() => {
+  // hack to deal with the fact that useEffect and toast dont work together very well
+  useMemo(() => {
     if (error === 'InviteInvalid') {
       toast.error(t('toast.error.users.invalid_invite'));
     }
   }, [error]);
 
-  // Small hack because the InviteInvalid toast won't fire unless this is here (I have no idea why)
-  toast.success('hidden', { style: { display: 'none' } });
-
   return (
     <>
       <Row className="wide-white">