useMemo 또는 useCallback VS useRef를 사용하여 빈 종속성

이 GitHub 문제에서 본질적으로 변경을 제안했습니다.

x = useCallback( ... , []);

에:

x = useRef( ... ).current;

둘은 동일하지만 useRefReact를 사용하면 종속성을 비교하지 않습니다.

답장에 대한 질문이 있습니다.

의존성이없는 useMemo 또는 useCallback이 useRef보다 더 나은 선택이되는 상황이 있습니까?

하나는 생각할 수 없지만 일부 유스 케이스를 간과했을 수 있습니다.

누구나 그런 상황을 생각할 수 있습니까?

reactjs react-functional-component

— 이자키
소스

답변:

React Hooks API 문서 당 :

useRef는 내용이 변경 될 때 알려주지 않습니다. .current 속성을 변경해도 다시 렌더링되지 않습니다 . 콜백 참조를 사용하면 하위 구성 요소가 나중에 측정 노드를 표시하더라도 (예 : 클릭에 대한 응답으로) 부모에 대해 계속 알림을받습니다. 구성 요소와 측정을 업데이트 할 수 있습니다.

여기 및 여기 에서 자세한 내용을 읽을 수 있습니다 .

— 이라 스나
소스

나는 이것이 질문에 대한 대답이라고 생각하지만 이것이 잘못되었다고 생각합니다. 샌드 박스 React 예제에서로 변경해도 동일 useCallback(x,[])하게 useRef(x)작동합니다.

— Izhaki

useRef(x).current그건.

— Izhaki

내가 틀 렸으면 좋겠지 만

— Izhaki

나는 완전히 있는지에 관한 있지 않다 useCallback(cb, [])대 useRef(cb).current자신. 비록 useMemo(cb, [])에 다른 useRef(cb).current감에 있는지 useMemo"종속성 중 하나가 변경되었을 때에 만 memoized 값을 재 계산하는 것이다." useRef무엇이든 항상 가치를 다시 계산하는 대 .

— irasuna 2011

useRef다시 계산하지 않음-항상 초기 값을 반환합니다.

— Izhaki

useRef를 사용하여 useCallback을 에뮬레이트하거나 비어있는 종속성으로 에뮬레이션 할 수 있지만 종속성이 변경 될 때 다시 기억해야하는 모든 useCallback 시나리오에이를 사용할 수는 없습니다.

또한 useCallback with empty dependency비교를 많이 수행 할 필요가 없기 때문에 Ref 를 사용 하거나 사용하면 성능에 큰 차이 가 없습니다.

또한 함수 구현을 약간 변경하여 특정 매개 변수 변경시 다시 작성해야하는 경우 구현을 간단히 업데이트 useCallback하고 추가 매개 변수를 종속성으로 추가 할 수 있습니다 . 그러나 useRef로 구현하면 다시 되돌려 야합니다.useCallback

— 수샴 카트리
소스

감사. 제목에서 알 수 있듯이 이것은 빈 의존성 사례입니다.

— Izhaki

@Izhaki 나는 당신이 질문이 엄격하게 빈 의존성이라는 것을 이해하고 빈 의존성에 차이가 없다고 언급했습니다. 그러나 더 많은 변경 사항을 추가하려고 할 때 약간의 리 팩터가 필요할 수 있습니다.

— Shubham Khatri

useRef (() => {...}). current의 출력이 변경 가능하기 때문에.

코드에서 이상한 부작용을 일으킬 수 있습니다. 언제든지 전류 값을 변경할 수 있습니다. https://codesandbox.io/s/confident-monad-vjeuw

그것은 useRef를 사용하고 싶지 않은 유스 케이스입니다.

— 다니엘 듀옹
소스

그러나 x = useRef(value).current변경 가능한 인스턴스 ref는 절대 반환하지 않습니다. current입니다. useCallback버전 과 동일합니다 .

— Izhaki