no-misused-promises checksVoidReturn

제가 처한 상황은 이렇습니다.
onSubmit에 콜백으로 넣어둔 handleSubmit 함수가 비동기 작업을 해야했기에 async로 감쌌더니 eslint가 no-misused-promises 에러를 발생시켰습니다.

코드:

	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (newDisplayName !== "" && currentUser?.displayName !== newDisplayName) {
      const response = await updateProfile(authService.currentUser!, {
        displayName: newDisplayName,
      });
    }
  };

https://typescript-eslint.io/rules/no-misused-promises/
에 따르면 no-misused-promises는 프로미스를 다루지 않도록한 곳에서 프로미스를 다룰 때 발생한다고 합니다.

제 코드에서 문제점은
1. onSubmit의 콜백함수에 async로 래핑하는 것이 잘못이었다.
2. 비동기 작업은 에러핸들링을 포함해야한다.

다음은 문제점을 해결한 코드입니다:

	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
	// 핸들러 함수의 async를 제거하고 비동기 작업이 포함된 부분을 따로 래핑합니다.
    const updateDisplayName = async () => {
      await updateProfile(authService.currentUser!, {
        displayName: newDisplayName,
      });
    };

    if (newDisplayName !== "" && currentUser?.displayName !== newDisplayName) {
      // 호출하면서 에러핸들링을 해줍니다.
      updateDisplayName().catch((error) => {
        console.log(error);
      });
    }
  };

읽으시는 분들의 문제 해결에도 도움이 된다면 좋겠습니다.