使用React的useCallback和useMemo Hook来缓存函数和变量，以避免在每次渲染时重新计算。

示例代码：

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

function MyComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // 缓存的回调函数
  const handleClick = useCallback(() => {
    setCount1(count1 + 1);
  }, [count1]);

  // 缓存的变量
  const doubleCount = useMemo(() => {
    console.log('Calculating double count...');
    return count2 * 2;
  }, [count2]);

  return (
    <>
      Increment count1
      
Count 1: {count1}
      
Count 2: {count2}
      
Double count 2: {doubleCount}
    
  );
}

在这个例子中，我们使用useCallback缓存了handleClick函数，并在依赖列表中传入了count1，以确保在count1改变时重新计算它。同样，我们使用useMemo缓存了doubleCount变量，仅在count2改变时重新计算它。这可以避免在每次渲染时重新计算函数和变量，并提高性能。