useState에 종속성 배열이 없는 이유는 무엇입니까?

다음은 전달된 소품을 기반으로 사용자 지정 후크의 상태를 업데이트하는 방법입니다.

const useCustomHook = (prop: number) => {
   const [state, setState] = useState(prop);

   // this is how I'm currently updating state
   // when the props change.
   useEffect(() => {
      setState(prop);
   }, [prop]);

   return state;
};

// it's usage
const [localState, setLocalState] = useState(0);
const hookState = useCustomHook(localState);

그러나 위 접근 방식의 문제점은 사용자 지정 후크의 return state가 먼저 실행되고 useEffect 콜백을 실행하기 전에 이전 값을 반환하고 후크의 상태를 업데이트한 다음 새 상태를 반환한다는 것입니다. 이렇게 하면 기본 구성 요소가 두 번 렌더링됩니다.

이제 두 번 렌더링되면 큰 문제가 무엇인지 물을 수 있습니다. 버그로 이어질 수 있습니다. 예를 들어 사용자 지정 후크는 0으로 내려가는 setInterval을 구현하는 카운트다운일 수 있지만 setLocalState(5)로 재설정하면 useCustomHook는 즉시 5가 아닌 0을 반환합니다.

전달된 값이 변경되었는지 여부에 따라 useState가 업데이트된 값을 반환하지 않는 이유는 무엇입니까? 또는 동작을 변경하지 않으려는 경우 useEffect와 같은 종속성 배열이 없는 이유는 무엇입니까?

시간 내 줘서 고마워.