I have a puzzle game and it shows an alert once you are finished and then a confirm window asking if you want to solve another one. The problem that it shows this twice. I tried changing my index.js and remove the StrictMode but then it shows me "ResizeObserver loop completed with undelivered notifications." warning and the app doesn’t work like it was with StrictMode
my App.js
import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import catImg from "./cat.jpeg";
import elephantImg from "./elephant.jpg";
import carImg from "./car.jpg";
import kidsImg from "./kids.jpg";
import sheepImg from "./sheep.png";
const puzzleImages = [catImg, elephantImg, carImg, kidsImg, sheepImg];
function App() {
const [imageIndex, setImageIndex] = useState(getRandomIndex());
function getRandomIndex() {
return Math.floor(Math.random() * puzzleImages.length);
}
const handlePlayAgain = () => {
const confirmPlayAgain = window.confirm("Do you want to play another puzzle?");
if (confirmPlayAgain){
const newIndex = getRandomIndex();
setImageIndex(newIndex);
}
else {
alert("Thank you for playing")
}
};
const handleSolved = () => {
alert("Good job!");
handlePlayAgain();
};
return (
<>
<h2 className="tag">Un-puzzle the pieces</h2>
<JigsawPuzzle
imageSrc={puzzleImages[imageIndex]}
rows={2}
columns={2}
onSolved={handleSolved}
className="jigsaw-puzzle"
/>
</>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
2
Answers
The issue you are facing may be related to React StrictMode.
"ResizeObserver loop completed with undelivered notifications," warning could be caused by some side effects that are not allowed within the StrictMode.
One approach is solving this is to use
setTimeout
to delay the execution of the code that causes the issue. You can modify yourhandlePlayAgain
function like thisRemove StrictMode from your
index.js
; you can find more information about it. hereThis is how your
index.js
should look like