🔫 react-hook-form 트러블 슈팅 기록

how.... why... 왜 달라 왜..

이슈 현상

🚨 같은 register name으로 useWatch를 두 컴포넌트에서 실행 시 두 watch 값이 다른 현상 발생

보이는 건 올바른 값인데 submit 하니 다른 값이 찍힌다고?!?!?!

---

원인 파악

첫 번째 가설
: useWatch를 같은 register name으로 두 곳에서 사용했을 때 문제가 될 것이다.

react-hook-form github에서 useWatch 코드를 확인할 수 있다. 과연 중복 register name이 문제가 될까?

// src/useWatch.ts

export function useWatch<TFieldValues extends FieldValues>(
  props?: UseWatchProps<TFieldValues>,
) {
  const methods = useFormContext();
  const {
    control = methods.control,
    name, // register name
    defaultValue,
    disabled,
    exact,
  } = props || {};
  const _name = React.useRef(name);

  _name.current = name;

  useSubscribe({
    disabled,
    subject: control._subjects.values,
    next: (formState: { name?: InternalFieldName; values?: FieldValues }) => {
      if (
        shouldSubscribeByName(
          _name.current as InternalFieldName,
          formState.name,
          exact,
        )
      ) {
        updateValue(
          cloneObject(
            generateWatchOutput(
              _name.current as InternalFieldName | InternalFieldName[],
              control._names,
              formState.values || control._formValues,
              false,
              defaultValue,
            ),
          ),
        );
      }
    },
  });

  const [value, updateValue] = React.useState(
    control._getWatch(
      name as InternalFieldName,
      defaultValue as DeepPartialSkipArrayKey<TFieldValues>,
    ),
  );

  React.useEffect(() => control._removeUnmounted());

  return value;
}

코드를 분석해보면 다음과 같다.

1. useWatch에 넘긴 name prop으로 ref 객체를 반환해 _name에 할당한다.
2. current 프로퍼티를 name prop으로 변경한다.
3. shouldSubscribeByName 함수에 _name.current와 formState의 name을 넘겨 true면 value를 update한다.

shouldSubscribeByName 함수 코드도 살펴보자.

// src/logic/shouldSubscribeByName.ts

import convertToArrayPayload from '../utils/convertToArrayPayload';

export default <T extends string | string[] | undefined>(
  name?: T,
  signalName?: string,
  exact?: boolean,
) =>
  !name ||
  !signalName ||
  name === signalName ||
  convertToArrayPayload(name).some(
    (currentName) =>
      currentName &&
      (exact
        ? currentName === signalName
        : currentName.startsWith(signalName) ||
          signalName.startsWith(currentName)),
  );

코드를 간략히 분석해보면 다음과 같은 상황에서 true를 반환한다.

1. name(useWatch의 prop으로 넘긴 name)이 없거나
2. signalName(form에 register한 name)이 없거나
3. name === signalName, 즉 register한 이름을 useWatch에 넘겼다면 (name이 string[] 타입일 때도 마찬가지)

그러니까 register하지 않은 값으로 useWatch를 사용(이하 watch)하는 건 문제가 되겠지만, 같은 register name가 문제되는 코드는 없다. 같은 register name으로 두 곳에서 watch 해도 문제가 되지 않으므로 이 가설은 틀렸다.

---

두 번째 가설
: setValue가 정상적으로 작동하지 않는다.

자식 컴포넌트(Component B)에서만 setValue 결과가 정상적으로 반영되어 두 watch 값이 달랐다.

왜 자식 컴포넌트에서 setValue로 값을 변경해도 부모 컴포넌트의 watch 값은 변경되지 않았을까?

rhf discussions에서 나와 비슷한 사례를 발견했다.

다음과 같은 답변이 달려있었다.

useWatch와 setValue의 순서에 따라 watch가 의도대로 되지 않을 수 있고, 이게 정상이라는 답변이었다.

부모와 자식 컴포넌트에서 값이 다르게 찍힌 이유가 이거였다!!

1. 자식 컴포넌트 useWatch
2. 자식 컴포넌트 useEffect 내부 setValue
3. 부모 컴포넌트 useWatch

위 순서로 진행되었기 때문에 부모 컴포넌트와 자식 컴포넌트의 watch 값이 달랐던 것…!

실제로 setTimeout 콜백에서 setValue를 실행하니 두 컴포넌트에서 의도한 대로 값이 찍혔다.

// 자식 컴포넌트
export const ComponentB = () => {
  ...	
  useEffect(() => {
    setTimeout(() => {
      setValue("useWatchTest", getTestValue(query, room));
    }, 0);
  }, [room]);

  ...

  return (...);
};

// 부모 컴포넌트
export const ComponentA = () => {
  ...
  const useWatchTest = useWatch({ control, name: "useWatchTest" });

  const vaildateBookingsForm = () => {
    console.log("??? useWatchTest", useWatchTest);
    // ??? useWatchTest {a: 2, b: 1, c: 1} 😇 올바른 값
  };

	...

  return (...);
};

---

결론
: useWatch와 setValue를 함께 사용하려면, useWatch가 먼저 실행되도록 순서를 보장하자.

나는 부모컴포넌트는 form생성과 submit만 관여하도록 하기 위해 자식 컴포넌트에서 비동기 데이터로 default 값을 바꿔줘야 할 때 setValue를 활용했기에 이번 이슈를 겪었다. 부모 컴포넌트의 watch가 먼저 실행되어 setValue로 변경되어야 할 값이 반영되지 않았기 때문!

setTimeout 콜백에서 setValue를 실행하도록 수정하는 방법도 있겠지만, 나의 경우에는 default 값을 세팅하기 위한 setValue였기에 다음과 같이 해결했다.

// Component A
export const ComponentA = () => {

  ...

  const bookingForm = useForm<{
    useWatchTest: { a: number; b: number; c: number };
  }>({
    value: { 
	    ...DEFAULT_FORM_VALUES,
	    useWatchTest: getTestValue(room) 👍👍👍
	  }
  });
  
	...
	
  return (...);
};

돌이켜보니 자식 컴포넌트에서 default 값을 세팅하려 한 자체가 좋은 선택이 아니었던 것 같다. 부모 컴포넌트에서는 form 생성과 submit만 하고, 각각의 input 컴포넌트에서 validation과 value 핸들링을 모두 처리하고자 했다가 (너무 몰입한 나머지) default value도 세팅해버린 것....

그래도 덕분에 휘뚜루 마뚜루 잘 쓰던 react-hook-form의 내부 구현도 들여다봤다.

부모-자식 컴포넌트의 렌더링 순서도 이번 기회에 복기했다.

배울 점이 많은 이슈였다.....!!!

---

예시 코드가 궁금하신 분들께...

Component A (부모)

const DEFAULT_FORM_VALUES = {
	useWatchTest: {
    a: 1,
    b: 0,
    c: 0,
	}
}

// 부모 컴포넌트
export const ComponentA = () => {
  const { data: room, error: roomError } = useRoom(...);
  const bookingForm = useForm<{
    useWatchTest: { a: number; b: number; c: number };
  }>({
    defaultValues: DEFAULT_FORM_VALUES
  });
  const { handleSubmit, control } = bookingForm;
  const useWatchTest = useWatch({ control, name: "useWatchTest" });

  const vaildateBookingsForm = () => {
    console.log("??? useWatchTest", useWatchTest);
    // ??? useWatchTest {a: 1, b: 0, c: 0} 👿 잘못된 값 (setValue가 반영되지 않은 default value)
  };

  return (
    <form onSubmit={handleSubmit(vaildateBookingsForm)}>
      <FormProvider {...bookingForm}>
        ...
        <ComponentB />
      </FormProvider>
    </form>
  );
};

Component B (자식)

const getTestValue = (room: IRoom) => ({
	a: room['default_a'], // 2
	b: room['default_b'], // 1
	c: room['default_c'], // 1
})

// 자식 컴포넌트
export const ComponentB = () => {
  const { data: room } = useRoom(...);
  const { setValue } = useFormContext();
  const useWatchTest = useWatch({ name: "useWatchTest" });

  useEffect(() => {
    setValue("useWatchTest", getTestValue(room));
  }, [room]);

  return <>...</>;
};