빈 배열을 입력으로 사용하는 'useCallback'과 두 번째 매개 변수를 사용하지 않는 'useCallback'의 차이점은 무엇입니까?

빈 배열을 입력으로 사용하는 'useCallback'과 두 번째 매개 변수를 사용하지 않는 'useCallback'의 차이점은 무엇입니까?

리액트 훅을 더 잘 이해하려고 하는 여정에서 예상치 못한 행동을 목격했다.하여 해당 이 함수는 나의 onRef로 됩니다.<div>'s컴포넌트가 재렌더될 때마다 어레이는 계속 커졌습니다.아마 단순한 화살표 기능이기 때문에 메모가 되어 있지 않았을 것입니다.

이렇게 .useCallback같은 레퍼런스를 여러 번 받지 않도록 하기 위해 훅을 설치했지만 놀랍게도 여전히 재렌더마다 함수를 호출했습니다.빈 배열을 두 번째 매개 변수로 추가한 후 refs는 예상대로 컴포넌트당 한 번만 실행됩니다.

이 동작에 대해서는, 다음의 스니펫을 참조해 주세요.

const Example = () => {
  const _refs = React.useRef([]);
  
  // Var to force a re-render.
  const [ forceCount, forceUpdate ] = React.useState(0);
  
  const onRef = (ref) => {
    if (ref && ref !== null) {
      console.log("Adding Ref -> Just an arrow function");
      _refs.current.push(ref);
    }
  }
  
  const onRefCallbackWithoutInputs = React.useCallback((ref) => {
    if (ref && ref !== null) {
      console.log("Adding Ref -> Callback without inputs.");
      _refs.current.push(ref);
    }
  });
  
  const onRefCallbackEmptyArray = React.useCallback((ref) => {
    if (ref && ref !== null) {
      console.log("Adding Ref -> Callback with empty array");
      _refs.current.push(ref);
    }
  }, []);
  
  React.useEffect(() => {
    console.log("Refs size: ", _refs.current.length);
  });
  
  return (
    <div>
      <div ref={onRef}/>
      <div ref={onRefCallbackWithoutInputs}/>
      <div ref={onRefCallbackEmptyArray}/>
      <div onClick={() => forceUpdate(forceCount + 1)} 
        style = {
          {
            width: '100px',
            height: '100px',
            marginTop: '12px',
            backgroundColor: 'orange'
          }
        }>
        {'Click me to update'}
       </div>
    </div>
  );
};

ReactDOM.render(<Example/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id='root' style='width: 100%; height: 100%'>
</div>

짐작으로는useCallback에는 두 번째 파라미터의 디폴트로 빈 배열이 있습니다.그렇다면 두 번째 파라미터를 부여하지 않는 것은 정확히 어떤 것입니까?르르르르르르르르르?

다에 useMemo ★★★★★★★★★★★★★★★★★」useCallback(으로 특별한 useMemo두 번째 인수가 빈 배열일 경우 값은 한 번 메모되고 항상 반환됩니다.

, 이메모되지 않습니다.useCallback 및useMemo아무 것도 안 해요

아마도 조건부로 메모할 수 있는 몇 가지 엣지 케이스는 다음과 같습니다.

useMemo(someValue, shouldMemoize ? [] : null)

두 인수는 두 번째 인수가 .useMemo ★★★★★★★★★★★★★★★★★」useCallback필수 사항으로 간주해야 합니다.실제로 타이프스크립트 정의에서는 이와 같이 취급하고 있습니다.

// Require a second argument, and it must be an array
function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

// Second argument can be undefined, but must be explicitly passed as undefined, not omitted.
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

---

오픈 풀 요청이 있어서exhaustive-deps훅 eslint 규칙을 사용하면 두 번째 인수가 생략된 경우 보풀 오류가 발생하기 때문에 이는 곧 린터 오류가 될 수 있습니다.

useCallback빈 의존관계 배열은 업데이트된 상태를 계산하지 않는 메모화된 함수입니다(상태의 경우 전달된 초기 값을 사용합니다).useState.

★★★★★★★★★★★★★★★★를 원할 때useCallback예를 들어, 상태를 소비하는 함수는 다음과 같이 종속성 배열 내에 전달해야 합니다.useEffect동작합니다! 이렇게 하면 상태가 바뀔 때마다 전체 함수가 다시 마운트됩니다.

가 있다고 합니다.useEffect,useLayoutEffect,useCallback,useMemo의존관계 배열의 경우 전달된 의존관계가 없는 경우 의존관계 늘 값을 전달했음을 의미하므로 비교 결과 항상 false가 발생하고 인라인 함수가 매번 실행됩니다.

빈 종속성이 전달되면 더 이상 비교할 것이 없으므로 인라인 함수는 한 번만 실행됩니다.(더 이상 비교하지 말라고 React에 지시하는 것과 같습니다).

배열이 어떤 변수와 함께 전달될 경우 변수 변경에 따라 인라인 함수를 계산합니다.

단, 인라인 함수의 인스턴스는 항상 생성됩니다.

언급URL : https://stackoverflow.com/questions/55026139/whats-the-difference-between-usecallback-with-an-empty-array-as-inputs-and-u