setState 콜백을 제거하는 것이 잘못된 설계입니까?

React 클래스 구성 요소를 사용할 때 인스턴스 메서드가 있습니다 setState(updater[, callback]) .
setState 업데이트가 적용된 후 실행되도록 보장되는 콜백입니다.

그러나 setState 후크에서 반환된 useState() 메서드를 사용하면 더 이상 callback가 없습니다.
setState(updater[, callback])setStateuseState() 후크로 반환되는 것을 비교해 봅시다.

// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  this.setState(nextState, () => {
    // step 2. call API
  });
}
//...



const [state, setState] = useState();
useEffect(() => {
  // step 2. call API
}, [state]);

// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...

const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  setState(nextState);
}


차이점이 보이시나요?

버튼 클릭 이벤트가 발생하면 상태 업데이트와 API 호출이라는 두 가지 논리 부분이 있습니다.

전자의 경우 논리 코드의 두 부분이 함께 구성되어 실행 순서와 코드 작성 순서가 동일합니다.

후자의 경우 논리의 두 부분이 서로 다른 위치로 분할되며 상태를 업데이트하는 논리는 이벤트 핸들러에 있고 호출 API에 대한 논리는 useEffect()에 배치됩니다. 그리고 실행 순서와 읽기(쓰기) 순서가 같지 않습니다.

어떤 사람들은 https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react과 같이 나와 같은 견해를 가지고 있습니다.

그래서 누군가가 useStateCallback 후크를 구현합니다.

어떻게 생각해?

좋은 웹페이지 즐겨찾기