React setState가 비동기라서 값이 바로 반영 안 되는 문제

Question

React setState가 비동기라서 값이 바로 반영 안 되는 문제 관련 문제입니다.

아래 코드에서 예상과 다르게 동작합니다:

const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetchData().then(res => {
    setData(res)
    setLoading(false)
  })
}, [])

개발 환경에서는 잘 되는데 프로덕션 빌드 후 간헐적으로 데이터가 null인 상태로 렌더링됩니다. React 버전은 19입니다.

김영삼 · Accepted Answer

이 문제는 비동기 상태 업데이트 타이밍 이슈입니다.React 19에서는 Automatic Batching이 강화되어 두 개의 setState가 한 번의 리렌더링으로 처리될 수도, 아닐 수도 있습니다.해결 방법// 방법 1: 하나의 상태로 합치기 const [state, setState] = useState({ data: null, loading: true }) useEffect(() => { fetchData().then(res => { setState({ data: res, loading: false }) }) }, []) // 방법 2: useReducer 사용 const [state, dispatch] = useReducer(reducer, { data: null, loading: true })상태를 하나로 합치면 항상 원자적으로 업데이트됩니다.

서버지기영호 · Answer

정확히 이 문제였습니다. 감사합니다!

댓글 2