React Memory Usage Deploying onto Heroku - reactjs

Question

I have recently completed a MERN stack web application and trying to deploy it on to Heroku. It looks like it's deployed but when I try to login or create user, it says 404 not found /graphql. When running heroku log --tails, it says after the post the app crashes due to memory usage over quota.
So I ran it locally and used DevTools to look at the memory usage. I noticed there were huge spikes for login, login, searching because it loops and populates the page with items for api. I am currently trying to refactor the searched and use react.lazy to only show what's in viewpoint of user. But as for login and signup, I really have no idea how to refactor it to use less memory.
This is my code for the frontend of login:
LoginPage.js
import { Link } from 'react-router-dom';
import { useMutation } from '#apollo/client';
import { authService } from '../utils/auth';
import { LoginForm } from '../components/Login/LoginForm'
import { Alert } from 'react-bootstrap';
import { LOGIN_USER } from '../utils/mutations';
export const Login = (props) => {
const [formState, setFormState] = useState({ email: '', password: '' });
const [login, { error }] = useMutation(LOGIN_USER);
const handleSubmit = (e) => {
const { name, value } = e.target;
setFormState({
...formState,
[name]: value,
});
};
// submit form
const handleFormSubmit = async (e) => {
e.preventDefault();
console.log(formState);
if (!formState.email || !formState.password) {
alert('Failed to submit form! Please fill all requested fields.');
document.location.replace('/');
}
try {
const { data } = await login({
variables: { ...formState },
});
authService.login(data.login.token)
} catch (e) {
console.log(e);
}
// clear form values
setFormState({
email: '',
password: '',
});
};
return (
<> {authService.loggedIn() ? (
<p>
Success! You may now head{' '}
<Link to="/">back to the homepage.</Link>
</p>
) : (
<LoginForm
onSubmit={handleFormSubmit}
handleSubmit={handleSubmit}
handleFormSubmit={handleFormSubmit}
formState={formState}
/>
)}
{error && (
<Alert severity='error'>
{error.message}
</Alert>
)}
</>
);
};
export default LoginForm;
LoginForm.js
import React from 'react'
import { Form, Button } from 'react-bootstrap';
export const LoginForm = ({handleFormSubmit, handleSubmit, formState}) => {
return (
<Form onSubmit={handleFormSubmit} style={{padding:'15%', justifyContent:'center'}}>
<Form.Group>
<Form.Label htmlFor='email'>Email</Form.Label>
<Form.Control
type='email'
placeholder='Your email'
name='email'
onChange={handleSubmit}
value={formState.email}
required
/>
<Form.Control.Feedback type='invalid'>Email is required!</Form.Control.Feedback>
</Form.Group>
<Form.Group>
<Form.Label htmlFor='password'>Password</Form.Label>
<Form.Control
type='password'
placeholder='Your password'
name='password'
onChange={handleSubmit}
value={formState.password}
required
/>
<Form.Control.Feedback type='invalid'>Password is required!</Form.Control.Feedback>
</Form.Group>
<Button style={{margin:'5%', justifyContent:'center', textAlign:'center'}}
disabled={!(formState.email && formState.password)}
type='submit'
variant='success'>
Submit
</Button>
</Form>
)
}
package.json in client
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.2.0",
"npm": "6.14.5"
},
"dependencies": {
"#apollo/client": "^3.7.3",
"#apollo/react-hooks": "^4.0.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-cache-persist": "^0.1.1",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"apollo-link-rest": "^0.9.0",
"axios": "^1.2.2",
"bootstrap": "^5.2.3",
"graphql": "^15.8.0",
"http-proxy-middleware": "^2.0.6",
"jwt-decode": "^3.1.2",
"qs": "^6.11.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-moment": "^1.1.3",
"react-router-dom": "^6.7.0",
"react-scripts": "^5.0.1",
"react-use": "^17.4.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "index.js"
}
package.json in server
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"watch": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.11.1",
"axios": "^1.2.5",
"bcrypt": "^5.1.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"graphql": "^16.6.0",
"jsonwebtoken": "^9.0.0",
"mongoose": "^6.9.0",
"nodemon": "^2.0.20"
}
}
Package.json in root
{
"name": "foodgenie",
"version": "1.0.0",
"description": "",
"main": "server/server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "cd server && npm start",
"start:dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
"install": "cd server && npm i && cd ../client && npm i",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "Chris H",
"license": "ISC",
"dependencies": {
"concurrently": "^7.6.0",
"dotenv": "^16.0.3",
"if-env": "^1.0.4",
"nodemon": "^2.0.20"
}
}
Procfile
web: npm run start:dev
Any advice or feedback will be greatly appreciated. Thank you.