使用useCallback和memo来避免组件重复渲染。

示例代码：

import React, { useState, useCallback } from 'react';

function HomePage() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    

      
{count}
      
    
  );
}

const Button = React.memo(({ handleClick }) => {
  console.log('Button rendered');
  return (
    
      Click me
    
  );
});

在这个例子中，HomePage组件中的handleClick方法使用了useCallback包裹起来，并且依赖于count状态。这将确保在count没有改变时，每次渲染HomePage时handleClick方法的引用都是相同的，并且不会触发Button组件的不必要的重复渲染。

Button组件也使用了memo进行优化，以防止其在count变化时重复渲染。由于Button组件的props没有包含任何与count有关的信息，因此使用memo可以避免不必要的重复渲染。

注意：在使用useCallback时需要谨慎选择依赖，建议只依赖那些在回调函数中实际使用的props或state。如果不理解useCallback的使用方法，也可以不使用它来避免组件重复渲染的问题。