28 lines
994 B
React
28 lines
994 B
React
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { Typography } from "@material-ui/core";
|
||
|
|
|
||
|
|
export const MemoryUsage = () => {
|
||
|
|
const [memoryUsage, setMemoryUsage] = useState("Loading...");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
function updateMemoryUsage() {
|
||
|
|
if (performance.memory) {
|
||
|
|
const memoryInfo = performance.memory;
|
||
|
|
const usedMB = (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2);
|
||
|
|
setMemoryUsage(`Used: ${usedMB} MB`);
|
||
|
|
} else {
|
||
|
|
setMemoryUsage("Memory info not supported in this browser.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const interval = setInterval(updateMemoryUsage, 1000);
|
||
|
|
return () => clearInterval(interval); // Cleanup on unmount
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Typography color="textPrimary" component="div">
|
||
|
|
<h2>Client-Side Memory Usage</h2>
|
||
|
|
<p style={{ fontSize: "1.2em", fontWeight: "bold" }}>{memoryUsage}</p>
|
||
|
|
</Typography>
|
||
|
|
);
|
||
|
|
};
|