다른 React.useCallback 내에서 React.useCallback을 사용할 수 있나요?

Question

유일한 정보는 다음과 같습니다

"react"에서 React 가져오기;

const User = React.memo(function({id, name, isSelected, ...other}) {
  반품 (
    <div {...기타}>
      {이름} - {선택됨 && "선택된"}
    </div>
  );
});

기본 사용자 내보내기;

以及渲染用户卡的父组件

"react"에서 React 가져오기;

함수 애플리케이션() {
  const [사용자, setUsers] = React.useState([
    {id: 1, 이름: "John Doe #1"},
    {id: 2, 이름: "John Doe #2"},
    {ID: 3, 이름: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  return users.map((사용자) => {
    const isSelected = selectedUserId === user.id;

    반품 (
      <사용자
        {...사용자}
        키={user.id}
        isSelected={isSelected}
        onClick={() => setSelectedUserId(user.id)}
      />
    );
  });
}

기본 애플리케이션 내보내기;

任务是''选择用户后避免卡新渲染其他用户卡'

我尝试使用 React.useCallback 钩子，这是我的第一个实现

"react"에서 React 가져오기;

const User = React.memo(function({id, name, isSelected, ...other}) {
  반품 (
    <div {...기타}>
      {이름} - {선택됨 && "선택된"}
    </div>
  );
});

함수 애플리케이션() {
  const [사용자, setUsers] = React.useState([
    {id: 1, 이름: "John Doe #1"},
    {id: 2, 이름: "John Doe #2"},
    {ID: 3, 이름: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  const handlerSelectUser = React.useCallback((userId) => () => {
    setSelectedUserId(userId);
  }, []);

  return users.map((사용자) => {
    const isSelected = selectedUserId === user.id;

    반품 (
      <사용자
        {...사용자}
        키={user.id}
        isSelected={isSelected}
        onClick={handleSelectUser(user.id)}
      />
    );
  });
}

기본 애플리케이션 내보내기;

이 경우 React.useCallback

결과: 클릭할 때마다 모든 사용자 카드가 여전히 다시 렌더링됩니다

저는 이 익명 함수를 React.useCallback

에 래핑하기로 결정했습니다.

"react"에서 React 가져오기;

const User = React.memo(function({id, name, isSelected, ...other}) {
  반품 (
    <div {...기타}>
      {이름} - {선택됨 &&"선택됨"}
    </div>
  );
});

함수 애플리케이션() {
  const [사용자, setUsers] = React.useState([
    {id: 1, 이름: "John Doe #1"},
    {id: 2, 이름: "John Doe #2"},
    {ID: 3, 이름: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  const handlerSelectUser = React.useCallback((userId) => {
    return React.useCallback(() => {
      setSelectedUserId(userId);
    }, []);
  }, []);

  return users.map((사용자) => {
    const isSelected = selectedUserId === user.id;

    반품 (
      <사용자
        {...사용자}
        키={user.id}
        isSelected={isSelected}
        onClick={handleSelectUser(user.id)}
      />
    );
  });
}

기본 애플리케이션 내보내기;

문제는 해결됐지만 아직 한 가지 의문이 남네요. 제가 제대로 한 걸까요? React 팀에서는 다음과 같이 말합니다. 루프, 조건문 또는 중첩 함수 내에서 Hooks를 호출하지 마세요 어떤 부작용이 발생하나요?

user구성요소

를 건드리지 마세요.

Answer 1

훅 내부에서 후크를 호출할 수 없는 이유를 설명하세요. (그리고 일관되고 안정적으로 작동할 것으로 기대합니다.)

훅 내부에서 후크를 호출할 수 없는 이유 - 이 답변에서 제공해야 하는 것보다 더 많은 컨텍스트가 포함된 매우 심층적인 내용을 보려면 여기로 이동하세요. https://overreacted.io/why-do-hooks-rely-on -call -주문/

귀하의 솔루션은 "규칙 위반"에도 불구하고 사용자가 상태에서 추가되거나 제거될 때까지 후크 호출 순서가 항상 동일하기 때문에 작동합니다.

당신이 작성한 솔루션을 반드시 사용할 수 있습니다. 하지만 사용자 수를 변경해야 한다면 어떻게 해야 할까요?

---

아니요. 후크 안에는 후크를 사용할 수 없습니다. "작동"할 수도 있지만 React는 안정적으로 작동하지 않으며 잘못하고 있다고 말합니다. 후크는 사용자 정의 후크의 최상위 구성 요소의 최상위 수준에서 호출되어야 합니다.

당신은 올바른 방향으로 가고 있지만 문제에 대한 해결책은

1. 콜백 함수에 제공된 매개변수를 클릭한 요소의 소스로 사용하고
2. 사용자 구성 요소를 수정할 수 없는 경우 div 요소에 일부 데이터를 제공하여 클릭한 사용자 요소를 알려야 합니다.

다음과 같습니다:

으아악