react-hooks/exhaustive-deps linting 경고를 무시하지 마십시오.

이 게시물은 기술 회의에서 동료가 공유한 이 대화github issue에서 영감을 받았습니다. 여기에서 논의된 다른 많은 사례가 있으므로 읽을 가치가 있습니다.

이론적 해석

반응 후크로 작업하는 동안 이 보푸라기 경고react-hooks/exhaustive-deps가 표시되는 상황에 처했을 것입니다. 배열에 종속성을 추가하려고 하면 무한 루프 또는 예기치 않은 동작이 발생할 수 있습니다.

예를 들어:

구성 요소에 상태 카운트가 있고 한 번만 증가시키려고 합니다. 아마 이런식으로 쓰실겁니다.

  useEffect(() => {
    setCount(count + 1);     
  }, []);

이렇게 하면 다음과 같은 경고가 표시됩니다React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array.

쉽게 종료할 수 있습니다. 즉, 규칙을 비활성화하여 오류를 무시하는 것입니다.
// eslint-disable-next-line

useEffect(() => {
  setCount(count + 1);
  // eslint-disable-next-line
}, []);

효과가 있었어요 - 잘했어요!!! 👏 하지만 잠깐;


useEffect의 디자인은 당신이 그것에 맞서도록 강요합니다. 물론 이 문제를 해결할 수 있지만 기본값은 이러한 경우를 처리하도록 유도하는 것입니다. 이러한 경고를 비활성화하는 대신 종속성 배열 요구 사항을 수용할 수 있는 방법을 찾는 것이 좋습니다.

대부분의 상황에서 실제로 가능하며 여기서는 매우 일반적인 사용 사례에 대해 이야기하겠습니다.

상태 종속성

앞의 예에서 카운트가 더 이상 종속성이 아니므로 setCount 메서드의 콜백을 사용하여 해당 경고를 제거할 수 있습니다.

useEffect(() => {
  setCount((count) => count + 1);
}, []);

Another drawback off adding // eslint-disable-next-line could be that it will not warn you about future dependencies. i.e If you made some changes in that hook which has a dependency but you forgot to add it in the dependency array, you will not get a warning now as you already have disabled that. This could lead to unexpected behavior and even break your app.

함수 종속성

useEffect 후크에서 함수를 사용할 때.name를 인수로 사용하고 무언가를 수행하는 함수가 있다고 가정해 보겠습니다. 종속성 배열에 함수를 추가하지 않으면 경고es-lint가 표시됩니다.

const functionName = (name) => {
  // do something
};

useEffect(() => {
  functionName(name);
}, [name]);

그러나 종속성에 직접 추가해도 문제가 해결되지 않으며 you have just caused an infinite loop because someFunction has a different reference on each render 라는 또 다른 경고가 표시됩니다. 그래서 해결책은 무엇입니까?

여기서 솔루션은 useCallback가 메모화된 콜백을 반환하기 때문에 해당 함수를 useCallBack 후크로 래핑할 가능성이 높습니다. 함수가 렌더링 간에 참조를 변경하지 않도록 합니다.

const functionName = useCallback((name) => {
  // do something with count
}, []);

useEffect(() => {
  functionName(name);
}, [name, functionName]);

추신:

As per official useCallBack docs make sure that every value referenced inside the callback should also appear in the dependencies array.

다음은 useCallBack과 관련된 동일한 github 문제에서 본 또 다른 사용 사례입니다. 여기서 사용자는 이메일을 추가하고 해당 이메일을 앱에 초대합니다. 잠재적으로 deps를 [emails, props]로 수정합니다. 반면 실제로는 onSubmit가 변경되고 다른 prop가 아닌 경우에만 함수 참조를 업데이트해야 합니다.

const handleSubmit = React.useCallback(
  () => {
    props.onSubmit(emails);
  },
  [emails, props]
);

This is because technically props.onSubmit() passes props itself as this to onSubmit call. So onSubmit might implicitly depend on props and the best practice is always de-structuring.

유효한 케이스

또한 same thread에서 찾은 적법한 사례 중 하나에 대해 이야기하고 싶습니다. 여기에서 관련 없는 종속성 경고를 비활성화해야 할 수 있습니다.

useEffect(() => {
    window.scrollTo(0, 0);
  }, [activeTab]);

요약

대부분의 경우 보푸라기 경고를 비활성화/무시하는 것이 매우 일반적입니다react-hooks/exhaustive-deps. 종속성이 변경될 때 실제로 후크를 시작하려고 할 수 있습니다. 처음에는 그렇지 않은 것처럼 보일 수 있지만 종속성 배열에 변수를 포함하지 않으면 효과 논리가 실패하는 경우가 있을 수 있습니다. 따라서 비활성화하는 대신 지정된 방식으로 반응 후크 종속성 요구 사항을 충족해야 합니다.



도움이 되었고 새로운 것을 배우셨다면 ❤️를 누르십시오.