React: React Hook useEffect에 종속성이 누락되었습니다. 'xxx' ?

다음 질문에 답해야 합니다.

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

다음 질문에 답해야 합니다.

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

@gaearon
내 문제를 해결하지 못했습니다. 내 문제가 더 특별합니다. 내 실행 functionsetElePositionArr이 componentDidMount 및 handleClick에서 실행되기를 원하지만 React Hook 기능이 내 요구 사항을 충족하지 않고 경고가 나타납니다.

내 질문은 : React Hook은 useEffect의 함수와 setState 작업에 대한 함수 구성 요소를 호출할 수 없습니까?

두 번째 질문에 답할 수 있도록 열어 둡니다.

동일한 ESLint 경고가 표시되지만 제 경우에는 구성 요소가 마운트될 때 비동기 호출을 하고 싶습니다.

const ManageTagsModalBody: React.FC<IProps> = ({ children, getTags }) => {
  useEffect(() => {
    getTags();
  }, []);

  return <div>{children}</div>;
};

Line 12:  React Hook useEffect has a missing dependency: 'getTags'. Either include it or remove the dependency array. If 'getTags' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps 

ManageTagsModalBody 는 데이터에 의존하지 않으며 구성 요소가 렌더링될 때마다 데이터를 로드하는 래퍼로만 사용됩니다. children 구성 요소가 getTags 가 가져온 데이터를 사용하고 있다는 점은 주목할 가치가 있습니다.

종속성 목록에 무엇을 추가해야 할지 잘 모르겠습니다.

설명도 궁금합니다.
React Hook useEffect에 누락된 종속성: 'dispatch'가 있습니다.

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
  }, []);

동일한 문제가 여기에 있습니다. 이상한 규칙.

여기도 마찬가지입니다. https://github.com/facebook/react/issues/15865#issuecomment -506503377에서와 같이 간단합니다.

  useEffect(() => {
    dispatch(fetchPosts());
  }, []);

이 경고를 억제하는 방법이 있습니까?

경고 메시지에서 제안한 대로 다음과 같이 할 수 있습니다.

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

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

@fayway 그러면 initFetch 및 dispatch 값이 변경될 때마다 useEffect의 콜백이 실행됩니다.
그는 한 번 콜백을 실행하고 싶어

@shkyung 제 경우 initFetch 는 원인(저장소)을 변경하지 않습니다. 파견도 변경되지 않습니다.

어쩌면 이렇게 될 수 있습니다

const setCenterPosition = useRef(null)
setCenterPosition.current = useCallback( ()=>{} ,[deps])

effect(()=>{ setCenterPosition.current() },[setCenterPosition,otherDeps])

이 변화는 다소 우스꽝스럽고 솔직히 말해서 역효과를 낳는 것처럼 보입니다. 오히려 이전 버전으로 롤백하고 이 문제에 대해 생각하게 하십시오.

같은 문제가 있습니다. componentDidMount에서만 내 가져오기가 실행되기를 원합니다. 배열에 종속성을 추가하면 끝점에 반복적으로 도달하게 됩니다.

React Hook useEffect에 누락된 종속성: 'dispatch'가 있습니다.

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: 'tick' }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

이것은 매우 일반적인 사용 사례인 것 같습니다. 현재 프로젝트에서 겪었던 것입니다.

효과 후크를 한 번만 실행하고 싶지만 시작 시 상태에만 관심이 있지만 종속성이 있습니다. 현재 사용 중
// eslint-disable-next-line react-hooks/exhaustive-deps ,
Linting 규칙을 끄려면 이 경우에는 끄지 않아도 됩니다.

이것은 매우 일반적인 사용 사례인 것 같습니다. 현재 프로젝트에서 겪었던 것입니다.

효과 후크를 한 번만 실행하고 싶지만 시작 시 상태에만 관심이 있지만 종속성이 있습니다. 현재 사용 중
// eslint-disable-next-line react-hooks/exhaustive-deps ,
Linting 규칙을 끄려면 이 경우에는 끄지 않아도 됩니다.

Lint를 닫는 것은 임시 해결책일 뿐이며 이 문제의 핵심은 후크를 이해하는 데 충분하지 않습니다.

동일한 문제가 여기에 있습니다. useEffect() 내부에서 함수를 한 번 실행하고 싶었습니다. 두 번째 매개변수로 []를 사용하면 원하는 대로 수행되지만 계속 이 경고가 표시됩니다.

오늘까지 새 프로젝트에서 본 적이 없기 때문에 이상한 경고입니다. 구성 요소가 마운트되었을 때 한 번만 호출되는 사용 사례를 망칩니다. 보푸라기 경고를 무시하는 것 외에는 해결 방법이 없는 것 같습니다.

여기에 내 2센트를 넣고 싶습니다. 특히 Axios를 사용하여 네트워크 요청을 취소하는 경우. 필요한 경우 별도의 문제를 만들지만 이 문제가 나 자신에게 직접적인 영향을 미쳤다고 느꼈습니다. 그래서 내 useApi 후크는 다음과 같습니다 -

import axios, { AxiosInstance } from "axios";
import axiosRetry from "axios-retry";
import { FetchEnv } from "../../utilities";
import { useStorage } from "../useStorage";

export const useApi = ({ isAuth = false, retries = 3 } = {}) => {
  const cancelToken = axios.CancelToken.source();
  const { getItem } = useStorage();

  const getBaseUrl = () => {
    return FetchEnv({
      defaultValue: "http://api.example.com",
      key: "API_URI"
    });
  };

  const authorizedClient = (client: AxiosInstance) => {
    const session = getItem("SESSION", "sessionStorage");
    const hasAccessToken = Boolean(session.tokens.accessToken);

    if (isAuth && !hasAccessToken) {
      console.error("No access token found to initiate authorized request.");
      return client;
    } else {
      client.defaults.headers[
        "Authorization"
      ] = `Bearer ${session.tokens.accessToken}`;
      return client;
    }
  };

  const buildFetch = (): AxiosInstance => {
    const client = axios.create({
      baseURL: getBaseUrl(),
      cancelToken: cancelToken.token
    });
    axiosRetry(client, { retries });
    return isAuth ? authorizedClient(client) : client;
  };

  return {
    cancelRequest: cancelToken.cancel,
    fetch: buildFetch()
  };
};

구성 요소 내에서 이 후크를 사용하려면 다음과 같이 정의하면 됩니다. 그러면 마운트 시, useEffect 내에서, 이벤트 핸들러의 일부로 인증된 호출과 인증되지 않은 호출을 모두 수행하는 데 사용할 수 있습니다. cancelRequest는 생성된 고유 취소 토큰입니다. 이 구성 요소와 관련된 "fetch" axios 인스턴스와 쌍을 이룹니다.

const { cancelRequest, fetch } = useApi();

어떤 이유로든 이 구성 요소가 마운트 해제되면 다음이 호출됩니다.

  useEffect(() => {
    return () => {
      cancelRequest("Auth network request cancelled");
    };
  }, []);

이제 현재 완벽하게 작동합니다. 그러나 경고가 적용되면(cancelRequest를 useEffect 종속성으로 설정) fetch 메서드가 호출될 때 네트워크 요청을 즉시 취소합니다. 조언을 주시면 대단히 감사하겠습니다. 그러나 현재로서는 ts-lint가 이를 비활성화하는 것이 유일한 해결책인 것 같습니다...

나는 여기서 문제가 우리가 후크에 대해 생각하는 방식 일 수 있다고 생각합니다. @luojinghui 의 의견 은 눈에 보이는 것보다 더 많은 것이 있음을 시사합니다. 우리는 다르게 생각해야 하지 않을까요? 일부 리팩토링으로 후크 중 하나에서 이 문제를 제거할 수 있었습니다. 결과적으로 코드가 더 명확해집니다.

바로 위의 @Stoner609 의 예 에서 타이밍 코드가 useCallback 후크에 있어야 하는지 궁금했습니다. 그래도 종속성으로 기능(정적이어야 함)을 갖는 것은 여전히 ​​이상합니다.

이 경우는 일종의 예외가 되어야 한다고 생각합니다

구성 요소가 로드되고 매개 변수를 받는 함수를 한 번만 실행하려는 경우 useRef를 사용하여 경고를 피할 수 있습니다. 다음과 같이 작동합니다.

  const InitialPropA= useRef(propA);
  useEffect(() => {
    myFunction(InitialPropA.current);
  }, [myFunction, InitialPropA]);

경고 메시지에서 제안한 대로 다음과 같이 할 수 있습니다.

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

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

내가 이 재치 있는 대답을 좋아하는 만큼 이것은 일반적으로 내 코드에서 일어나는 일입니다.
디스패치가 사라진다는 성가신 경고를 받고 싶지 않습니다.

나는 그 미스터리의 배열에서 무슨 일이 왜 일어나는지 정확히 알고 싶습니다. :)

경고 메시지에서 제안한 대로 다음과 같이 할 수 있습니다.

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

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

이것은 또한 API와 같은 경우에 메모리 누수를 생성할 수 있으며, 무한 루프에서 호출을 만들 것입니다.

정말 이것에 대한 수정이 필요합니다. useEffect() 내부의 함수를 한 번만 실행하려는 경우 계속 오류가 발생하고 해결 방법에 대한 아이디어가 없습니다.

같은 오류에 직면 -

React Hook useEffect에 'props' 종속성이 누락되었습니다. 그러나, "소품"바람직한 수정이 useEffect 콜의 "소품"오브젝트 외부 destructure 및 useEffect 내부 그 특정 소품을 참조하므로 어떤 소품 변경, 반응 - 후크 될 때 / 전수 deps을 바꿀

코드 -

  useEffect(() => {
    props.dispatch(searchMediaAction("rain"));
  }, []);

@luojinghui : 보푸라기 오류를 해결했다면 알려주세요

같은 오류

같은 문제. componentDidMount의 동작을 모방하고 싶습니다. 나는 경고에 관심이 없습니다. 변경 사항이 있을 때 후크를 다시 실행하고 싶지 않습니다.

useEffect() 대한 두 번째 인수가 [] 인 경우 이 경고를 표시 하지 않을 것을 제안합니다. 이 경우 b/c 개발자는 이 효과가 한 번만 실행되고 따라서 사용하기를 _원합니다_ 초기 prop 값이며 후속 렌더링에서 prop이 변경되는지 여부는 신경 쓰지 않습니다.

사례 1:
초기화 시와 지정된 매개변수 값이 변경될 때(lint 경고에서 알 수 있듯이) 함수를 실행하려면 해당 매개변수를 배열에 전달합니다.

사례 2:
함수가 초기화 시 정확히 한 번 실행되도록 하려면 빈 배열을 사용하여 효과가 한 번만 트리거되도록 합니다.

Case 2에서는 기본적으로 React Hook 문서 사양에 따라 componentDidMount 이벤트를 수신합니다. Lint 오류는 React Hook 문서 및 개발자 기대치와 일치하지 않습니다.

이게 왜 닫혀있나요?

어떤 해결책이 있습니까?

@kennylbj

다양한 제안을 시도한 후 이것이 궁극적으로 저에게 효과적이었습니다. 나는 eslint-disable을 사용하지 않는 것을 선호했지만 초보자에게는 코드를 비교적 간단하게 유지하려고 했습니다. 이 접근 방식을 사용하면 useCallback 내부에서 호출하지 않고 디스패치 함수를 전달할 수 있습니다. 도움이 되었기를 바랍니다.

```자바스크립트
// ... 함수 컴포넌트 내부
const { dispatchFunc } = 커스텀훅();
const memoizeDispatchFunc = useCallback(dispatchFunc, []);

useEffect(() => {
메모화디스패치펑크();
}, [memoizeDispatchFunc]);
````

빈 배열을 제거할 수 있습니까? 그렇게 하면 작동하는 것 같지만(코드는 여전히 예상대로 실행되고 경고는 사라짐) 그렇게 해서는 안 되는 이유가 있는지 모르겠습니다.

useEffect(()=>{ myFunc(); } )

@robthedev 훌륭한 솔루션.
redux를 사용하면 코드를 단순화할 수도 있습니다.

const dispatch = useDispatch();

// redux can guarantee that the dispatch function will not change between renders.
// so we don't need to wrap it with useCallback for now.
useEffect(() => {
  dispatch(actions());
}, [dispatch]);

Dan의 이 기사는 저에게 많은 도움

이 문제에 대한 해결책은 종속성을 제거하는 것이 아니라 구성 요소 외부에서 props 또는 state가 필요하지 않은 함수를 호이스트하거나 정의된 useCallback으로 래핑하는 것입니다.

@kennylbj

다양한 제안을 시도한 후 이것이 궁극적으로 저에게 효과적이었습니다. 나는 eslint-disable을 사용하지 않는 것을 선호했지만 초보자에게는 코드를 비교적 간단하게 유지하려고 했습니다. 이 접근 방식을 사용하면 useCallback 내부에서 호출하지 않고 디스패치 함수를 전달할 수 있습니다. 도움이 되었기를 바랍니다.

// ... inside function component
const { dispatchFunc } = customHook();
const memoizeDispatchFunc = useCallback(dispatchFunc, []);

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

나와 함께 위의 예는 작동하지 않습니다.

다음 오류가 발생합니다.
TypeError: Cannot destructure property 'dispatchFunc' of 'componentDidMount(...)' as it is undefined.

@react-team: 행복한 상용구 코드. :) 그것은 논리적이고 다시 읽을 수 있습니까... 이벤트는 사용하기 간단해야 합니다... 단지 함수를 호출하기 위해 5줄 이상의 논리를 작성할 필요가 없습니다.

나를 위해 다음과 같은 상황에서 오류가 나타났습니다.

  useEffect(() => {
    props.getTasks()
  }, [])

나는 이것을 다음과 같이 수정했다.

const { getTasks } = props
  useEffect(() => {
    getTasks()
  }, [getTasks])

수천 명의 개발자가 동일한 문제에 직면하고 React 개발 팀이 스레드를 닫고 모든 사람을 무시할 때:

내 문제는 이 스레드의 다른 문제와 다르기 때문에 다른 불쌍한 영혼이 토끼 구멍에 빠질 경우를 대비하여 공유하겠습니다.

function hydrate( _state, _errors=false) {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
}

사용자는 다음과 같이 상태를 수화하기 위해 useEffect() 와 함께 이것을 사용해야 합니다.

useEffect(()=>{
    hydrate({
        name:'Garrett',
        email:'[email protected]',
        newsletter: 'yes'
    });
},[hydrate]); //unfortunately, this causes an infinite render, because hydrate will always change

그래서 이 문제를 해결하기 위해 내 수화물 함수를 useCallback() 래핑하도록 변경했습니다. 이제 모든 렌더마다 변경되지 않으며(내 생각에) 이것이 성능에 더 좋을 것입니다. 내 사용자 지정 후크에서 반환된 모든 도우미 함수에 대해 이것을 구현합니다.

const hydrate = useCallback(( _state, _errors=false )=> {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
},[]);

누가 이것이 사실인지 확인할 수 있습니까? useCallback 는 렌더링에서 hydrate 가 변경되는 것을 방지하므로 더 나은 성능을 위해 이러한 모든 기능을 useCallback 에 래핑하는 것이 좋습니다. ?

redux can guarantee that the dispatch function will not change between renders.

당신은 그것에 대해 확신합니까?
그렇게 말하는 문서에 링크하십시오.

자세한 내용은 https://overreacted.io/a-complete-guide-to-useeffect/#decoupling -updates-from-actions를 확인하거나 구현 세부 사항은 useEffect 소스 코드 를 확인할 수 있습니다.

여기에서 Dan이 말한 것을 참조합니다.

대답은 React가 디스패치 함수가 구성 요소 수명 내내 일정하도록 보장한다는 것입니다. 따라서 위의 예에서는 간격을 다시 구독할 필요가 없습니다.

디스패치 함수가 일정하도록 보장

쿨, 고마워!

수천 명의 개발자가 동일한 문제에 직면하고 React 개발 팀이 스레드를 닫고 모든 사람을 무시할 때:

거의 이것입니다. 여기에서 후크를 시도하고 있으며 공식 문서에서 다루지 않고 의미가 없는 경고를 받았습니다. "이 효과를 한 번만 실행하십시오"와 같은 기본 사용 사례가 이렇게 많은 문제를 일으키면 후크가 진지한 작업을 수행할 준비가 되었는지 정말 궁금합니다.

글쎄, 스레드가 닫혀 있다는 사실을 제외하고는 그다지 말할 것도 없습니다.

같은 문제에 직면해 있습니다!

해결책,
(그것은 나를 위해 일했습니다):

const onInit = function(){ 
    console.log('initiated', Date.now());
}

useEffect(onInit, []);

린트 쪽에서 문제가 해결되었으면 좋겠지만 이봐...

@ra30r 좋은 해결 방법이지만 부작용을 일으킬 수 있는지 궁금하십니까? :생각:

여전히 아무것도? 😔

Udemy의 과정에서 양식 유효성 검사 오류를 유발하는 방법을 배운 경우가 있었습니다.

이것은 누락된 종속성 "디스패치"를 트리거했지만 여전히 작동했습니다.

  useEffect(() => {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }, [state.business_name.value])

@ra30r 의 예제를 사용하여 오류를 지우기 위해 다음과 같이 변경했습니다.

  const businessNameAfterDelay = function () {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }

  useEffect(businessNameAfterDelay, [state.business_name.value])

이게 왜 닫혀있나요?

나는 대답이 어딘가에 주어졌다고 믿습니다. lol.. 어쨌든.. 해결책은 다음과 같이 하는 것입니다:
useEffect(() => { dispatch(); }, [dispatch]);

도움이 되었기를 바랍니다!!

이게 왜 닫혀있나요?

나는 대답이 어딘가에 주어졌다고 믿습니다. lol.. 어쨌든.. 해결책은 다음과 같이 하는 것입니다:
useEffect(() => { dispatch(); }, [dispatch]);

도움이 되었기를 바랍니다!!

예, 그 해결 방법이 작동합니다. @kennylbj 는 얼마 전에 여기에서 말했습니다.
문제가 종료된 이유는 무엇입니까? 여기에도 관련 밈이 있습니다... xd

내 문제는 다음과 같습니다(샘플 코드).

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData]);

따라서 코드에서와 같이 userData 변경 사항이 있을 때 userStatus 값을 변경하고 이 경우 userStatus 값을 확인하려면 deps에 추가해야 합니다.

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData, userStatus]);

이 시나리오에서는 끝이 없는 루프가 됩니다.

@spmsupun
useState의 콜백 스타일을 사용하여 useEffect의 종속성 배열에 userStatus 변수를 도입하지 않도록 할 수 있습니다.

 useEffect(() => {
    setUserStatus(prevState => !prevState);
    return () => {};
  }, [userData]);

그리고 이것을 기능 업데이트 라고

솔루션 --> 종속성을 위해 마지막에 디스패치를 ​​추가하십시오.
React Hook useEffect에 누락된 종속성: 'dispatch'가 있습니다.

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
**  }, [dispatch]);**

@kennylbj 이것은 하나의 상태를 다룰 때 좋습니다. 실제 시나리오는 props입니다. 나는 부모로부터 소품을 보내고 있으며 두 번 변경되어 usereffect가 두 번 호출하지만 내부에서 리스너를 실행하고 있으며 두 번 수신합니다.

@spmsupun 하지만 이전 리스너의 등록을 해제하고 종속성 배열의 변수가 변경될 때마다 새 리스너를 등록하는 것은 매우 정상적이라고 생각합니다(예: props의 userId가 변경되면 리스너도 변경되어야 함). 그리고 이 동작은 반응이 기대하는 것입니다.

여전히 리스너를 두 번 호출하지 않으려면 전달된 props에 더 신경을 써야 하고 렌더링 중에 변경되지 않도록 해야 합니다.

@kennylbj 글쎄 등록을 취소하지만 여전히 좋은 습관은 아닙니다.

리스너 클래스에서 처리해야한다고 생각합니다.

소켓 ID가 같더라도 리스너가 두 번 호출되는 것 같습니다.

다음 상황이 충족되면 이것이 일어나지 않을 것이라고 생각합니다.

ts // call useEffect if and only if sockeId changed. useEffect(() => { const unregister = register(socketId); return () => unregister(socketId); }, [socketId])

다른 렌더 중에 변경되어 이 동작을 일으키는 종속성 배열의 다른 변수가 있습니까?

예 3 종속성,하지만 다른 방법으로 알아냅니다.

피엔

경고 메시지에서 제안한 대로 다음과 같이 할 수 있습니다.

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

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

와우, 비常感谢你🙏

🚀 아래 코드 스니펫은 저에게 정말 잘 맞습니다.

구성 요소에서 마운트

const onInit = () => getUsers()
useEffect(onInit, [])

매개변수 변경 시

const onInit = () => getUser(id)
useEffect(onInit, [id])

최선의 해결 방법: react-hooks/exhaustive-deps: "꺼짐"
나는 이 eslint 기능이 유용하다는 것을 결코 발견하지 못했습니다. 항상.

🚀 아래 코드 스니펫은 저에게 정말 잘 맞습니다.

구성 요소에서 마운트

const onInit = () => getUsers()
useEffect(onInit, [])

매개변수 변경 시

const onInit = () => getUser(id)
useEffect(onInit, [id])

잘 하셨어요.

나는 반응 문서가 @luojinghui 의 사용 사례를 충분히 다루지 않는다고 생각합니다.

주어진 함수를 호출하는 여러 가지 방법이 있습니다. 예: setCenterPosition() . 상태 변경( useEffect 를 통해 연결됨), 클릭 핸들러(직접 호출) 등을 관찰하여 호출할 수 있습니다.

반응 문서 제안

이것이 일반적으로 내부 효과에 필요한 함수를 선언하려는 이유

그러나 일반적으로 실제 예제에서는 클래스 구성 요소( this.setCenterPosition(...) )의 인스턴스 메서드에서 일반적으로 하는 것처럼 함수를 재사용해야 하며 후크가 실제로 전체 기능에 적합한지 궁금해지기 시작했습니다. 복잡한 구성 요소.

실제로 확실하지 않지만 아마도 해결책은 useCallback

const setCenterPosition = useCallback(() => {
  ...
}, [Stage, elePositionArr, setElePositionArr]);

useEffect() => {
  ...
}, [stageRef, Stage, currentIndex, setCenterPosition]);

...하지만 그것은 나에게 좀 끔찍합니다. 그리고 더 깨끗한 방법이 있기를 바랍니다. @gaearon 이 확인할 수 있을까요?

같은 문제에 직면하여 useEffect // eslint-disable-next-line react-hooks/exhaustive-deps 끝에 이 줄을 사용하여 경고 bu를 비활성화할 수 있지만 사용하고 싶지 않습니다.

여기 내 코드가 있습니다

`const [items, setItems] = useState([
{
이름: "테스트 1",
아이디: 1
},
{
이름: "테스트 2",
아이디: 2
},
{
이름: "테스트 3",
아이디: 3
},
{
이름: "테스트 4",
아이디: 4
},
{
이름: "테스트 5",
아이디: 5
}
]);

useEffect(() => {
상수 간격 ID = setInterval(() => {
setItems(shuffleArray(항목));
}, 1000);
반환() => {
clearInterval(intervalId);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

이 문제에 대한 나의 해결책은 이러한 경우에 React Hooks 사용을 중단하는 것이었습니다. 구성 요소에 componentDidMount 와 같은 상태 논리 및 수명 주기 이벤트가 많이 필요한 경우 클래스 구성 요소를 사용하고 두통을 피하십시오. 클래스 구성 요소는 완벽하고 이 스레드가 증명하는 것이 있다면 복잡한 상태 논리 또는 수명 주기 이벤트가 필요할 때 React Hooks가 이를 완전히 대체할 준비가 되어 있지 않다는 것입니다. React Hooks를 사용하는 것이 훨씬 낫습니까?).

저는 React Hooks의 사용을 useState 와 같은 간단한 것으로 제한하여 부울 플래그와 같은 것을 설정합니다. 구성 요소가 useEffect 가 필요할 만큼 복잡해지면 클래스 구성 요소가 더 적합하다는 신호로 간주합니다.

(명확성을 위해 편집됨).

이것이 현재 내 솔루션입니다.

const mounted = () => {
  dispatch(something());
}

useEffect(mounted, []);

@ra30r react/issues/15865#issuecomment-651254164 감사합니다.