The output of the code below when oldRunIn is undefined
is as expected when the effect is triggered:
Effect is running
setState is running
However, the next time useEffect runs with the state variable runInArrow
defined, which is referred to as oldRunInArrow
in the setState function the output is:
Effect is running
setState is running
setState is running
setState is running
How is it possible that the effect runs only one time but the setState runs 3 times?
const [runInArrow, setRunInArrow] = useState<mapkit.PolylineOverlay[] | undefined>(undefined);
useEffect(() => {
const trueRunIn = settings.magneticRunIn + magVar;
const boundingRegion = region.toBoundingRegion();
const style = new mapkit.Style({
lineWidth: 5,
lineJoin: 'round',
strokeColor: settings.runInColor,
});
const newRunInArrow = createArrow(boundingRegion, trueRunIn, style);
console.log('Effect is running');
setRunInArrow(oldRunIn => {
// This runs too many times when oldRunIn aka runInArrow is defined
console.log('setState is running');
if (oldRunIn) map.removeOverlays(oldRunIn);
return newRunInArrow;
});
map.addOverlays(newRunInArrow);
}, [magVar, map, mapkit, region, settings.magneticRunIn, settings.runInColor, settings.showRunIn]);
To understand why I'm using a function to set state see this post
Edit:
This is strange. if I remove if (oldRunIn) map.removeOverlays(oldRunIn);
it works as expected. However if I change it to if (oldRunIn) console.log('oldRunIn is defined');
it still runs multiple times. I'm thoroughly confused.
if (oldRunIn) map.addAnnotations([]);
does not run multiple times.
if (oldRunIn) console.log('test');
does run multiple times.
This runs multiple times (6 times per use effect) always:
setRunInArrow(oldRunIn => {
console.log('setState is running');
console.log('test');
return newRunInArrow;
});
This does not run multiple times:
setRunInArrow(oldRunIn => {
console.log('setState is running');
return newRunInArrow;
});
Edit 2:
Reproducible example. Click the button. You don't even need to have if (oldState) console.log('Old state');
you can just put in 2nd console.log and it will change the behavior.
import { FunctionComponent, useState, useEffect } from 'react';
export const Test: FunctionComponent<> = function Test() {
const [state, setState] = useState<number | undefined>(undefined);
const [triggerEffect, setTriggerEffect] = useState(0);
useEffect(() => {
console.log('effect is running');
setState(oldState => {
console.log('setState is runnning');
if (oldState) console.log('Old state');
return 1;
});
}, [triggerEffect]);
return <>
<button onClick={() => setTriggerEffect(triggerEffect + 1)} type="button">Trigger Effect</button>
</>;
};
Edit 3:
I've reproduced this by putting this code into another nextJS project. I'm guessing it has to do with nextJS.
Edit 4:
It's not NextJS. It's wrapping it in React.StrictMode. Here is a sandbox. Why?
Edit 5:
As the answer pointed out the issue is due to StrictMode intentionally running code twice. It should not run useReducer twice per the docs (this is an issue with "react-hooks/exhaustive-deps" from my other question). Here is a UseReducer demo, try with and without StrictMode. It also runs twice. Seems like it needs to be pure too:
import { useState, useEffect, useReducer } from 'react';
function reducer(state, data) {
console.log('Reducer is running');
if (state) console.log(state);
return state + 1;
}
export const Test = function Test() {
const [state, dispatch] = useReducer(reducer, 1);
const [triggerEffect, setTriggerEffect] = useState(0);
useEffect(() => {
dispatch({});
}, [triggerEffect]);
return (
<>
<button onClick={() => setTriggerEffect(triggerEffect + 1)} type="button">
Trigger Effect
</button>
</>
);
};
const Home = () => (
<React.StrictMode>
<Test></Test>
</React.StrictMode>
);
export default Home;