const getReducer = () => {
console.log('getReducer called')
return reducer
}
const reducer = (state, action) => {
switch (action.type) {
case 'ADD':
return state+1;
default:
return state
}
}
function App() {
const [state, dispatch] = useReducer(getReducer(), 0)
console.log(state)

useEffect(() => {
dispatch({
type: 'ADD'
})
setTimeout(
() => {
dispatch({
type: 'ADD'
})
}, 1000
)
}, []);
return <div></div>
}


현재 겪고 있는 문제에서 핵심만 추출해서 구현해봤음.
본인이 생각하기엔 useReducer(getReducer(), 0) 초기화 과정에 의하여 getReducer()이 최초로 한번만 호출돼서 reducer을 반환하고 호출될 일 없어야 할 것 같은데, 렌더링 될 때마다 실행되는데 왜 이럼?



[출력값]

App.js:16 getReducer called

App.js:29 0

App.js:16 getReducer called

App.js:29 1

App.js:16 getReducer called

App.js:29 2