Löydä ja korjaa muistivuotoja React-sovelluksesta.
Debuggaa mahdollinen muistivuoto. Koodi: [KOODI] Oireet: - [OIREET] Konteksti: - Milloin ilmenee: [MILLOIN] - Konsolin varoitukset: [VAROITUKSET] - Selaimen muistinkäyttö: [MUISTINKAYTTO] Analysoi: 1. Mahdolliset muistivuodon lähteet 2. Cleanup-funktioiden puutteet 3. Korjausehdotukset 4. Testaaminen ja verifiointi
Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:
[KOODI][OIREET][MILLOIN][VAROITUKSET][MUISTINKAYTTO]Debuggaa mahdollinen muistivuoto.
Koodi:
function Chat({ roomId }) {
const [messages, setMessages] = useState([]);
useEffect(() => {
const socket = new WebSocket(`wss://api.com/${roomId}`);
socket.onmessage = (e) => {
setMessages(prev => [...prev, JSON.parse(e.data)]);
};
}, [roomId]);
return <MessageList messages={messages} />;
}
Oireet: Sovellus hidastuu ajan myötä
Konteksti:
- Milloin ilmenee: Navigoitaessa sivujen välillä
- Varoitukset: "Can't perform state update on unmounted component"
- Muistinkäyttö: Kasvaa jatkuvasti
Analysoi vuodon lähde ja korjaa.Korjattu koodi selityksineen.
Debuggaa useEffect-hookin ongelmia kuten turhia uudelleenajoja, puuttuvia riippuvuuksia ja muistivuotoja. Saat selkeän analyysin ja korjausehdotuksen.
KeskitasoLöydä ja korjaa suorituskykyongelmia koodissa.
EdistynytAnalysoi virheviesti järjestelmällisesti ja löydä juurisyy. Saat selkeän selityksen mistä virhe johtuu, konkreettisen korjausehdotuksen ja vinkit vastaavan ongelman välttämiseen.
AloittelijaSelaa kaikkia debuggaus prompteja tai tutustu muihin kategorioihin.