使用React hooks useCallback和useEffect，以避免在每次渲染时都调用API。

例如：假设我们有一个组件需要从API获取数据并将其展示在页面上。首先，我们创建useState来保存数据和loading状态：

const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);

接下来，我们使用useEffect来调用API：

useEffect(() => {
  fetch("https://example.com/api/data")
    .then((response) => response.json())
    .then((data) => {
      setData(data);
      setIsLoading(false);
    });
}, []);

这段代码会在组件挂载时调用，获取数据并更新state。然而，如果组件被重新渲染时，useEffect也会被再次调用，从而再次调用API，即使实际上数据没有发生任何改变。这可能会导致额外的网络流量和延迟。

为了避免这种情况，我们可以使用useCallback来避免每次重新渲染时都创建新的函数，并将其传递给useEffect的依赖项：

const fetchData = useCallback(() => {
  fetch("https://example.com/api/data")
    .then((response) => response.json())
    .then((data) => {
      setData(data);
      setIsLoading(false);
    });
}, []);

useEffect(() => {
  fetchData();
}, [fetchData]);

现在，即使组件重新渲染，fetchData也不会被重新创建，因此useEffect也不会被重新调用，除非fetchData本身发生改变。这就避免了不必要的API调用和网络流量。