<ESLint> "arrow function expected no return value" with clean-up function in useEffect

문제

import { useEffect, useState } from 'react';

const useDebounce = (value: string, delay: number = 800, regex: boolean = false) => {
  const [debouncedValue, setDebouncedValue] = useState<string>(value);

  useEffect(() => {
    const searchRegex = /^[가-힣a-zA-Z0-9]*$/;

    if (value && regex === true && !searchRegex.test(value)) {
      console.log('허용되지 않은 값입니다.');
      🔥 return; // 문제지점
    }

    const id = setTimeout(() => {
      console.log('setting new timeout');
      console.log(value);
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(id);
      console.log('Clear Timeout');
    };
  }, [value, delay, regex]);

  return debouncedValue;
};

export default useDebounce;

// setTimeout을 초기화 하기 위해 useEffect의 cleanUp 로직 이용

해결 방법

해당 ESLint 에러는 return에 무조건 반환값이 들어와야함.에 근거하여 발생하는 에러입니다.

import { useEffect, useState } from 'react';

const useDebounce = (value: string, delay: number = 800, regex: boolean = false) => {
  const [debouncedValue, setDebouncedValue] = useState<string>(value);

  useEffect(() => {
    const searchRegex = /^[가-힣a-zA-Z0-9]*$/;

    if (value && regex === true && !searchRegex.test(value)) {
      console.log('허용되지 않은 값입니다.');
      👍 return null; // return; 이 아닌 return null;으로 작성함으로써 해결
    }

    const id = setTimeout(() => {
      console.log('setting new timeout');
      console.log(value);
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(id);
      console.log('Clear Timeout');
    };
  }, [value, delay, regex]);

  return debouncedValue;
};

export default useDebounce;
// setTimeout을 초기화 하기 위해 useEffect의 cleanUp 로직 이용

아무것도 return하지 않으려고 기존에 return;으로 끝냈었으나, 이렇게 처리함으로써 eslint 에러가 발생했습니다.

return null;로 변경 후, 에러가 해결되었습니다.