[React] Event Pooling

Intro

React V16으로 웹 서비스를 개발하는데 input tag의 onChange의 이벤트가 null로 오는 경우를 발견했습니다.

Synthetic Event와 관련된 이슈로 브라우저 기반의 nativeEvent와는 다르게 동작하는 듯하빈다.

React 문서를 확인하니 React 16 이하 버전에서는 Event Pooling 이라는 것을 사용하고 이 Pooling 이 문제를 야기합니다.

이벤트 풀링?

The SyntheticEvent objects are pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event handler has been called

React 문서를 확인하면, Synthetic Event는 Pooled되는데 Pooled는 곧 Event 호출 뒤 Null로 설정되는 것을 말하는 것 같습니다.

React 문서에서는 아래와 같은 예제로 설명하고 있습니다.

function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

Event Trigger 후에 Nullifying을 막기 위해 e.persist()를 사용하는 것 같습니다.

function handleChange(e) {
  // Prevents React from resetting its properties:
  e.persist();

  setTimeout(() => {
    console.log(e.target.value); // Works
  }, 100);
}

Side Effect

Event Pooling은 React 16 이하 버전에서 존재하고, 17 버전부터는 다른 방식의 이벤트 핸들링을 적용하여 위와 같은 이슈가 발생하지 않는 것 같습니다.

때문에, 위와 같이 e.persist() 의 사용은 React 버전을 올리거나 하는 상황에서 불필요한 사이드 이펙트나 legacy 코드로 남게될 가능성이 높습니다.

해결책?

handleInputChangeCopy = (e) => {   
    const val = e.target.value;
    setState(() => val);
}

handleInputChangePersist = (e) => {
    e.persist();
    setState(() => e.target.value)
}

Stackoverflow를 확인한 결과, 위와 같은 두 가지 방법을 찾을 수 있었습니다.