react-hook-form defaultValue 초기값 설정 에러사항

가끔, react-hook-form을 사용할 때 defaultValue를 설정하더라도, 렌더링이 되는 부분에서, 오류가 생깁니다.

상황

• useMemo를 사용하여, 다국어 처리를 진행함.
• 이 함수는 useForm에 defaultValue의 한 요소와 관련이 있음.

이유

현지화 함수(t) 지연: 라벨을 설정하기 위해 현지화 함수 t를 사용하고 이 기능이 비동기이거나 초기 렌더링 중에 아직 준비되지 않은 일부 외부 상태에 의존하는 경우 , 문제의 원인이 될 수 있습니다. 배열은 초기 렌더링에서 예상한 대로 객체로 채워지지 않을 수 있습니다.

-> 렌더링 이슈 문제

해결 방법

const gptModelWatch = watch('gptModel');

return (
  <GptMessage
    model={gptModelWatch?.value} // Use optional chaining here
    remainingRequestCounts={remainingRequestCounts}
  />
);

const [defaultGptModel, setDefaultGptModel] = useState();

useEffect(() => {
  if (gptOptions.length > 0) {
    setDefaultGptModel(gptOptions[0]);
  }
}, [gptOptions]);

// Use defaultGptModel in your useForm

주의사항

useForm을 무조건적으로 최상위에서 호출하고, 필요한 데이터가 준비되지 않았을 경우 폼을 렌더링하는 대신 로딩 컴포넌트를 반환하는 것입니다. 이는 폼을 초기화하는 코드와 실제로 폼을 렌더링하는 코드 사이에 조건문을 사용하는 것을 의미합니다.

-> React의 Hook 규칙을 위반하기 때문입니다. React의 모든 훅은 컴포넌트의 모든 렌더링에서 동일한 순서로 호출되어야 합니다. 따라서 useForm과 같은 Hook을 if문 또는 다른 조건문 안에서 호출할 수 없습니다.