Unexpected behaviour of useReducer hook in React JS

Question

Can anyone just let me know why I am getting two console prints here?

Here below is my code:

import React, {useReducer} from 'react';

const Counter = () => {

    const initialState = { count: 0 }

    const reducer = (state, action) => {
      switch(action.type) {
        case 'INC':
            console.log(state)               <------- It is getting print twice
            return {
                count: state.count++
            }
        case 'DEC':
            console.log(state)
            return {
                count: state.count--
            }
        default:
            
            return {
                count: state.count
            }
    }
}

const [componentState, dispatch] = useReducer(reducer, initialState);

return (
    <>
        {componentState.count}
        <button onClick={() => dispatch({type: 'INC'})}>Increase</button>
        <button onClick={() => dispatch({type: 'DEC'})}>Decrease</button>
    </>
)
}

export default Counter;

Answer 1

it's due to strict mode, In index.js try to remove react strict mode. you will get only one console,

Note: this would be called only once on production