React Use Reducer Firing twice - reactjs

Question

My issue is when Im' trying to toggle boolean value within my useReducer function, by doing this it is causing the issue of the value changing back to the original:
function reducerBalls(state: any, action: any) {
let newState;
let item;
switch (action.type) {
case ACTIONS.INIT:
return action.balls;
case ACTIONS.SELECTED:
newState = [...state];
item = newState[action.index] ;
item.active = !item.active;
return newState;
default:
return state;
}}
Here is the dispatch event
function ballCheckboxHandler(ball: lotteryBalls, event: any) {
if(event.target.checked) {
return dispatch({type: ACTIONS.SELECTED, index: ball.number});
}
if(event.target.checked === false) {
return dispatch({type: ACTIONS.UNSELECTED, index: ball.number});
}
}
Now I know react.StrictMode is causing this and live mode they say this issue wont happen, but the problem comes down to the development of it.

Answer 1

You are shallow cloning the array, but then you mutate the actual object, so the item itself doesn't re-render.
Clone the object newState[action.index] by using spread, and change the active property:
function reducerBalls(state: any, action: any) {
switch (action.type) {
case ACTIONS.INIT:
return action.balls;
case ACTIONS.SELECTED:
const newState = [...state];
newState[action.index] = {
...newState[action.index],
active: !newState[action.index].active
};
return newState;
default:
return state;
}
}
I would also change the way that the action works to make it a bit simpler:
function reducerBalls(state: any, action: any) {
switch (action.type) {
case ACTIONS.INIT:
return action.balls;
case ACTIONS.SELECTED:
const newState = [...state];
newState[action.index] = {
...newState[action.index],
active: action.selected // use the selected value
};
return newState;
default:
return state;
}
}
function ballCheckboxHandler(ball: lotteryBalls, event: any) {
return dispatch({
type: ACTIONS.SELECTED,
index: ball.number,
selected: event.target.checked // selected is the checked state of the event
});
}