我應該添加 useCallback 或 useMemo 到我的效果嗎？

Question

一旦用戶將鼠標懸停在按鈕上，以下工具提示將調用 API。 我想知道是否需要使用useCallback或useMemo以避免不必要的 API 調用？ 我仍然很難理解何時需要兩者之一。 如果添加它是有意義的，你會怎么做？

const ProfileTooltip = ({ children, userId }) => {
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [profileInfo, setProfileInfo] = useState(false);
  
    useEffect(() => {
      if (!open) {
        return;
      }
  
      const fetchProfileInfo = async () => {
        try {
          const { data } = await api.get(`users/${userId}/info/`);
          setProfileInfo(data);
        } catch (e) {
          setProfileInfo(null);
        }
      };
      fetchProfileInfo();
    }, [open, userId]);
  
    const handleOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };
  
    const renderTooltip = () => {
      if (!profileInfo) {
        return;
      }
  
      return (
        <>
          <h3 className={classes.profileName}>
            {profileInfo.firstName} {profileInfo.lastName}
          </h3>
          <p className={classes.headline}>{profileInfo.headline}</p>
          <Button size="small" variant="contained" color="primary" fullWidth>
            Message
          </Button>
        </>
      );
    };
  
    return (
      <div className={classes.root}>
        <Tooltip
          arrow
          classes={{
            tooltip: classes.tooltip,
            arrow: classes.arrow,
            tooltipArrow: classes.tooltipArrow,
            popperArrow: classes.popperArrow,
          }}
          interactive
          placement="top-start"
          onOpen={handleOpen}
          onClose={handleClose}
          title={renderTooltip()}
        >
          {children}
        </Tooltip>
      </div>
    );
  };
  
  export default ProfileTooltip;

Answer 1

useCallback鈎子用於記憶回調函數，以便在每次組件重新渲染時都不會重新創建它們。 當您想要將 function 傳遞給子組件並且該子組件依賴於引用相等以避免不必要的重新渲染時，這很有用。

useMemo鈎子用於記憶值，以避免在組件的每次渲染上進行昂貴的計算。 傳遞給useMemo的 Function 在渲染期間運行，因此任何具有副作用的代碼都不應寫入此 function。

我想知道是否需要使用 useCallback 或 useMemo 以避免不必要的 API 調用？

這兩個鈎子對你的情況都沒有幫助。

API 調用等副作用屬於useEffect掛鈎，為了優化副作用的執行，您需要查看useEffect掛鈎的依賴數組。

但是，您可以在useCallback掛鈎中包裝handleOpen和handleClose函數。 這樣做將防止在每次渲染時重新創建這些函數，並且記憶的 function 引用將傳遞給Tooltip組件。

您需要確保正確獲取useCallback掛鈎的依賴數組，否則您將遇到難以調試的錯誤。