Reports

Adding on @Ilya Pasternak answer, for the react hook form users I've created a fully typed hook that will simplify and encapsulate the logic:

export const useReactiveTranslatedForm = <T extends AnyObject>(
  getSchemaFunction: () => ObjectSchema<T>,
  defaultValues: DefaultValues<T>
) => {
  const { i18n } = useTranslation()
  const memoizedSchema = useMemo(() => getSchemaFunction(), [i18n.language])
  const form = useForm<T>({
    resolver: yupResolver(memoizedSchema),
    defaultValues
  })
  useEffect(() => {
    if (form.formState.isSubmitted) {
      form.trigger()
    }
  }, [i18n.language])
  return form
}

79137893