React.StrictMode renders the page twice to debug purposes. I have a prompt() in a page, which is running twice because of this, and I've been trying to work around it, since I'd like to keep StrictMode.
I tried this, but didn't work:
useEffect(() => {
let identified = false;
if (!identified) {
let pName = prompt("Insert name");
setPlayerName(pName);
}
return () => {
identified = true;
}
}, [])
Also tried this:
const [playerName, setPlayerName] = useState('');
useEffect(() => {
if (!playerName) {
let pName = prompt("Insira name");
setPlayerName(pName);
}
}, [])
And this...:
const [playerName, setPlayerName] = useState('');
useEffect(() => {
if (!playerName) {
let pName = prompt("Insira name");
return () => {
setPlayerName(pName);;
}
}
}, [])
but can't get it right. What's the proper way to do it?
Here you can find info on how to do this:
Effects that should only run once can use a ref.
const didLogRef = useRef(false);
useEffect(() => {
// In this case, whether we are mounting or remounting,
// we use a ref so that we only log an impression once.
if (didLogRef.current === false) {
didLogRef.current = true;
SomeTrackingAPI.logImpression();
}
}, []);
In your scenario:
const didPromptRef= useRef(false);
useEffect(() => {
if (didPromptRef.current === false) {
didLogRef.current = true;
const pName = prompt("Insert name");
setPlayerName(pName);
}
}, []);