TIL | useCallback() dependency array

React Hook useCallback has missing dependencies: 'onInsert' and 'value'. Either include them or remove the dependency array. If 'onInsert' changes too often, find the parent component that defines it and wrap that definition in useCallback.

아래 코드에서 onSubmit 함수를 생성하는데 useCallback 두 번째 파라미터가 비어있는 상황에서 발생하는 eslint 경고입니다.

const TodoInsert = ({ onInsert }) => {
  const [value, setValue] = useState();

  const onChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const onSubmit = useCallback((e) => {
    onInsert(value);
    setValue('');
    e.preventDefault();
  }, []); // 현재 두 번째 파라미터가 비어있는 상황

  return (
    <form className="toDoInsert" onSubmit={onSubmit}>
      <input
        placeholder="Write what you need to do"
        value={value}
        onChange={onChange}
      />
      <button type="submit">
        <GrAdd />
      </button>
    </form>
  );
};

함수 내부에서 상태 값에 의존해야 할 때는 두 번째 파라미터 자리인 배열 안에 반드시 값을 입력해야 합니다.

onChange의 경우, 기존의 값을 조회하지 않고 입력한 값을 value로 설정만 하기 때문에 빈 배열을 작성해도 문제 없습니다.

하지만 onSubmit의 경우, onInsert(id, checked)와 value(text)의 현재 상태에 따라 onInsert(value) 함수가 실행되어 value를 생성합니다.

두 번째 파라미터인 배열 자리에 작성한 값에 따라 출력되는 상태 값은 아래와 같습니다. (checked: false, id: 4, 5, 6,... 문제 없이 출력됨)

value, onInsert 모두 작성하지 않은 경우

=> text: undefined

value만 작성한 경우

=> text: 입력한 값

onInsert만 작성한 경우

=> text: undefined

새로운 값을 생성하기 위해서 필요한 (의존해야하는 기존)'값'을 배열 안에 입력하지 않으면 우리가 원하는 value가 생성되지 않습니다.

즉, useCallback Hook을 사용할 때 기존 값의 변화에 영향을 받아 새로운 함수(값)이 생성된다면 반드시 dependency array에 작성해야 합니다.