在 React 上进行 API 调用的库的反跳库钩子

Question

我正在使用一个库，该库通过提供者连接到客户端，并提供一个钩子来进行 API 调用并返回一些数据（类似于反应查询）。

有时，我使用该钩子的组件的某些父组件会刷新其状态，以便调用该钩子，然后进行大量 API 调用。

我无法修改库挂钩，也无法创建嵌套挂钩（反应标准规则），那么如何消除进行 API 调用的挂钩呢？有办法做到这一点吗？

示例：

使用 Chakra UI 挂钩

useBreakpointValue

并调整窗口大小（例如拖动控制台），组件会刷新并且

useAPI

会被调用很多次。

function ParentComponent() {
    const mode = useBreakpointValue({base: false, lg: true});
    return <Component mode={mode} />;
}

function Component({mode}) {
  const {data, isLoading} = useAPI(); // Need to be debounced

  if(isLoading) return <Loader />;
  return (<div>{data.result.map((row) => <Row item={row} mode={mode} />)}</div>)  
}

Answer 1

您可以使用SWR库或React.memo

function ParentComponent() {
    const mode = useBreakpointValue({base: false, lg: true});
    return <Component mode={mode} />;
}

const Component = React.memo(function({mode}) {
  const {data, isLoading} = useAPI(); // Need to be debounced

  if(isLoading) return <Loader />;
  return (<div>{data.result.map((row) => <Row item={row} mode={mode} />)}</div>)  
})

或者在 SWR https://swr.vercel.app/

const { data, error } = useSWR(
    "uniq key of this request",
    ()=>useAPI().data
  );


  if(!data) return <Loader />;
  return (<div>{data.result.map((row) => <Row item={row} mode={mode} />)}</div>)