이 예에는 답장이 있습니다. https://github.com/facebook/react/issues/14920#issuecomment -466145690

코드샌드박스

이것은 defaultIndeterminate 소품을 사용하여 초기 렌더링에서 불확실한 상태를 설정하는 제어되지 않는 Checkbox 구성 요소입니다( indeterminate 요소 속성이 없기 때문에 ref를 사용하는 JS에서만 수행할 수 있음). 이 소품은 defaultValue 처럼 작동하도록 되어 있으며, 여기서 해당 값은 초기 렌더링에서만 사용됩니다.

규칙은 defaultIndeterminate 가 종속성 배열에서 누락되었다고 불평하지만 이를 추가하면 새 값이 전달되는 경우 구성 요소가 제어되지 않은 상태를 잘못 덮어쓰게 됩니다. 종속성 배열은 prop에 의해 완전히 제어되지 않는 상태가 되기 때문에 완전히 제거할 수 없습니다.

이것과 규칙이 잡아야 하는 경우의 유형을 구별할 수 있는 방법은 없지만 최종 규칙 문서에 제안된 해결 방법이 포함될 수 있다면 좋을 것입니다. 🙂

재: https://github.com/facebook/react/issues/14920#issuecomment -466144466

@billyjanitsch 대신 작동할까요? https://codesandbox.io/s/jpx1pmy7ry

defaultIndeterminate 초기화되는 indeterminate 에 useState 를 추가했습니다. 그러면 효과는 [indeterminate] 를 인수로 받아들입니다. 현재는 변경하지 않지만 나중에 변경하면 효과가 있을 것 같습니까? 따라서 코드는 미래의 가능한 사용 사례를 조금 더 잘 예측합니다.

그래서 나는 일부 html을 전달하고 그것을 dangerouslySetInnerHtml 와 함께 사용하여 내 구성 요소(일부 편집 내용)를 업데이트하는 다음과 같은 (가장자리?) 사례를 얻었습니다.
html 소품을 사용하지 않고 ref.current.querySelectorAll 를 사용하여 마법을 걸 수 있는 참조를 사용합니다.
이제 명시적으로 사용하지 않더라도 useEffect 종속성에 html 를 추가해야 합니다. 실제로 규칙을 비활성화해야 하는 사용 사례입니까?

아이디어는 편집 콘텐츠에서 모든 링크 클릭을 가로채고 일부 분석을 추적하거나 기타 관련 작업을 수행하는 것입니다.

다음은 실제 구성 요소의 축소된 예입니다.
https://codesandbox.io/s/8njp0pm8v2

react-redux를 사용하고 있으므로 mapDispatchToProps 에서 props의 action Creator를 전달하고 hook에서 해당 action Creator를 사용하면 exhaustive-deps 경고가 표시됩니다.

그래서 당연히 종속성 배열에 redux 액션을 추가할 수 있지만, redux 액션은 함수이고 절대 바뀌지 않기 때문에 불필요하지 않습니까?

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

린트가 deps 를 [emails, props.onSubmit] 로 수정하기를 기대하지만 지금은 항상 deps 를 [emails, props] 로 수정합니다.

1. 여전히 의도를 표현하는 최소한의 코드 예제 를 보여주는 CodeSandbox("foo bar"가 아니라 구현하는 실제 UI 패턴 ).

https://codesandbox.io/s/xpr69pllmz

1. 사용자가 수행 하는

사용자가 이메일을 추가하고 해당 이메일을 앱에 초대합니다. 내 문제와 관련이 없기 때문에 의도적으로 나머지 UI를 button 제거했습니다.

1. Hook/컴포넌트의 의도된 API 에 대한 설명입니다.

내 구성 요소에는 onSubmit: (emails: string[]) => void 단일 소품이 있습니다. 사용자가 양식을 제출할 때 emails 상태로 호출됩니다.

편집: https://github.com/facebook/react/issues/14920#issuecomment -467494468에서 답변했습니다.

이것은 기술적으로 props.foo() 가 props 자체를 this 로 foo 호출로 전달하기 때문입니다. 따라서 foo 는 암시적으로 props 에 종속될 수 있습니다. 하지만 이 경우에는 더 나은 메시지가 필요합니다. 가장 좋은 방법은 항상 구조를 분해하는 것입니다.

코드샌드박스

타사 라이브러리를 통합할 때 탑재 및 업데이트가 뚜렷하게 다를 수 있다는 점은 고려하지 않습니다. 모든 렌더에서 인스턴스가 파괴되어서는 안 되므로 업데이트 효과를 마운트에 포함할 수 없습니다(배열을 완전히 제거).

안녕하세요,

여기 내 코드에 무엇이 문제인지 확실하지 않습니다.

const [client, setClient] = useState(0);

useEffect(() => {
    getClient().then(client => setClient(client));
  }, ['client']);

React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked 받았어요

@joelmoss @sylvainbaronnet 귀하의 의견에 감사드립니다. 그러나 문제의 맨 위에 요청한 정보가 포함되어 있지 않았기 때문에 귀하의 의견을 숨겼습니다. 컨텍스트가 없기 때문에 모든 사람이 이 토론을 불필요하게 어렵게 만듭니다. 다시 게시하고 모든 관련 정보를 포함하면 대화를 계속하겠습니다(맨 위 게시물 참조). 양해 해 주셔서 감사합니다.

1. 코드샌드박스
2. 사용자는 이름을 선택할 수 있으며 성은 강제로 변경됩니다. 사용자는 성을 선택할 수 있으며 이름을 강제로 변경하지 않습니다.
3. 상태의 일부를 반환하는 사용자 지정 후크, 해당 상태를 업데이트하는 선택 구성 요소 및 상태를 프로그래밍 방식으로 업데이트하는 상태 후크의 업데이트 메서드가 있습니다. 설명했듯이 항상 업데이트 기능을 사용하고 싶지는 않으므로 반환된 배열의 마지막 항목에 그대로 두었습니다.

코드가 있는 그대로 오류가 발생해서는 안 된다고 생각합니다. setLastName 가 배열에 포함되어야 한다고 35행에서 바로 실행됩니다. 그것에 대해 무엇을 할 생각이 있습니까? 내가 예상치 못한 일을 하고 있는 걸까?

나는 완전히 이해하고 일반적으로 당신을 위해 모든 것을 할 것이지만 나의 특정한 경우에는 어떤 코드도 나에게 고유하지 않습니다. 후크 외부에서 정의되고 후크 내에서 사용되는 함수(즉, redux 작업 생성자)를 사용하려면 해당 함수를 후크 dep로 추가해야 하는지 여부에 대한 단순한 질문입니다.

여전히 더 많은 정보가 필요하다면 코드샌드박스를 생성하게 되어 기쁩니다. 고마워

@joelmoss 내

예, CodeSandbox는 여전히 도움이 될 것입니다. 하루 종일 사람들의 코드 조각 사이를 컨텍스트 전환하는 것이 어떤 것인지 상상해 보십시오. 엄청난 정신적 피해입니다. 그들 중 누구도 동일하게 보이지 않습니다. 사람들이 Redux에서 액션 생성기를 사용하는 방법이나 React 외부의 다른 개념을 기억해야 하는 경우에는 훨씬 더 어렵습니다. 문제는 당신에게 분명하게 들릴지 모르지만 당신이 의미하는 바가 나에게는 전혀 분명하지 않습니다.

@gaearon 나는 그것이 의미가 있다는 것을 이해합니다. 실제로 내가 달성하고 싶었던 이유는 다음과

효과를 실행하고 한 번만(마운트 및 마운트 해제 시) 정리하려는 경우 두 번째 인수로 빈 배열([])을 전달할 수 있습니다.

많은 설명 감사합니다. (그리고 주제를 벗어나서 죄송합니다)

다음은 내가 구현하는 코드 버전입니다. 별거 아닌 것 같지만 패턴이 실제 코드와 100% 동일합니다.

https://codesandbox.io/s/2x4q9rzwmp?fontsize=14

• 사용자가 수행 하는

이 예에서는 모든 것이 잘 작동합니다! 린터 문제를 제외하고.

• Hook/컴포넌트의 의도된 API 에 대한 설명입니다.

효과에서 함수를 실행하고 있는 이와 같은 파일이 여러 개 있습니다. 그러나 특정 조건이 충족될 때마다 실행되기를 원합니다(예: 시리즈 ID 변경). 배열에 함수를 포함하고 싶지 않습니다.

이것은 샌드박스 코드에서 실행할 때 린터에서 얻은 것입니다.

25:5   warning  React Hook useEffect has a missing dependency: 'fetchPodcastsFn'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

내 질문은 이것이 어떻게 작동해야 합니까(linter 규칙 또는 후크 배열 규칙)? 이 효과를 더 관용적으로 설명하는 방법이 있습니까?

@svenanders , fetchPodcastsFn 를 포함하고 싶지 않은 이유가 궁금합니다. 렌더링할 때마다 변경되기 때문입니까? 그렇다면 해당 함수를 메모화하거나 정적으로 만들고 싶을 것입니다(매개변수가 없는 경우).

하나는 명확성에 관한 것입니다. 함수를 볼 때 언제 실행되어야 하는지 쉽게 이해하고 싶습니다. 어레이에 _one_ id가 표시되면 매우 명확합니다. 그 id와 기능을 보면 더 혼란스러워집니다. 무슨 일이 일어나고 있는지 이해하려면 시간과 노력을 들여야 하고, 심지어 기능을 디버깅할 수도 있습니다.
내 기능은 런타임에 변경되지 않으므로 메모 작성이 중요한지 모르겠습니다.

https://codesandbox.io/s/4xym4yn9kx

• 단계

사용자는 페이지의 경로에 액세스하지만 슈퍼 사용자가 아니므로 페이지에서 다른 곳으로 리디렉션하려고 합니다. props.navigate 는 라우터 라이브러리를 통해 주입되므로 실제로 페이지 다시 로드를 방지하기 위해 window.location.assign 를 사용하고 싶지 않습니다.

모든 것이 작동합니다!

• 의도된 API

나는 코드 샌드 박스로 제대로 의존성에 넣어하지만 린터 종속성 목록이 있어야한다고 나에게 말하고 props 대신 props.navigate . 왜 그런 겁니까?

스크린샷이 있는 트윗! https://twitter.com/ferdaber/status/1098966716187582464

편집: 이것이 버그가 될 수 있는 한 가지 유효한 이유는 navigate() 가 바인딩된 this 에 의존하는 메서드인 경우입니다. 이 경우 기술적으로 props 내부의 내용이 변경되면 내부의 내용이 변경됩니다 this 도 변경됩니다.

코드샌드박스: https://codesandbox.io/s/711r1zmq50

의도한 API:

이 후크를 사용하면 빠르게 변화하는 값을 디바운스할 수 있습니다. debounced 값은 useDbounce 후크가 지정된 시간 동안 호출되지 않은 경우에만 최신 값을 반영합니다. 레시피에서와 같이 useEffect와 함께 사용하면 API 호출과 같은 비용이 많이 드는 작업이 너무 자주 실행되지 않도록 쉽게 확인할 수 있습니다.

단계:

이 예에서는 Marvel Comic API를 검색하고 useDebounce를 사용하여 모든 키 입력에서 API 호출이 실행되는 것을 방지할 수 있습니다.

종속성 배열에서 사용하는 "모든 것"을 추가하는 IMO는 효율적이지 않습니다.

예를 들어 useDebounce Hook 을 고려하십시오. 실제 사용에서(적어도 우리의 경우) delay 는 첫 번째 렌더링 후 변경되지 않지만 모든 재렌더링에서 변경되었는지 여부를 확인하고 있습니다. 그래서,이 후크의 두 번째 인수 useEffect 입니다 더 나은가되게합니다 [value] 대신 [value, delay] .

얕은 평등 검사가 매우 저렴하다고 생각하지 마십시오. 전략적으로 배치하면 앱에 도움이 될 수 있지만 모든 단일 구성 요소를 순수하게 만드는 것은 실제로 앱을 느리게 만들 수 있습니다. 절충안.

종속성 배열에 모든 것을 추가하면 모든 곳에서 순수 구성 요소를 사용하는 것과 동일한(또는 더 나쁜) 성능 문제가 있다고 생각합니다. 우리가 사용하는 값 ​​중 일부가 변경되지 않는다는 것을 알고 있는 많은 시나리오가 있으므로 @gaearon이 말했듯이 얕은 평등 검사가 매우 저렴하지 않고 앱을 느리게 만듭니다.

규칙에 따라 사용자 지정 후크에서 자동으로 작동하도록 이 규칙을 활성화하는 것에 대한 몇 가지 피드백이 있습니다.

소스 코드에서 사람들이 정규식을 지정하여 사용자 정의 후크를 이름으로 캡처할 수 있도록 하려는 의도가 있음을 알 수 있습니다.

https://github.com/facebook/react/blob/ba708fa79b3db6481b7886f9fdb6bb776d0c2fb9/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js#L490 -L492

React 팀은 의존성 배열이 있는 사용자 정의 후크에 대한 추가 명명 규칙에 대해 어떻게 생각할까요? 후크는 이미 이 플러그인에서 후크로 감지하기 위해 use 접두사가 붙는 규칙을 따릅니다. 특정 종속성에 의존하는 사용자 지정 후크를 감지하기 위해 제안하는 규칙은 WithDeps 와 같은 일종의 접미사가 될 것입니다. 즉, 전체 사용자 지정 후크 이름은 useCustomHookWithDeps 와 같을 수 있습니다. WithDeps 접미사는 플러그인에 최종 배열 인수가 종속성 중 하나임을 알려줍니다.

플러그인은 여전히 ​​regexes를 추가로 지원할 수 있지만 라이브러리 소비자가 모든 사용자 정의에 대해 플러그인을 명시적으로 구성하도록 하는 대신 WithDeps 접미사가 붙은 사용자 정의 후크를 라이브러리 작성자가 간단히 내보낼 수 있도록 하면 큰 이점이 있다고 생각합니다. 제3자 또는 다른 방식으로 연결합니다.

사용자 정의 동등성 검사를 경고하고 자동으로 제거합니다.

const myEqualityCheck = a => a.includes('@');

useCallback(
  () => {
    // ...
  },
  [myEqualityCheck(a)]
);

useEffect의 경우 해당 "종속성"이 효과가 발생하는 방식을 변경하기 때문에 "불필요한 종속성" 경고가 나타나야 한다고 생각하지 않습니다.

부모와 자식이라는 두 개의 카운터가 있다고 가정해 보겠습니다.

• 카운터는 독립적으로 증가/감소할 수 있습니다.
• 상위 카운터가 변경되면 하위 카운터를 0으로 재설정하고 싶습니다.

구현:

  const [parent, setParent] = useState(0);
  const [child, setChild] = useState(0);

  useEffect(
    () => {
      setChild(0);
    },
    [parent] // "unnecessary dependency: 'parent'"
  );

철저한 deps 규칙은 React Hook useEffect has an unnecessary dependency: 'parent'. Either exclude it or remove the dependency array. 경고를 제공합니다.

앱이 작동하는 방식을 변경하기 때문에 린터가 이 제안을 해서는 안 된다고 생각합니다.

1. 코드샌드박스: https://codesandbox.io/s/ol6r9plkv5
2. 단계: parent 변경되면 child 가 0으로 재설정됩니다.
3. 의도: 종속성을 불필요한 것으로 플래그 지정하는 대신 linter는 parent 가 useEffect 의 동작을 변경하고 제거하도록 조언하지 않아야 함을 인식해야 합니다.

[편집하다]

해결 방법으로 다음과 같이 작성할 수 있습니다.

const [parent, setParent] = useState(0)
const [child, setChild] = useState(0)
const previousParent = useRef(parent)

useEffect(() => {
  if (parent !== previousParent.current) {
    setChild(0)
  }

  previousParent.current = parent
}, [parent])

하지만 내가 좋아하는 원본 스니펫에 "시"가 있습니다.

문제는 종속성 배열을 성능 최적화와 실제 구성 요소 동작을 위한 메커니즘으로 해석해야 하는지 여부에 달려 있다고 생각합니다. React Hooks FAQ는 성능을 사용하는 이유에 대한 예로 성능을 사용하지만 성능을 향상시키기 위해서만 종속성 배열을 사용해야 한다는 의미로 예제를 해석하지 않고 대신 효과 호출을 건너뛸 수 있는 편리한 방법으로 보았습니다. 일반적으로.

실제로 내부 캐시를 무효화하기 위해 몇 번 사용한 패턴입니다.

useEffect(() => {
  if (props.invalidateCache) {
    cache.clear()
  }
}, [props.invalidateCache])

이런 식으로 사용하지 않아야 하는 경우 이 의견을 무시하고 알려주십시오.

@미스터리보
이건 어떤가요

  const [parent, setParent] = useState(0);
  const [child, setChild] = useState(0);
  const updateChild = React.useCallback(() => setChild(0), [parent]);

  useEffect(
    () => {
      updateChild();
    },
    [updateChild] 
  );

나도 당신의 그 조각을 이해하지 못할 것입니다. 종속성은 코드를 기반으로만 가정할 수 있지만 버그일 수 있습니다. 내 제안이 반드시 해결되지는 않지만 적어도 더 명확하게 만듭니다.

이것은 이전에 getDerivedStateFromProps 를 통해 해결된 것 같습니까? getDerivedStateFromProps를 어떻게 구현합니까? 돕다?

@nghiepit 첫 번째 게시물(예: CodeSandbox)에서 필수 체크리스트를 무시했기 때문에 댓글을 숨겼습니다. 체크리스트에 따라 다시 게시해 주세요. 감사 해요.

@eps1lon useCallback 에 대해 정확히 동일한 경고가 표시될 것이며 일반적으로 해당 패턴이 원본보다 개선된다는 데 동의하지 않지만 이에 대해 이야기하기 위해 주제를 탈선시키고 싶지 않습니다. 명확히 하자면, 불필요한 종속성 규칙은 useEffect 또는 useLayoutEffect 대해 완화되어야 한다고 생각합니다. 왜냐하면 그들은 효과적인 논리를 포함할 수 있지만 useCallback 대한 규칙은 그대로 유지되어야 하기 때문입니다. useMemo 등

@MrLeebo 가 여기에서 설명한 것과 동일한 문제/정신적 모델 질문이 있습니다. 내 직감은 useEffect 종속성 규칙이 그렇게 엄격할 수 없다는 것입니다. 기본 개념 증명 아이디어를 위해 작업하고 있던 믿을 수 없을 정도로 인위적인 예가 있습니다. 나는 이 코드가 형편없고 아이디어가 특히 유용하지 않다는 것을 알고 있지만, 당면한 문제에 대한 좋은 예라고 생각합니다. @MrLeebo가 내가 꽤 잘 가지고 있는 질문을 표현했다고 생각합니다.

문제는 종속성 배열을 성능 최적화와 실제 구성 요소 동작을 위한 메커니즘으로 해석해야 하는지 여부에 달려 있다고 생각합니다. React Hooks FAQ는 성능을 사용하는 이유에 대한 예로 성능을 사용하지만 성능을 향상시키기 위해서만 종속성 배열을 사용해야 한다는 의미로 예제를 해석하지 않고 대신 효과 호출을 건너뛸 수 있는 편리한 방법으로 보았습니다. 일반적으로.

https://codesandbox.io/s/5v9w81j244

특히 useDelayedItems 의 useEffect 후크를 살펴보겠습니다. 현재 items 속성을 종속성 배열에 포함하면 linting 오류가 발생하지만 해당 속성이나 배열을 완전히 제거하면 원하지 않는 동작이 발생합니다.

useDelayedItems 후크의 기본 아이디어는 항목 배열과 구성 개체(ms 단위 지연, 초기 페이지 크기)가 주어지며, 처음에는 구성된 페이지 크기에 따라 항목의 하위 집합을 받게 됩니다. config.delay 가 지나면 항목은 이제 전체 항목 세트가 됩니다. 새로운 항목 세트가 전달되면 후크는 이 "지연" 논리를 다시 실행해야 합니다. 아이디어는 큰 목록의 지연된 렌더링의 매우 조잡하고 멍청한 버전입니다.

이 규칙에 대한 모든 작업에 감사드립니다. 개발할 때 매우 도움이 되었습니다. 내 예제의 품질이 의심스럽더라도 이러한 연산자가 어떻게 남용/사용될 수 있는지에 대한 통찰력을 제공하기를 바랍니다.

편집 : 나는 행동 의도와 관련된 코드 및 상자 내부에 몇 가지 명확한 설명을 추가했습니다. 정보가 충분하기를 바랍니다. 하지만 여전히 혼란스러운 점이 있으면 알려주십시오.

다른 값을 결합한 단일 값은 어떻습니까?

예: fullName은 firstName 및 lastName 에서 파생됩니다. fullName 변경될 때만 효과를 트리거하고(예: 사용자가 "저장"을 눌렀을 때) 효과에서 구성하는 값에도 액세스하려고 합니다.

데모

fullName 가 변경된 후에 firstName 또는 lastName 를 추가하면 문제가 해결됩니다.

@aweary useEffect 소품 변경 간접 참조에서 어떤 가치를 얻고 있는지 잘 모르겠습니다. onClick 이 "효과"를 처리해야 하는 것 같습니다.

https://codesandbox.io/s/0m4p3klpyw

다른 값을 결합하는 단일 값에 관해서는 useMemo 가 아마도 원하는 대로 될 것입니다. 예에서 계산의 지연된 특성은 연결된 동작과 정확히 1:1로 매핑되지 않는다는 것을 의미합니다.

이 예제에 대한 코드 및 상자 링크를 만들고 이 게시물을 편집합니다.

매우 간단한 규칙이 있습니다. 현재 탭이 변경된 경우 맨 위로 스크롤합니다.
https://codesandbox.io/s/m4nzvryrxj

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

그리고 React Hook useEffect has an unnecessary dependency: 'activeTab'. Either exclude it or remove the dependency array 받았습니다.

또한 일부 구성 요소를 마이그레이션할 때 componentDidMount 동작을 복제하고 싶습니다.

useEffect(() => {
    ...
  }, []);

이 규칙은 이것에 대해 열심히 불평하고 있습니다. useEffect 배열에 모든 종속성을 추가하는 것을 주저합니다.

마지막으로 useEffect 전에 새 인라인 함수를 선언하면 다음과 같이 됩니다.
https://codesandbox.io/s/nr7wz8qp7l

const foo = () => {...};
useEffect(() => {
    foo();
  }, []);

당신은 얻을: React Hook useEffect has a missing dependency: 'foo'. Either include it or remove the dependency array
종속성 목록에 foo를 추가하는 것에 대해 어떻게 느끼는지 잘 모르겠습니다. 각 렌더에서 foo는 새로운 함수이고 useEffect는 항상 실행됩니까?

@ksaldana1 이벤트 핸들러 내부에 부작용을 넣는 것만으로는 충분하지 않습니다. 그러면 실제 업데이트가 커밋되기 전에 부작용이 발생하여 원하는 것보다 더 자주 부작용이 트리거될 수 있습니다.

업데이트된 상태는 이벤트 핸들러 내에서 사용할 수 없기 때문에 useReducer 사용할 때도 작동하지 않습니다.

다른 값을 결합하는 단일 값에 관해서는 useMemo 가 아마도 원하는 값일 것입니다.

이 예에서 useMemo 하면 firstName 또는 lastName 변경될 때마다 useMemo 가 새 fullName 파생하므로 중단됩니다. 여기서 동작은 저장 버튼을 클릭할 때까지 fullName 가 업데이트되지 않는다는 것입니다.

@weary 이런 식으로 작동할까요? https://codesandbox.io/s/lxjm02j50m
권장 구현이 무엇인지 매우 궁금합니다.

또한 말씀하신 몇 가지 사항에 대해 더 듣고 싶습니다. 이것에 대해 더 많은 정보를 알려줄 수 있습니까?

핸들러의 트리거링 및 효과:

실제 업데이트가 커밋되기 전에 부작용이 발생하여 원하는 것보다 더 자주 부작용이 트리거될 수 있습니다.

이벤트 핸들러에서 useReducer 상태 사용:

업데이트된 상태를 사용할 수 없습니다.

감사 해요!

@bugzpodder 종류 무관의하지만 스크롤 호출은 내부에 있어야한다 useLayoutEffect 대신 useEffect . 현재 새 경로로 이동할 때 눈에 띄는 깜박임이 있습니다.

이것이 의도적인 것인지 아닌지 확실하지 않습니다:

props에서 함수를 호출할 때 linter는 전체 props 개체를 종속성으로 추가할 것을 제안합니다.

짧은 버전:

useEffect(function() {
  props.setLoading(true)
}, [props.setLoading])

// ⚠️ React Hook useEffect has a missing dependency: 'props'.

정식 버전: 코드샌드박스

다시 시도하지만 이번에는 더 간단합니다 ;)

소품에서 함수를 전달하거나 실제로 어디에서든 후크 내부에서 해당 함수를 사용하면 exhaustive-deps 경고가 표시됩니다.

따라서 종속성 배열에 함수를 추가할 수는 있지만 함수이고 변경되지 않기 때문에 불필요하지 않습니까?

-> 샌드박스

그것이 당신이 필요로하는 모든 것이기를 희망하지만 내가 의미하는 바를 보여주기 위해 했습니다 .

고마워.

따라서 종속성 배열에 함수를 추가할 수는 있지만 함수이고 변경되지 않기 때문에 불필요하지 않습니까?

이것은 정확하지 않습니다. 함수는 부모가 다시 렌더링할 때 항상 변경될 수 있습니다.

@siddharthkp

props에서 함수를 호출할 때 linter는 전체 props 개체를 종속성으로 추가할 것을 제안합니다.

이는 기술적으로 props.foo() 가 this 를 foo 호출로 props 자체를 전달하기 때문입니다. 따라서 foo 는 암시적으로 props 에 의존할 수 있습니다. 하지만 이 경우에는 더 나은 메시지가 필요합니다. 가장 좋은 방법은 항상 구조를 분해하는 것입니다.

함수는 부모가 다시 렌더링할 때 항상 변경될 수 있습니다.

물론, 하지만 함수가 상위 구성 요소가 아닌 다른 곳에서 정의된 경우에는 변경되지 않습니다.

물론, 하지만 함수가 상위 구성 요소가 아닌 다른 곳에서 정의된 경우에는 변경되지 않습니다.

직접 가져오는 경우 린트 규칙은 효과 deps에 추가하도록 요청하지 않습니다. 렌더 범위에 있는 경우에만. 그것이 렌더 범위에 있으면 린트 규칙은 그것이 어디에서 왔는지 알지 못합니다. 오늘은 동적이 아니더라도 누군가 부모 구성 요소를 변경하면 내일이 될 수 있습니다. 따라서 지정하는 것이 올바른 기본값입니다. 어쨌든 정적이라면 지정하는 것이 나쁘지 않습니다.

thx @gaearon

이는 기술적으로 props.foo() 가 this 를 foo 호출로 props 자체를 전달하기 때문입니다. 따라서 foo 는 암시적으로 props 에 의존할 수 있습니다. 하지만 이 경우에는 더 나은 메시지가 필요합니다. 가장 좋은 방법은 항상 구조를 분해하는 것입니다.

그것은 내 질문에도 대답합니다. 감사합니다! 😄

https://codesandbox.io/s/98z62jkyro

그래서 각 입력이 스스로를 등록할 수 있도록 컨텍스트에 노출된 API를 사용하여 모든 입력을 등록하여 입력 유효성 검사를 처리하기 위한 라이브러리를 만들고 있습니다. useRegister라는 사용자 정의 후크를 만들었습니다.

전:

 useEffect(
    () => {
      register(props.name, props.rules || []);
      console.log("register");
      return function cleanup() {
        console.log("cleanup");
        unregister(props.name);
      };
    },
    [props.name, props.rules, register, unregister]
  );

props.rules를 종속성의 일부로 강제할 때 무한 렌더 루프로 끝나는 것 같습니다. Props.rules는 유효성 검사기로 등록할 함수의 배열입니다. 어레이를 종속성으로 제공할 때만 이 문제를 감지했습니다. 내 코드샌드박스에서 콘솔을 여는 루프를 볼 수 있습니다.

props.name을 종속성으로 사용하면 의도한 대로 작동합니다. 다른 사람이 지적한 대로 종속성을 적용하면 응용 프로그램의 동작이 변경되며 이 경우 부작용이 심각합니다.

@bugzpodder

재: https://github.com/facebook/react/issues/14920#issuecomment -467212561

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

이것은 적법한 케이스처럼 보입니다. 나는 효과에 대해서만 관련 없는 deps를 허용하도록 경고를 완화할 것입니다. (하지만 useMemo 또는 useCallback .)

또한 일부 구성 요소를 마이그레이션할 때 componentDidMount 동작을 복제하고 싶습니다.
이 규칙은 이것에 대해 열심히 불평하고 있습니다. useEffect 배열에 모든 종속성을 추가하는 것을 주저합니다.

죄송합니다. 이에 대한 예를 추가하지 않으셔서 논의할 기회를 놓쳤습니다. 이것이 바로 OP 게시물 이 구체적인 UI 예제 를

마지막으로 useEffect 전에 새 인라인 함수를 선언하면 다음과 같습니다. https://codesandbox.io/s/nr7wz8qp7l

이 경우 doSomething 를 효과로 옮기면 쉽게 해결할 수 있습니다. 그러면 선언할 필요가 없습니다. 또는 useCallback 주위에 doSomething 있습니다. 선언된 dep만 사용하는 함수를 생략할 수 있도록 규칙을 완화할 수 있습니다. 그러나 다른 함수를 호출하는 함수가 있고 이러한 함수 중 하나에 prop 또는 state를 추가하는 경우 혼동될 수 있습니다. 갑자기 그것을 전이적으로 사용하는 모든 효과 뎁스를 업데이트해야 합니다. 혼란스러울 수 있습니다.

이것이 새 규칙에 대한 기능 요청인지 아니면 exhaustive-deps 대해 개선할 수 있는 사항인지 모르겠습니다.

import React from 'react'
import emitter from './thing'

export const Foo = () => {
  const onChange = () => {
    console.log('Thing changed')
  }

  React.useEffect(() => {
    emitter.on('change', onChange)
    return () => emitter.off('change', onChange)
  }, [onChange])

  return <div>Whatever</div>
}

onChange 함수는 렌더링할 때마다 생성되기 때문에 useEffect hook [onChange] 인수는 중복되며 제거될 수도 있습니다.

   React.useEffect(() => {
     emitter.on('change', onChange)
     return () => emitter.off('change', onChange)
-  }, [onChange])
+  })

린터가 이를 감지하고 배열 인수를 삭제하도록 조언할 수 있습니다.

배열 항목 목록을 유지 관리하고 있었는데 그 중 하나 이상이 생성되고 어쨌든 렌더링할 때마다 후크가 무효화되고 있다는 것을 깨닫는 상황이 있었습니다.

이 규칙에 대한 몇 가지 수정 사항과 더 나은 메시지가 포함된 [email protected] 을 출시했습니다. 획기적인 것은 아니지만 몇 가지 경우를 해결해야 합니다. 나머지는 다음주에 봐야겠다.

또한 https://github.com/facebook/react/pull/14996에 "안전한" 기능 deps를 생략할 수 있는 첫 번째 단계를 게시했습니다

@gaearon 좋은 생각입니다. 이것은 후크를 사용할 때 더 나은 스타일을 갖는 데 확실히 유용합니다 🙏

@gaearon 액션이 prop에서 오는 경우에는 여전히 작동하지 않습니다. 다음 예를 고려하십시오.

여기서 setScrollTop 는 redux 작업입니다.

Slider 구성 요소의 이 예에서는 useEffect 를 사용하여 DOM을 사용할 수 있을 때까지 대기하여 noUiSlider 구성 요소를 마운트할 수 있습니다. 따라서 효과가 실행될 때 DOM에서 ref를 사용할 수 있도록 [sliderElement] 를 전달합니다. 우리는 구성 요소도 서버로 렌더링하므로 렌더링 전에 DOM을 사용할 수 있는지도 확인합니다. useEffect 에서 사용하는 다른 소품(즉, min, max, onUpdate 등)은 상수이므로 효과에 전달할 필요가 없습니다.

다음은 코드샌드박스에서 볼 수 있는 효과입니다.

const { min, max, step } = props;
const sliderElement = useRef();

useEffect(() => {
  if (!sliderElement.current) {
    return;
  }

  const slider = sliderElement.current;
  noUiSlider.create(slider, {
    connect: true,
    start: [min, max],
    step,
    range: {
      min: [min],
      max: [max],
    },
  });

  if (props.onUpdate) {
    slider.noUiSlider.on('update', props.onUpdate);
  }

  if (props.onChange) {
    slider.noUiSlider.on('change', props.onChange);
  }
}, [sliderElement]);

@WebDeg-Brian 전체 CodeSandbox 데모 없이는 당신을 도울 수 없습니다. 죄송합니다. 상단 게시물을 참조하십시오.

나는 일반적인 "기능은 절대 변하지 않는다"라는 오해에 대해 약간의 글을 올렸습니다.

https://overreacted.io/how-are-function-components-different-from-classes/

완전히 같은 주제는 아니지만 이 규칙과 관련이 있습니다.

안녕하세요 @gaearon님 , 여기에 게시하도록 요청한 예입니다(트위터에서) :)

기본적으로 내 라이브러리 반응 트랩 을 후크로 변환하려고 합니다.
이것은 요소 외부/내부의 이벤트에 대한 트랩일 뿐입니다.

내 문제는 useEffect 이 상태 값( trapped )에 의존 하지 않으면 때때로 부실하다는 것입니다.
설명하기 위해 몇 가지 의견과 로그를 작성했습니다. useTrap.js 파일을 보면 주석과 로그가 useEffect 및 preventDefaultHelper 함수에 있습니다.

내가 아는 한, 값이 useEffect 안에 있지 않으면 종속성의 일부가 아니어야 합니다(내가 틀렸다면 정정해 주세요).

1. 코드샌드박스
2. 단계:
   사용자가 상자 내부를 클릭하여 활성화하고 외부를 클릭하여 활성화하지 않은 경우 사용자는 마우스 오른쪽 버튼을 클릭할 수도 있지만 첫 번째 클릭의 경우 컨텍스트 메뉴( e.preventDefault ).
   내가 "첫 번째 클릭"이라고 말하면 상태를 변경하는 첫 번째 클릭을 의미합니다.
   활성 상자가 있는 경우 상자 외부를 마우스 오른쪽 버튼으로 클릭하면 상태가 "비활성"으로 변경되고 컨텍스트 메뉴가 표시되지 않습니다. 외부에서 다른 클릭은 상태에 영향을 미치지 않으므로 컨텍스트 메뉴가 나타나야 합니다.

여기에서 명확하고 사용 사례를 이해할 수 있기를 바랍니다. 추가 정보를 제공해야 하는 경우 알려주세요. 감사 해요!

안녕하세요 @gaearon 님 , Twitter에서 제안한 대로 여기에 맞춤 훅을 추가하고 있습니다! 종속성을 건너 뛰지 않는 올바른 모양을 찾기 위해 고심하고 있습니다.

하나의 예시로 정교하게 설명되어 있으니 명확하고 이해하기 쉽게 설명할 수 있기를 바랍니다.

이것은 현재 상태입니다: react-async-utils/src/hooks/useAsyncData.ts

기능 개요
사용자가 비동기 호출, 결과 데이터 및 프로세스의 상태를 처리하도록 돕습니다.

triggerAsyncData 는 Promise 를 반환하는 getData 함수에 따라 asyncData 상태를 비동기식으로 업데이트합니다. triggerAsyncData 는 효과로 호출하거나 후크 사용자가 "수동으로" 호출할 수 있습니다.

도전

1. triggerAsyncData 를 호출하는 효과의 종속성은 본질적인 것입니다. triggerAsyncData 는 효과의 종속성이지만 모든 렌더링에서 생성됩니다. 지금까지의 생각:
   
   
   
   1. 종속성으로 추가하기만 하면 됩니다 => 하지만 효과는 모든 렌더에서 실행됩니다.
   
   
   2. 종속성으로 추가하되 triggerAsyncData => useMemo / useCallback 와 함께 useMemo / useCallback 를 사용하면 성능 최적화에만 사용해야 합니다. AFAIK.
   
   
   3. 범위 내에서 효과 => 그러면 사용자에게 반환할 수 없습니다.
   
   
   4. triggerAsyncData 를 종속성으로 사용하는 대신 triggerAsyncData 의 종속성을 종속성으로 사용 => 지금까지 찾은 최상의 옵션. 그러나 그것은 "exhaustive-deps" 규칙을 어깁니다.
   
   
2. 사용자 정의 후크의 모든 입력 매개변수는 내부 효과의 종속성이 됩니다. 따라서 인라인 함수와 리터럴 객체를 매개변수로 사용하면 효과가 너무 자주 실행됩니다.
   
   
   
   1. 책임은 사용자에게 맡기십시오. 필요한 경우 useMemo / useCallback 사용하여 적절한 값을 제공합니다. => 그렇지 않은 경우가 많습니다. 그리고 그들이 한다면 그것은 아주 장황합니다.
   
   
   2. 사용자 정의 후크에 대한 추가 인수를 허용하여 입력의 깊이를 제공하고 입력 자체 대신 이를 사용합니다. 나는 이것을 사용하고 있다. 그러나 "exhaustive-deps" 규칙을 어깁니다. (실제로 나는 이것을 사용하고 추가 인수가 제공되지 않으면 일반 deps로 되돌아갑니다. 강력한 패턴이라고 생각합니다.)
   
   
3. 사용자 지정 후크에 대해 제대로 관리되지 않는 종속성은 내부 효과로 인해 무한 비동기 루프를 생성합니다. 이를 방지하기 위해 방어 프로그래밍을 사용했지만 "가짜"가 추가됩니까? 종속성( asyncData ). 이것은 "exhaustive-deps" 규칙을 다시 깨뜨립니다.

생각보다 설명이 길었지만... 후크를 제대로 사용하지 않으려는 노력이 반영된 것 같습니다. 이러한 어려움을 명확하게 하기 위해 제가 할 수 있는 다른 일이 있으면 알려주십시오.

여기에서 모든 노력에 감사드립니다!

@gaearon 님

1. 최소한의 비동기식 데이터 가져오기 예제 CodeSandbox 예제입니다.

2. 사용자는 json api 에서 가져온 5개의 lorem ipsum 제목 문자열을 볼 것으로 예상됩니다.

3. 의도한 API로 데이터 가져오기를 위한 사용자 정의 후크를 만들었습니다.

const { data, isLoading, isError } = useDataApi('https://jsonplaceholder.typicode.com/posts')

사용자 정의 useDataApi 후크의 내부:

...
  const fetchData = async () => {
    let response;
    setIsError(false);
    setIsLoading(true);

    try {
      response = await fetch(url).then(response => response.json());

      setData(response);
    } catch (error) {
      setIsError(true);
    }

    setIsLoading(false);
  };

  useEffect(
    () => {
      fetchData();
    },
    [url]
  );
...

문제는 이 코드

  useEffect(
    () => {
      fetchData();
    },
    [url]
  );

여기서 react-hooks/exhaustive-deps 는 내 종속성 배열에 fetchData 를 추가하고 url 를 제거해야 한다는 경고를 발생시킵니다.

이 후크를 다음으로 바꾸면

  useEffect(
    () => {
      fetchData();
    },
    [fetchData]
  );

그런 다음 지속적으로 요청을 실행하고 절대 멈추지 않습니다. 이는 물론 큰 문제입니다. 내 코드에 버그가 있는지 또는 react-hooks/exhaustive-deps 가 가양성을 실행하는지 잘 모르겠습니다.

도움을 주시면 감사하겠습니다. 정말 고마워.

추신: useEffect가 데이터 가져오기에 적합하지 않다는 귀하의 의견을 읽었지만, 반응 문서 는 useEffect 데이터가 데이터 가져오기에 적합하다는 확신을 주는 Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects 라고 주장합니다. 그래서 지금은 조금 혼란스럽습니다 😕

@jan-stehlik fetchData를 useCallback으로 래핑해야 합니다. https://codesandbox.io/s/pjmjxprp0m 에서 필요한 변경 사항으로 귀하의 코드 및 상자를 분기했습니다.

매우 도움이 됩니다 .

내가 아는 한 값이 useEffect 내부에 없으면 종속성의 일부가 아니어야 합니다(틀린 경우 수정).

나는 당신이 여기에서 틀렸다고 생각합니다. 또는 오히려 약간 혼란 스럽습니다. 당신이 사용하는 handleEvent 당신의 효과 내부. 그러나 당신은 그것을 선언하지 않습니다. 이것이 읽는 값이 오래된 이유입니다.

흥미로운.

효과 내에서 handleEvent를 사용하고 있습니다. 그러나 당신은 그것을 선언하지 않습니다. 이것이 읽는 값이 오래된 이유입니다.

_"하지만 당신은 그것을 선언하지 않습니다"_은(는) 무슨 뜻인가요?
효과 아래에 선언됩니다(다른 모든 핸들러와 동일).

아니면 핸들러가 상태 값을 사용하고 효과가 핸들러를 연결하기 때문에 효과가 해당 상태 값에 의존한다는 것을 의미합니까?

아니면 핸들러가 상태 값을 사용하고 효과가 핸들러를 연결하기 때문에 효과가 해당 상태 값에 의존한다는 것을 의미합니까?

예,이 기능을 사용하는 경우 중 하나는 deps에 선언 (그 경우로 포장한다 useCallback 을 다시 피하기 위해), 또는 모든 기능 사용.

좋아 이것은 나에게 새로운 소식이다! @gaearon을 입력해주셔서 감사합니다 :)
나는 단지 그것이 나(그리고 다른 사람들에게?)

효과가 함수를 호출, 전달 또는 수행하는 경우 해당 deps 배열에 전달해야 합니다.
함수 자체 또는 이 함수가 사용하는 변수입니다.
함수 구성 요소/사용자 정의 후크 내에서 함수가 선언된 경우 구성 요소 또는 사용자 정의 후크가 실행될 때마다 다시 생성되지 않도록 useCallback 로 감싸는 것이 좋습니다.

나는 문서에서 그것을 보지 못했다고 말해야 한다.
_Note_ 섹션에 추가해도 괜찮습니까?

메모
입력 배열은 효과 함수에 인수로 전달되지 않습니다. 그러나 개념적으로 그것이 그들이 나타내는 것입니다. 효과 함수 내에서 참조되는 모든 값은 또한 입력 배열에 나타나야 합니다. 미래에는 충분히 발전된 컴파일러가 이 배열을 자동으로 생성할 수 있습니다.

편집하다
한 가지 더, 내 예에서 handleEvent (또는 그러한 이유로 다른 핸들러)를 래핑할 때 useCallback 대한 dep는 무엇입니까? event 자체인가요?

나는 문서에서 그것을 보지 못했다고 말해야 한다.

문서에는 "효과 함수 내에서 참조되는 모든 값이 입력 배열에도 나타나야 합니다"라고 나와 있습니다. 기능도 가치입니다. 나는 우리가 이것을 더 잘 문서화해야 한다는 데 동의합니다. 이것이 이 스레드의 전부입니다 :-) 나는 이것에 관한 새 문서 페이지에 대한 사용 사례를 수집하고 있습니다.

한 가지 더, 내 예에서 handleEvent(또는 그러한 이유로 다른 핸들러)를 래핑할 때 useCallback의 dep는 무엇입니까? 이벤트 자체인가요?

당신이 무슨 뜻인지 확실하지. 함수 외부에서 참조하는 모든 값입니다. useEffect 에서처럼.

나는 이것을 종속성으로 함수로 생각하지 않았다고 생각합니다. 내 정신 모델이 잘못되었습니다. 내 구성 요소 / 후크에 소품이나 인수로 들어온 경우에만 종속성으로 함수를 전달하는 것처럼 생각했습니다. 저를 위해 이것을 명확히 해 주셔서 감사합니다.

useCallback 에 관해서는 다음과 같이 사용했습니다.

const memoHandleEvent = useCallback(
    handleEvent
);

물론 전달 memoHandleEvent 하는 종속성 useEffect 웰에 관해서 addEventListener INSEAD 실제의 handleEvent 기능. 작동하는 것 같으면 이것이 적절하고 관용적인 방법이기를 바랍니다.

참고 두 번째 인수가 없는 useCallback 는 아무 작업도 수행하지 않습니다.

다시 말하지만 완전한 샌드박스가 필요합니다. 이와 같은 불완전한 설명으로 수정 사항이 올바른지 여부를 알 수 없습니다.

두 번째 인수가 없는 useCallback은 아무 작업도 수행하지 않습니다.

아르그! :찡긋:ㅋㅋㅋ

다시 말하지만 완전한 샌드박스가 필요합니다. 이와 같은 불완전한 설명으로 수정 사항이 올바른지 여부를 알 수 없습니다.

아, 이것은 위에서 동일한 링크 입니다. 방금 업데이트했습니다 :)

CodeSandbox 링크를 업데이트하지 마십시오. PI는 원래 그대로 필요합니다. 그렇지 않으면 링크에 대한 린트 규칙을 테스트할 수 없습니다. 두 개의 다른 솔루션이 있는 경우 두 개의 별도 샌드박스를 만들 수 있습니까? 그래서 하나하나 확인할 수 있어요.

어머 미안합니다! :PI가 내 계정의 샌드박스 수를 초과했습니다. 일부를 삭제하고 다른 것을 생성하겠습니다(그리고 원본의 변경 사항을 되돌립니다).

@gaearon useCallback 솔루션에 대한 두 번째 링크입니다.

괜찮다고 생각하는 시나리오가 있지만 린터가 불평합니다. 내 샘플:

코드샌드박스

샘플이 나타내려는 것은 사용자가 버튼을 클릭할 때 이전에 제공된 Id 및 함수를 기반으로 새 데이터를 요청하도록 요청하는 것입니다. Id가 변경되면 새 데이터를 요청하지 않아야 합니다. 다시 로드를 위한 새 요청만 새 데이터 요청을 트리거해야 합니다.

여기의 예는 약간 인위적입니다. 내 실제 응용 프로그램에서 React는 훨씬 더 큰 웹 응용 프로그램의 작은 부분인 DIV에 있습니다. 전달되는 함수는 Redux 및 mapDispatchToProps를 통해 이루어지며, 여기서 작업 생성은 Id를 사용하고 데이터를 가져오고 저장소를 업데이트하기 위해 ajax 요청을 합니다. refreshRequest 소품은 React.createElement를 통해 전달됩니다. 원래 구현에서는 클래스 구성 요소에 다음과 같은 코드가 있었습니다.

componentDidUpdate (prevProps) { const { getData, someId, refreshRequest} = this.props; if (prevProps.refreshRequest!== this.props.refreshRequest) { getData(someId); } }

효과 후크를 사용하여 동일한 동작을 구현하려고 합니다. 그러나 샘플에 쓰여진 것처럼 린터는 다음과 같이 불평합니다.

경고 React Hook useEffect에 'getData' 및 'someId' 종속성이 누락되었습니다. 포함하거나 종속성 배열을 제거하십시오.

린터가 원하는 모든 것을 추가하면 사용자가 샘플 useEffect에서 버튼 중 하나를 클릭하면 트리거됩니다. 그러나 새 데이터 요청 버튼을 눌렀을 때만 트리거되기를 원합니다.

의미가 있기를 바랍니다. 불분명한 부분이 있다면 더 명확히 하고자 합니다. 감사합니다!

방금 [email protected] 를 게시했는데 이는 베어 함수 종속성을 감지하기 위한 실험적 지원이 있습니다( useCallback 없이는 그다지 유용하지 않은 경향이 있음). 다음은 GIF입니다.

여러분의 프로젝트에서 시도해 보고 어떤 느낌인지 알 수 있다면 좋겠습니다! (https://github.com/facebook/react/pull/15026에서 특정 흐름에 대해 댓글을 달아주세요.)

내일 이 스레드의 예제에서 시도할 것입니다.

아직 해보지는 않았지만 호이스팅도 가능한지 궁금합니다. 이것은 내가 그 자리에서 생각해낸 "최소 예"일 뿐이므로 아무 쓸모가 없지만 return 문을 더 쉽게 볼 수 있도록 호이스트 선언을 많이 사용합니다.

function Component() {
  useEffect(() => {
    handleChange
  }, [handleChange])

  return null

  function handleChange() {}
}

린터에 관한 한 useEffect 처럼 작동하도록 다른 기능을 구성하는 옵션이 규칙에 있으면 좋을 것입니다. 예를 들어, AJAX 호출을 수행하는 효과에 대해 비동기 함수를 쉽게 사용할 수 있도록 이것을 추가했습니다. 그러나 이와 같이 모든 exhaustive-deps linting 이점을 잃게 됩니다.

const useAsyncEffect = (fn, ...args) => {
    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        fn();
    }, ...args);
};

편집: 신경쓰지 마세요. 규칙의 additionalHooks 옵션을 사용하여 이것이 이미 가능하다는 것을 알았습니다.

안녕하세요 여러분,
https://codesandbox.io/s/znnmwxol7l 의 예가

아래는 내가 원하는 것입니다.

function App() {
  const [currentTime, setCurrentTime] = React.useState(moment());

  const currentMonth = React.useMemo(
    () => {
      console.log("RUN");
      return currentTime.format("MMMM");
    },
    [currentTime.format("MMMM")] // <= this proplem [currentTime]
  );

  return (
    <div className="App">
      <h1>Current month: {currentMonth}</h1>
      <div>
        <button
          onClick={() => setCurrentTime(currentTime.clone().add(1, "days"))}
        >
          + 1 day
        </button>
      </div>
      <div>{currentTime.toString()}</div>
    </div>
  );
}

그러나 이것이 내가 얻는 것입니다.

  const currentMonth = React.useMemo(
    () => {
      console.log("RUN");
      return currentTime.format("MMMM");
    },
    [currentTime] // <= this proplem
  );

currentTime 변경될 때마다 currentMonth 재계산 불필요

또는 어떻게 든 아래에서 할 수 있습니다.

  const currentMonth = React.useMemo(
    () => {
      return currentTime.format("MMMM");
    },
    [myEqualityCheck(currentTime)]
  );

이미 답변이 되었다면 죄송합니다. 위의 스레드에서 볼 수 없습니다.
마운트 시에만 useEffect 후크를 실행하는 방법은 빈 입력 배열을 두 번째 매개변수로 정의하는 것입니다. 그러나 그렇게 할 때 철저한 deps는 해당 입력 인수를 포함하는 것에 대해 불만을 표시합니다. 그러면 업데이트 시에도 실행되도록 효과가 변경됩니다.
철저한 deps가 활성화된 마운트에서만 useEffect를 실행하는 접근 방식은 무엇입니까?

@einarq 내 생각에는 on-mount useEffect 모든 참조 값이 절대 변경되지 않도록 해야 합니다. useMemo 와 같은 다른 후크를 사용하여 달성할 수 있습니다. 그 후에는 이 ESlint 규칙이 모든 참조를 배열에 추가하는지 여부에 관계없이(자동 수정 포함) 코드는 한 번만 실행됩니다.

@einarq 스레드의 다른 곳에서 언급했듯이

@nghiepit 당신의 예는 나에게 정말 의미가 없습니다. 입력이 currentTime.format("MMMM") 이면 useMemo 는 이미 계산 했기 때문에 아무 것도 최적화하지 않습니다. 따라서 불필요하게 두 번 계산하고 있습니다.

additionalHooks 옵션의 콜백인 인수 인덱스를 지정할 수 있습니까? 나는 그것이 첫 번째 https://github.com/facebook/react/blob/9b7e1d1389e080d19e71680bbbe979ec58fa7389/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js# 가 될 것이라고 지금 코드에서 가정하고 있음을 알았습니다. L1081

현재 불가능합니다. 우리의 일반적인 지침은 사용자 정의 Hooks가 deps 인수를 갖지 않는 것을 선호해야 한다는 것입니다. 왜냐하면 deps가 구성되는 방식에 대해 생각하기가 매우 어려워지기 때문입니다. 함수를 사용하는 경우 대신 사용자에게 useCallback 를 요청할 수 있습니다.

@CarlosGines OP 게시물에서 요청한 대로 CodeSandbox를 만들 수 있습니까? 이유를 묻는 것입니다. 그렇지 않으면 변경 사항을 확인하기 어렵습니다. 특히 TypeScript로 작성된 경우.

더 유용한 메시지와 더 똑똑한 휴리스틱으로 [email protected] 를 게시했습니다. 프로젝트가 안정화되기 전에 시도해 보십시오.

이 스레드의 대부분의 예제에서 문제를 해결하는 데 도움이 되는 합리적인 조언을 제공할 것으로 기대합니다.

[email protected] 이어야 합니까?

예.

실제로 몇 가지 작은 변경 사항이 포함된 [email protected] 을 게시했습니다.

@gaearon 혹시 eslint 이 코드샌드박스 안에서 작동하게 해주셨나요?

@einarq 아마도 이와 같은 것이 작동할까요?

const useDidMount = fn => {
  const callbackFn = useCallback(fn)
  useEffect(() => {
    callbackFn()
  }, [callbackFn])
}

나는 실제로 플러그인이 간단한 CRA 앱에서 작동하도록 할 수 없다고 말하기 부끄럽습니다( 내 스니펫 기반).
다음은 코드샌드박스에서 분기 된 리포지토리입니다.

문서 에서 이 메모를 보았습니다.

참고: Create React App을 사용하는 경우 이 규칙을 직접 추가하는 대신 해당 규칙을 포함하는 react-script의 릴리스를 기다리십시오.

그런데 지금은 CRA로 테스트 할 수 있는 방법이 없나요? 👂

네, ESLint 구성에 추가할 때까지 꺼내서 추가해야 합니다. 분기에서 꺼내고 병합하지 않을 수 있습니다. :-)

안녕하세요,

우선: 커뮤니티 및 일반적으로 하고 있는 놀라운 작업과 긴밀하게 협력해 주셔서 감사합니다!

Fetch API를 중심으로 구축한 사용자 지정 후크에 문제가 있습니다. 이 문제를 보여주기 위해 Codesandbox를 만들었습니다.

Codesandbox의 예

https://codesandbox.io/s/kn0km7mzv

참고: 문제(아래 참조)로 인해 무한 루프가 발생하고 문제를 시연하는 데 사용하는 DDoS jsonplaceholder.typicode.com 를 원하지 않습니다. 따라서 카운터를 사용하는 간단한 요청 제한기를 포함했습니다. 이것은 문제를 시연하기 위해 필요하지는 않지만 이 훌륭한 프로젝트에 무제한의 요청을 실행하는 것은 잘못되었다고 느꼈습니다.

설명

아이디어는 API 요청의 3가지 가능한 상태인 로드, 성공 및 오류를 보다 쉽게 ​​처리할 수 있도록 하는 것입니다. 따라서 isLoading , response 및 error. It makes sure that either 응답 or 오류 is set and updates 3개 속성을 반환하는 사용자 정의 후크 useFetch() 를 빌드했습니다 response is set and updates isLoading . As the name implies, it uses the Fetch` API.

이를 위해 3개의 useState 후크를 사용합니다.

  const [isLoading, setIsLoading] = useState(false);
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

useEffect 후크:

useEffect(
    () => {
      fetch(url, fetchConfig)
        .then(/* Handle fetch response... See Codesandbox for the actual implementation */)
    },
    [url]
  );

그것은 오랫동안의 종속 배열로로 벌금을 작동 useEffect 만 포함 [url] . fetchConfig (= [url, fetchConfig] )를 추가하면 무한 루프가 발생합니다. 우리의 특정 사용 사례의 경우 url 변경되었지만 린터가 [url] ( v1.4.0 및 v1.5.0-beta.1 ).

사용자 정의 후크가 끝나면 3개의 상태 변수가 객체로 반환됩니다.

  return {
    error,
    isLoading,
    response
  };

Linting 제안이 타당하기 때문에 이것이 이 문제에 대한 지침을 요청하기에 적합한 곳인지 확실하지 않습니다. 그렇지 않다면 죄송합니다.

fetchConfig 변경되면 어떻게 되나요? 정적일 것으로 예상하는 이유는 무엇입니까?

괜찮아. 지난 주의 수정 사항 및 개선 사항과 함께 [email protected] 를 출시했습니다.
이 스레드는 문제를 일으키는 다양한 패턴을 찾는 데 큰 도움이 되었습니다.

여러분께 진심으로 감사드립니다. (특히 샌드박스를 제공해주신 분들. :-)

경우가 많기 때문에 일일이 일일이 일일이 일일이 자세히 답변드리지는 않겠습니다.

대신, 우리는 앞으로 며칠 안에 일반적인 조리법과 문제를 작성하고 문서에서 링크할 것입니다. 이 스레드의 모든 일반적인 패턴이 포함되는지 확인합니다(또는 드문 패턴에 대해서는 별도의 문제에서 후속 조치를 요청하십시오).

예제가 게시되면 여기에 주석을 달고 올바른 수정을 보여주는 관련 답변/예제에 대한 링크를 추가하여 CodeSandbox가 포함된 모든 주석을 편집하겠습니다. 이것이 당신과 미래의 독자들에게 도움이 되기를 바랍니다.

건배!

❤️

@timkraut 는 deps에 fetchConfig 를 추가할 수 있어야 하고 구성 요소는 참조가 유지되도록 메모로 감싸야 합니다.
예: https://codesandbox.io/s/9l015v2x4w

이것에 대한 내 문제는 이제 구성 요소가 후크의 구현 세부 사항에 대해 알고 있어야 한다는 것입니다...

이 스레드가 여전히 예제 토론에 열려 있는지 확실하지 않지만 여전히 모범 사례를 중심으로 머리를 감싸고 있습니다. 내 질문은 useEffect 후크가 종속성 배열과 함께 실행되는 시점을 제어하고 해당 시점의 값을 사용하는 것과 린트 규칙을 우회하기 위해 별도의 참조를 선언해야 하는 것에 관한 것입니다.

예시

https://codesandbox.io/s/40v54jnkyw

이 예에서는 주기적으로 입력 값을 자동 저장하려고 합니다.

설명

5초마다 코드는 현재 값을 자동 저장하려고 합니다(지금은 화면에 출력하기만 하면 됨). 린터는 효과가 발생하는 빈도를 변경하는 종속성 배열에 모든 입력 값을 포함해야 합니다.

  useEffect(
    () => {
      if (autoSaveTick % 5 === 0) {
        setAutosaveValue(
          `${input1Value.value}, ${input2Value.value}, ${input3Value.value}`
        );
      }
    },
    [autoSaveTick]
  );

내가 보는 대안은 정의된 useTick 및 useInterval 후크와 유사한 구현을 갖는 것입니다. 여기서 ref에 할당된 콜백이 있습니다. 린트 규칙에 맞추기 위해 불필요한 함수 재정의를 일으킬 것 같습니다.

이전 변수 변경(변수 A) 시 다른 변수 값(변수 B 및 변수 C)을 사용하는 하나의 변수(변수 A)가 변경될 때 실행되는 효과를 작성하는 모범 사례를 찾고 있습니다.

fetchConfig 변경되면 어떻게 되나요? 정적일 것으로 예상하는 이유는 무엇입니까?

종속성 배열에 추가하는 것이 좋습니다. 우리의 특정 비즈니스 사례에서 이것은 절대 일어날 수 없지만 어쨌든 추가하는 것이 좋은 생각이라고 생각합니다.

이것에 대한 내 문제는 이제 구성 요소가 후크의 구현 세부 사항에 대해 알고 있어야 한다는 것입니다...

그것이 바로 우리가 가지고 있는 문제이기도 합니다./ 우리 구현에서는 본문을 더 쉽게 설정하기 위해 추가 속성을 사용하므로 이 후크를 사용할 때마다 2개의 useMemo() 호출을 사용해야 합니다. 이 한계를 극복하는 방법은 아직 확실하지 않습니다. 아이디어가 있으면 알려주세요!

빈 배열을 전달할 때 규칙이 불평하지 않고 종속성이 한 번만 있는 useEffect를 어떻게 실행할 수 있습니까?

다음과 같이 말하십시오.

useEffect(() => { init({ dsn, environment}) }, [])

이것에 대한 내 문제는 이제 구성 요소가 후크의 구현 세부 사항에 대해 알고 있어야 한다는 것입니다...

나는 이것이 구현 세부 사항이라고 말하지 않을 것입니다. 그것은 당신의 API입니다. 객체가 전달되면 언제든지 변경될 수 있다고 가정합니다.

실제로 항상 정적이라면 Hook 팩토리에 대한 인수로 만들 수 있습니다. 마찬가지로 createFetch(config) 반환이 useFetch() . 최고 수준의 공장에 전화합니다.

조금 이상한건 이해합니다. 현재 작업 중인 useSubscription 비슷한 문제가 있습니다. 그러나 이것은 일반적인 문제이므로 useMemo 실제로 합법적인 답변임을 의미할 수 있으며 사람들은 이러한 경우에 익숙해져야 합니다.

실제로 — 우리는 앞으로 이것에 대해 더 많이 살펴볼 것입니다. 그러나 잠재적으로 동적인 개체를 정적 개체로 취급해서는 안 됩니다. 그러면 사용자가 변경할 수 없기 때문입니다.

@asylejmani 상단 게시물에서 요청한 대로 사용 사례에 대한 세부 정보를 제공하지 않았습니다. 누군가가 귀하의 질문에 대한 답변을 제공할 수 있기를 기대하는 이유는 무엇입니까?

규칙의 요점은 environment 및 dsn 가 시간이 지남에 따라 변경될 수 있으며 구성 요소가 이를 처리해야 한다는 것을 알려주는 것입니다. 따라서 구성 요소가 버그가 있거나(해당 값에 대한 변경 사항을 처리하지 않기 때문에) 중요하지 않은 고유한 경우가 있습니다(이 경우 이유를 설명하는 주석을 무시하는 린트 규칙을 추가해야 함).

두 경우 모두 당신이 무엇을 묻는지 명확하지 않습니다. 규칙은 상황이 변할 수 있다고 불평하며 그 변경을 처리하지 않습니다. 완전한 예가 없으면 처리가 필요하지 않다고 생각하는 이유에 대해 스스로 답할 수 있습니다.

@gaearon 더 명확하지

나는 빈 배열이 그렇게 하는 것보다 인상을 받았지만 규칙은 항상 배열에 종속성을 포함하라고 말합니다.

@asylejmani componentDidMount 와 같은 클래스 라이프 사이클 메서드에서 가장 큰 문제는 우리가 그것을 격리된 메서드로 생각하는 경향이 있지만 실제로는 흐름의 일부라고 생각합니다.
componentDidMount 에서 무언가를 참조하는 경우 componentDidUpdate 에서도 처리해야 할 것입니다. 그렇지 않으면 구성 요소에 버그가 생길 수 있습니다.
이것은 규칙이 수정하려는 것이므로 시간이 지남에 따라 값을 처리해야 합니다.

1. 마운트된 구성 요소, 소품으로 작업 수행
2. 구성 요소 업데이트(예: prop 값이 변경됨), 새 prop 값으로 작업 수행

1번은 componentDidMount / useEffect 본문에 논리를 넣는 곳입니다.
2번은 componentDidUpdate / useEffect deps에 논리를 넣는 곳입니다.

규칙은 흐름의 두 번째 부분을 수행하지 않고 있다고 불평합니다.

@gaearon 더 명확하지

나는 빈 배열이 그렇게 하는 것보다 인상을 받았지만 규칙은 항상 배열에 종속성을 포함하라고 말합니다.

나와 @asylejmani 는 여기에서 같은 페이지에 있다고 생각하지만 @gaearon 이 말하는 것은 실제로 종속성이 있는 경우에만 마운트에 대한 효과를 실행하는 것이 잘못된 것일 수 있다는 것입니다.
정당한 말입니까? 빈 배열을 제공하는 것은 "내가 하는 일을 알고 있습니다"라고 말하는 것과 비슷하다고 생각하지만 여전히 규칙을 유지하려는 이유를 알 수 있습니다.

아직 샌드박스를 제공하지 못해 죄송합니다. 나는 Create React App 예제로 다른 날 밤을 시작했는데 샌드박스에서 eslint를 실행하는 방법을 찾을 수 없었고, 먼저 저장하지 않고 브라우저를 다시 로드할 때 샌드박스를 잃어버렸습니다(CodeSandbox 임시 저장, 내 잘못).
그 다음 나는 잠자리에 들어야 했고, 그 이후로 시간이 없었습니다.

어쨌든, 나는 당신이 말하는 것을 이해하고 정상적인 시나리오에서는 이러한 종속성을 포함하고 마운트에서만 실행하기에 충분하다고 가정하지 않는 것이 가장 좋습니다.

이에 대한 유효한 사용 사례도 있을 수 있지만 설명하거나 좋은 예를 제시하기가 약간 어렵기 때문에 필요할 때 인라인 규칙을 비활성화하면서 살겠습니다.

@asylejmani 는 https://github.com/facebook/react/issues/14920#issuecomment -466378650과 유사한 사용 사례입니다. 이 경우 규칙이 시나리오를 이해할 수 있다고 생각하지 않으므로 해당 유형의 코드에 대해 수동으로 비활성화해야 합니다. 다른 모든 경우에는 규칙이 제대로 작동합니다.

이것이 의미가 있는지 확실하지 않지만 나에게 매우 일반적인 시나리오는 다음과 같습니다.

useEffect(() => {
    if(!dataIsLoaded) { // flag from redux
        loadMyData(); // redux action creator
    }
}, []);

이 두 종속성은 모두 redux에서 가져옵니다. 데이터(이 경우)는 한 번만 로드되어야 하며 작업 생성자는 항상 동일합니다.

이것은 redux에만 해당되며 eslint 규칙은 이것을 알 수 없으므로 경고해야 하는 이유를 알 수 있습니다. 빈 배열을 제공하는 것이 규칙을 비활성화해야 하는지 여전히 궁금하십니까? 일부만 제공했지만 전부는 아닌 경우 또는 전혀 제공하지 않은 경우 누락된 deps에 대해 규칙이 알려주는 것이 마음에 듭니다. 빈 배열은 나와 다른 것을 의미합니다. 하지만 저만 그럴 수도 있어요 :)

모든 노력에 감사드립니다! 그리고 개발자로서 우리의 삶을 더 좋게 만들기 위해 :)

내 사용 사례는 훨씬 간단하고 물론 모든 종속성을 추가할 수 있으며 여전히 동일하게 작동하지만 일부 종속성은 있지만 다른 항목이 누락된 경우 규칙이 "경고"한다는 인상을 받았습니다.

@einarq 의 사용 사례는 내가 몇 번 사용한 것입니다. 예를 들어 "componentDidMount"에서 데이터가 없는 경우(redux 또는 무엇이든) 로드합니다.

또한 이러한 경우 인라인 규칙을 비활성화하는 것이 최선의 선택이라는 데 동의합니다. 당신은 당신이하는 일을 정확히 알고 있습니다.

내 모든 혼란은 [] 대 [일부]였다고 생각하고 물론 멋진 작업에 대해 @gaearon 에게 감사드립니다 :)

나와 @asylejmani 는 여기에서 같은 페이지에 있다고 생각하지만 @gaearon 이 말하는 것은 실제로 종속성이 있는 경우에만 마운트에 대한 효과를 실행하는 것이 잘못된 것일 수 있다는 것입니다. 정당한 말입니까?

예. 구성 요소가 소품에 대한 업데이트를 처리하지 않는 경우 일반적으로 버그가 있습니다. useEffect 의 디자인은 당신이 그것에 직면하도록 강요합니다. 물론 이 문제를 해결할 수는 있지만 기본적으로 이러한 경우를 처리하도록 유도하는 것입니다. 이 의견은 잘 설명되어 있습니다: https://github.com/facebook/react/issues/14920#issuecomment -470913287.

이 두 종속성은 모두 redux에서 가져옵니다. 데이터(이 경우)는 한 번만 로드되어야 하며 작업 생성자는 항상 동일합니다.

동일한 경우 종속성에 포함해도 문제가 되지 않습니다. 나는 그것을 강조하고 싶습니다 — 당신의 의존성이 결코 변하지 않는다고 확신한다면 그것들을 나열하는 데 아무런 해가 없습니다 . 그러나 나중에 변경되는 경우(예: 상위 구성 요소가 상태에 따라 다른 기능을 전달하는 경우) 구성 요소는 이를 올바르게 처리합니다.

빈 배열을 제공하는 것이 규칙을 비활성화해야 하는지 여전히 궁금하십니까?

아니요. 빈 배열을 제공한 다음 일부 props 또는 state가 오래된 이유를 궁금해하는 것은 말 그대로 가장 흔한 실수입니다.

>

의미가 큽니다. 감사합니다.

2019년 3월 8일 15:27에 Dan Abramov [email protected]이 다음과 같이 썼습니다.

나와 @asylejmani 는 여기에서 같은 페이지에 있다고 생각하지만 @gaearon 이 말하는 것은 실제로 종속성이 있는 경우에만 마운트에 대한 효과를 실행하는 것이 잘못된 것일 수 있다는 것입니다. 정당한 말입니까?

예. 구성 요소가 소품에 대한 업데이트를 처리하지 않는 경우 일반적으로 버그가 있습니다. useEffect의 디자인은 당신이 그것에 직면하도록 강요합니다. 물론 이 문제를 해결할 수는 있지만 기본적으로 이러한 경우를 처리하도록 유도하는 것입니다. 이 주석은 그것을 잘 설명합니다: #14920 (comment).

이 두 종속성은 모두 redux에서 가져옵니다. 데이터(이 경우)는 한 번만 로드되어야 하며 작업 생성자는 항상 동일합니다.

동일한 경우 종속성에 포함해도 문제가 되지 않습니다. 나는 그것을 강조하고 싶습니다 — 당신의 의존성이 결코 변하지 않는다고 확신한다면 그것들을 나열하는 데 아무런 해가 없습니다. 그러나 나중에 변경되는 경우(예: 상위 구성 요소가 상태에 따라 다른 기능을 전달하는 경우) 구성 요소는 이를 올바르게 처리합니다.

빈 배열을 제공하는 것이 규칙을 비활성화해야 하는지 여전히 궁금하십니까?

아니요. 빈 배열을 제공한 다음 일부 props 또는 state가 오래된 이유를 궁금해하는 것은 말 그대로 가장 흔한 실수입니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

@피곤한

그러면 실제 업데이트가 커밋되기 전에 부작용이 발생하여 원하는 것보다 더 자주 부작용이 트리거될 수 있습니다.

이게 무슨 뜻인지 잘 모르겠습니다. 예를 들어 줄 수 있습니까?

우리는 오늘 @threepointone 으로

Lint 규칙에서 수정됨

관련 없는 useEffect 종속성

• https://github.com/facebook/react/issues/14920#issuecomment -467195930 @ksaldana1 작성
• https://github.com/facebook/react/issues/14920#issuecomment -467212561 @bugzpodder 작성 (첫 번째 스니펫)
• https://github.com/facebook/react/issues/14920#issuecomment -466205376 @dan-lee

이 규칙은 합법적인 시나리오가 있으므로 더 이상 "외부" dep를 useEffect 추가하는 것을 방지하지 않습니다.

동일한 구성 요소에 있지만 효과 외부에서 정의된 기능

• https://github.com/facebook/react/issues/14920#issuecomment -468512623 @jaydenseric
• https://github.com/facebook/react/issues/14920#issuecomment -467212561 @bugzpodder 작성 (두 번째 스니펫)

Linter는 지금 안전한 경우에 대해 경고하지 않지만 다른 모든 경우에는 더 나은 제안을 제공합니다(예: 효과 내에서 함수를 이동하거나 useCallback 래핑).

사용자 코드에서 수정할 가치가 있음

props 변경 시 상태 재설정

• https://github.com/facebook/react/issues/14920#issuecomment -467101598 @MrLeebo

이것은 더 이상 린트 위반을 생성하지 않지만 props에 대한 응답으로 상태를 재설정하는 관용적 방법은 다릅니다 . 이 솔루션에는 일관성 없는 렌더링이 추가로 포함되므로 바람직한지 잘 모르겠습니다.

"내 비 기능 값은 일정합니다"

• https://github.com/facebook/react/issues/14920#issuecomment -468966055 @jamesmosier
• https://github.com/facebook/react/issues/14920#issuecomment -466587661 @MoradiDavijani 작성
• https://github.com/facebook/react/issues/14920#issuecomment -466144466 @billyjanitsch 작성
• https://github.com/facebook/react/issues/14920#issuecomment -470601524 @timkraut 작성
• https://github.com/facebook/react/issues/14920#issuecomment -467785873 @thsorens (일부)

후크는 가능한 한 정확함을 추구합니다. 당신이 (경우에 따라서는 생략 할 수 있음) deps를 지정하면, 우리는 강하게 당신이 변경되지 않습니다 생각도 사람을 포함하는 것이 좋습니다. 예, 이 useDebounce 예에서는 지연이 변경 되지 않을 것입니다. 하지만 버그가 발생하면 여전히 버그이지만 Hook은 이를 처리할 수 없습니다. 이것은 다른 시나리오에서도 나타납니다. (예: Hooks는 모든 값이 동적으로 처리되기 때문에 핫 리로딩과 훨씬 더 호환됩니다.)

특정 값이 정적이라고 절대적으로 주장한다면 강제할 수 있습니다.
가장 안전한 방법은 API에서 명시적으로 수행하는 것입니다.

const useFetch = createFetch({ /* config object */});
const useDebounce = createDebounce(500);
const FormInput = createInput({ rules: [emailValidator, phoneValidator] });

그런 다음 render 안에 넣지 않는 한 분명히 변경할 수 없습니다. (이것은 Hook의 관용적 사용법이 아닙니다.) 하지만 <Slider min={50} /> can never change 라는 말은 실제로 유효하지 않습니다 — 누군가 그것을 <Slider min={state ? 50 : 100} /> 쉽게 변경할 수 있습니다. 실제로 누군가는 다음과 같이 할 수 있습니다.

let slider
if (isCelsius) {
  slider = <Slider min={0} max={100} />
} else {
  slider = <Slider min={32} max={212} />
}

누군가 isCelsius 상태를 전환하면 min 변경되지 않는다고 가정하는 구성 요소가 업데이트되지 않습니다. 이 경우 Slider 가 동일한지 여부는 분명하지 않습니다(그러나 트리에서 동일한 위치에 있기 때문일 것입니다). 따라서 이것은 코드를 변경하는 측면에서 중요한 발판입니다. React의 주요 포인트는 업데이트가 초기 상태처럼 렌더링된다는 것입니다(보통 어느 것이 어느 상태인지 알 수 없음). prop 값 B를 렌더링하든 prop 값 A에서 B로 이동하든 상관없이 동일하게 보이고 작동해야 합니다.

이것은 바람직하지 않지만 경우에 따라 적용 메커니즘은 값이 변경될 때 경고하는(그러나 첫 번째 값을 제공하는) 후크일 수 있습니다. 적어도 그때는 주목받을 가능성이 더 큽니다.

function useMyHook(a) {
  const initialA = usePossiblyStaleValue(a);
  // ...
}

function usePossiblyStaleValue(value) {
  const ref = useRef(value);

  if (process.env.NODE_ENV !== 'production') {
    if (ref.current !== value) { // Or your custom comparison logic
      console.error(
        'Unlike normally in React, it is not supported ' +
        'to pass dynamic values to useMyHook(). Sorry!'
      );
    }
  }

  return ref.current;
}

업데이트를 처리 할 수 없는 합법적인 경우도 있을 수 있습니다. 예를 들어 jQuery 플러그인이나 DOM API와 같이 하위 수준 API가 지원하지 않는 경우와 같습니다. 이 경우 구성 요소의 소비자가 이해할 수 있도록 경고가 여전히 적절합니다. 또는 호환되지 않는 업데이트에서 key 를 재설정하는 래퍼 구성 요소를 만들 수 있습니다. 슬라이더나 체크박스와 같은 리프 구성요소에 더 적합할 것입니다.

"내 기능 값은 일정합니다"

• https://github.com/facebook/react/issues/14920#issuecomment -466399126 @btholt
• https://github.com/facebook/react/issues/14920#issuecomment -467427481 @joelmoss 작성
• https://github.com/facebook/react/issues/14920#issuecomment -470915969 @einarq 작성
• https://github.com/facebook/react/issues/14920#issuecomment -466416518 @svenanders 작성

우선, 그것이 일정하고 최상위 범위로 호이스트되면 린터는 불평하지 않을 것입니다. 그러나 그것은 소품이나 컨텍스트에서 오는 것에는 도움이 되지 않습니다.

그것이 진정 으로 일정하다면 deps로 지정해도 문제가 되지 않습니다. 사용자 정의 Hook 내부의 setState 함수가 구성 요소로 반환된 다음 효과에서 호출하는 경우와 같이. Lint 규칙은 이와 같은 간접 참조를 이해할 만큼 똑똑하지 않습니다. 그러나 다른 한편으로 누구든지 반환하기 전에 나중에 해당 콜백을 래핑할 수 있으며 그 안에 있는 다른 prop 또는 state를 참조할 수 있습니다. 그러면 일정하지 않습니다! 그리고 이러한 변경 사항을 처리하지 못하면 불쾌한 prop/state 버그가 발생합니다. 따라서 지정하는 것이 더 나은 기본값입니다.

그러나 함수 값이 반드시 일정하다는 것은 잘못된 생각입니다. 자체적인 버그 범위 를 생성하지만 메서드 바인딩으로 인해 클래스에서 더 자주 일정 내부 로 이동하거나 useCallback 래핑)

이것의 반대 스펙트럼에는 무한 루프가 발생하는 문제가 있습니다(함수 값은 항상 변경됨). 가능한 경우(동일한 구성 요소에서) 이제 Lint 규칙에서 이를 포착하고 수정 사항을 제안합니다. 그러나 몇 단계 아래로 무언가를 통과하면 까다롭습니다.

여전히 useCallback 로 감싸서 문제를 해결할 수 있습니다. 기술적 으로 함수가 변경되는 것은 유효하며 버그의 위험 없이 이 경우를 무시할 수 없습니다. onChange={shouldHandle ? handleChange : null} 또는 같은 위치에서 foo ? <Page fetch={fetchComments /> : <Page fetch={fetchArticles /> 렌더링 등. 또는 상위 구성 요소 상태를 닫는 fetchComments 있습니다. 변경 될 수 있습니다. 클래스를 사용하면 동작이 자동으로 변경되지만 함수 참조는 동일하게 유지됩니다. 따라서 자녀는 해당 업데이트를 놓칠 것입니다. 자녀에게 더 많은 데이터를 전달하는 것 외에는 옵션이 없습니다. 함수 구성 요소와 useCallback 를 사용하면 함수 ID 자체가 변경되지만 필요한 경우에만 변경됩니다. 따라서 이는 유용한 속성이며 피해야 할 장애물이 아닙니다.

무한 비동기 루프를 감지하기 위한 더 나은 솔루션을 추가해야 합니다. 가장 혼란스러운 측면을 완화해야 합니다. 향후 이에 대한 감지 기능을 추가할 수 있습니다. 다음과 같이 직접 작성할 수도 있습니다.

useWarnAboutTooFrequentChanges([deps]);

이것은 이상적이지 않으며 우리는 이것을 더 우아하게 처리하는 것에 대해 생각할 필요가 있습니다. 내가 좋아하는 경우 동의 이 꽤 불쾌한입니다. 규칙을 위반하지 않고 수정하는 것은 rules 정적으로 만드는 것입니다(예: API를 createTextInput(rules) 로 변경하고 register 및 unregister 을 useCallback . 더 좋은 방법은 register 및 unregister 를 제거하고 dispatch 만 넣는 별도의 컨텍스트로 바꾸는 것입니다. 그런 다음 읽는 것과 다른 기능 ID를 갖지 않을 것임을 보장할 수 있습니다.

공급자가 새 구성 요소가 등록되지 않았지만 자체 부모가 업데이트된 경우 반복적으로 슬픈 많은 계산을 수행하기 때문에 어쨌든 컨텍스트 값에 useMemo 를 추가하고 싶을 것입니다. 따라서 이러한 종류의 문제는 그렇지 않으면 더 눈에 띄지 않을 수 있는 문제를 넣습니다. 나는 이것이 일어날 때 우리가 더욱 두드러지게 만들 필요가 있다는 데 동의하지만.

함수 종속성을 완전히 무시하면 함수 구성 요소와 Hooks에서 더 나쁜 버그로 이어집니다. 그렇게 하면 계속 오래된 props와 state가 표시되기 때문입니다. 그러니 할 수 있을 때 하지 마십시오.

복합 가치 변화에 대응하기

• https://github.com/facebook/react/issues/14920#issuecomment -467200609 @aweary 작성

이 예제가 본질적으로 이벤트 핸들러에 대한 효과를 사용하는 이유가 이상합니다. 이벤트 핸들러에서 동일한 "로그"(양식 제출일 수 있다고 가정)를 수행하는 것이 더 적합해 보입니다. 구성 요소가 마운트 해제될 때 어떤 일이 발생하는지 생각하면 특히 그렇습니다. 효과가 예약된 직후 마운트를 해제하면 어떻게 됩니까? 양식 제출과 같은 일은 이 경우에 "발생하지 않아야" 합니다. 그래서 효과가 잘못된 선택일 수 있는 것 같습니다.

즉, fullName 를 setSubmittedData({firstName, lastName}) 대신 [submittedData] 로 만들고 firstName 읽을 수 있는 종속성을 통해 시도한 작업을 계속 수행할 수 있습니다 lastName .

필수/레거시 코드와 통합

• https://github.com/facebook/react/issues/14920#issuecomment -466378650 @atomiks 작성
• https://github.com/facebook/react/issues/14920#issuecomment -468966055 @jamesmosier

jQuery 플러그인 또는 원시 DOM API와 같은 필수 항목과 통합할 때 약간의 불편함이 예상될 수 있습니다. 즉, 해당 예제에서 효과 를 좀 더 통합할 수 있을 것으로 기대합니다.

아무도 잊지 않았으면 좋겠어! 내가 한 경우 또는 뭔가 명확하지 않은 경우 알려주십시오. 우리는 곧 이것의 교훈을 일부 문서로 바꾸려고 노력할 것입니다.

@gaearon , 시간을 내어 문제를 (@trevorgithub의 #14920(댓글))을 놓쳤습니다 . (많은 분들이 피드백을 많이 주셔서 정말 감사합니다. 제 원래 댓글이 이슈 댓글 중간에 숨겨진 항목 섹션에서 사라진 것 같습니다.)

내 샘플이 '필수/레거시 코드와 통합'에 속한다고 가정하지만 다른 범주도 마찬가지입니까?

'Imperative/Legacy Code와 통합' 문제의 경우 할 수 있는 일이 많지 않을 수 있습니다. 그러한 경우 어떻게 이 경고를 무시하겠습니까? 나는 추측한다:
// eslint-disable-line react-hooks/exhaustive-deps

죄송합니다.

props를 통해 일부 데이터를 받았지만 명시적인 변경이 있을 때까지 해당 props를 사용하고 싶지 않다면 파생된 상태를 갖는 것이 올바른 모델링 방법처럼 들립니다.

"다른 prop이 나올 때까지 prop에 대한 변경을 무시하고 싶습니다"라고 생각하고 있습니다. 그러나 "내 구성 요소에는 상태에서 가져오기 기능이 있습니다. 다른 소품이 변경되면 소품에서 업데이트됩니다.”

일반적으로 파생된 상태는 권장되지 않지만 여기서는 원하는 것처럼 보입니다. 이를 구현하는 가장 간단한 방법은 다음과 같습니다.

const [currentGetData, setCurrentGetData] = useState(getData);
const [prevRefreshRequest, setPrevRefreshRequest] = useState(refreshRequest);

if (prevRefreshRequest !== refreshRequest) {
  setPrevRefreshRequest(refreshRequest);
  setCurrentGetData(getData);
}

useEffect(() => {
  currentGetData(someId);
}, [currentGetData, someId]);

또한 둘 필요가 거라고 useCallback 약 getData 당신이 아래로 전달하는 것이다.

일반적으로 가져오기를 위해 비동기 함수를 전달하는 패턴은 나에게 그늘진 것처럼 보입니다. 귀하의 경우 Redux를 사용하는 것이 합리적이라고 생각합니다. 그러나 부모 구성 요소에 비동기 함수가 정의된 경우 경쟁 조건이 있을 수 있으므로 의심스럽습니다. 효과에 정리가 없으므로 사용자가 다른 ID를 선택할 때 어떻게 알 수 있습니까? 요청이 순서대로 도착하지 않고 잘못된 상태를 설정할 위험이 있습니다. 그래서 그것은 명심해야 할 것입니다. 데이터 가져오기가 구성 요소 자체에 있는 경우 응답에서 setState를 방지하기 위해 "무시" 플래그를 설정하는 효과 정리 기능을 가질 수 있습니다. (물론 데이터를 외부 캐시로 이동하는 것이 더 나은 솔루션인 경우가 많습니다. Suspense도 그렇게 작동합니다.)

이벤트 핸들러에서 동일한 "로그"(양식 제출일 수 있다고 가정)를 수행하는 것이 더 적합해 보입니다.

@gaearon 내가 볼 수있는 문제는 이벤트 핸들러에서 수행하는 것이 업데이트가 커밋되기 전에 부작용이 발생한다는 것을 의미한다는 것입니다. 해당 이벤트의 결과로 구성 요소가 성공적으로 다시 렌더링된다는 엄격한 보장이 없으므로 이벤트 처리기에서 수행하는 것은 시기상조일 수 있습니다.

예를 들어 사용자가 새 검색어를 성공적으로 제출했으며 결과를 보고 있다는 것을 기록하고 싶은 경우입니다. 문제가 발생하여 구성 요소가 발생하면 해당 로그 이벤트가 발생하지 않았으면 합니다.

그런 다음 이 부작용이 비동기식일 수 있으므로 useEffect 사용하면 정리 기능이 제공되는 경우가 있습니다.

useReducer 의 문제도 있습니다. 여기서 기록하려는 값은 이벤트 핸들러에서 사용할 수 없습니다. 그러나 나는 그것이 이미 여러분의 레이더에 있다고 생각합니다 🙂

두 경우 모두 권장하는 접근 방식으로 충분할 수 있습니다. 구성 상태를 구성하는 개별 값에 계속 액세스할 수 있는 형식으로 구성 상태를 저장합니다.

추가 매개변수로 함수를 래핑하고 전달하기 위한 편리한 후크가 있습니다. 다음과 같습니다.

function useBoundCallback(fn, ...bound) {
  return useCallback((...args) => fn(...bound, ...args), [fn, ...bound]);
}

(몇 가지 추가 기능이 있기 때문에 실제로는 조금 더 복잡하지만 위의 내용은 여전히 ​​관련 문제를 보여줍니다.)

사용 사례는 구성 요소가 속성을 자식에게 전달해야 하고 자식이 특정 속성을 수정할 수 있기를 원하는 경우입니다. 예를 들어, 각 항목에 편집 옵션이 있는 목록을 고려하십시오. 부모 개체는 각 자식에게 값을 전달하고 값을 편집하려는 경우 호출할 콜백 함수를 전달합니다. 자식은 어떤 항목 ID가 표시되는지 알지 못하므로 부모는 이 매개변수를 포함하도록 콜백을 수정해야 합니다. 이것은 임의의 깊이에 중첩될 수 있습니다.

이 흐름의 간단한 예는 다음과 같습니다. https://codesandbox.io/s/vvv36834k5 ("이동!"을 클릭하면 구성 요소 경로가 포함된 콘솔 로그가 표시됨)

문제는 이 규칙에서 2개의 린터 오류가 발생한다는 것입니다.

React Hook(X)에 누락된 종속성: 'bound'가 있습니다. 포함하거나 종속성 배열을 제거하십시오.

React Hook(X)에는 종속성 배열에 스프레드 요소가 있습니다. 이는 올바른 종속성을 전달했는지 여부를 정적으로 확인할 수 없음을 의미합니다.

매개변수 목록을 사용하도록 변경하면(즉, 스프레드 연산자를 사용하지 않음) 매개변수가 동일하더라도 목록이 호출할 때마다 생성되기 때문에 메모이제이션이 삭제됩니다.

생각:

• 두 번째도 적용될 때 첫 번째 오류를 보여줄 가치가 있습니까?
• 특히 스프레드 연산자가 사용되는 장소에 대해 이 규칙을 비활성화할 수 있는 방법이 있습니까?
• 함수 내에서 변수의 유일한 사용이 스프레드 연산자와 함께 사용되는 경우 종속성에서 스프레드 연산자를 사용하는 것이 안전하고 규칙이 이미 이를 감지하고 있으므로 확실히 허용해야 합니다. 정적 분석으로 해결하기 어려운 더 복잡한 경우가 있다는 것을 알고 있지만, 스프레드를 비교적 일반적으로 사용하는 경우에는 쉽게 승리할 수 있습니다.

안녕하세요 @gaearon , 방금 이 경고를 받았습니다.

Accessing 'myRef.current' during the effect cleanup will likely read a different ref value because by this time React has already updated the ref. If this ref is managed by React, store 'myRef.current' in a variable inside the effect itself and refer to that variable from the cleanup function.

이 메시지가 약간 혼란스럽습니다. 정리 시의 ref 현재 값이 효과 본문의 값과 다를 수 있음을 경고하는 것 같습니다. 오른쪽?
그렇다면 이 경고를 무시하는 것이 안전합니까/합법적입니까?

내 경우, 흥미로운 경우: CodeSandbox
컨텍스트: 일부 사용자 지정 데이터 가져오기 후크. 나는 경쟁 조건과 마운트되지 않은 구성 요소의 업데이트를 모두 방지하기 위해 ref에서 카운터를 사용합니다.

함수 내부에 ref 읽기를 숨기거나 정리 케이스에 대한 다른 부울 참조를 생성하여 이 경고를 우회할 수 있다고 생각합니다. 하지만 이 경고를 무시할 수 있다면 불필요하게 장황합니다.

@피곤한

예를 들어 사용자가 새 검색어를 성공적으로 제출했으며 결과를 보고 있다는 것을 기록하고 싶은 경우입니다. 문제가 발생하여 구성 요소가 발생하면 해당 로그 이벤트가 발생하지 않았으면 합니다.

예, 틈새 사용 사례처럼 들립니다. 대부분의 사람들이 "부작용"을 원할 때 제출된 양식을 봤다는 사실이 아니라 양식 제출 자체를 의미한다고 생각합니다. 이 경우 내가 제공한 솔루션이 괜찮아 보입니다.

@davidje13

두 번째도 적용될 때 첫 번째 오류를 보여줄 가치가 있습니까?

린트 규칙 변경 제안에 대한 새 문제를 제출하세요.

특히 스프레드 연산자가 사용되는 장소에 대해 이 규칙을 비활성화할 수 있는 방법이 있습니까?

자신이 하는 일을 안다고 생각하면 언제든지 // eslint-disable-next-line react-hooks/exhaustive-deps 할 수 있습니다.

함수 내에서 변수의 유일한 사용이 스프레드 연산자와 함께 사용되는 경우 종속성에서 스프레드 연산자를 사용하는 것이 안전하고 규칙이 이미 이를 감지하고 있으므로 확실히 허용해야 합니다.

새 문제를 제출하십시오 pls.

@CarlosGines

이 메시지가 약간 혼란스럽습니다. 정리 시의 ref 현재 값이 효과 본문의 값과 다를 수 있음을 경고하는 것 같습니다. 오른쪽?

예.

그렇다면 이 경고를 무시하는 것이 안전합니까/합법적입니까?

음 .. 버그로 이어지는 경우가 아닙니다. 🙂

컨텍스트: 일부 사용자 지정 데이터 가져오기 후크. 나는 경쟁 조건과 마운트되지 않은 구성 요소의 업데이트를 모두 방지하기 위해 ref에서 카운터를 사용합니다.

예, 아마도 이 사용 사례가 합법일 것입니다. Pls를 논의하기 위해 새로운 문제를 제출하시겠습니까?

충분한 피드백을 받고 통합되었으므로 이 문제를 잠그겠습니다.

일반적인 질문 및 답변: https://github.com/facebook/react/issues/14920#issuecomment -471070149

useEffect 및 종속성에 대해 자세히 알아보려면 여기를 https://overreacted.io/a-complete-guide-to-useeffect/

곧 문서에 더 많은 항목을 추가할 예정입니다.

규칙에서 무언가를 변경하고 싶거나 귀하의 사례가 합법적인지 확실하지 않은 경우 새 문제를 제출하십시오.