要避免函数组件的 React 重新渲染，可以使用 React 的 memo 函数或 useCallback 和 useMemo 钩子函数。

1. 使用 memo 函数：

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // 组件内容...
});

export default MyComponent;

使用 memo 函数将函数组件包裹起来，可以确保只有在组件的 props 发生变化时才会重新渲染。

2. 使用 useCallback 和 useMemo 钩子函数：

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

const MyComponent = ({ prop1, prop2 }) => {
  const memoizedCallback = useCallback(() => {
    // 回调函数...
  }, [prop1]);

  const memoizedValue = useMemo(() => {
    // 计算值...
  }, [prop2]);

  return (
    // 组件内容...
  );
};

export default MyComponent;

使用 useCallback 和 useMemo 钩子函数可以分别对回调函数和计算值进行记忆化处理，只有在依赖项发生变化时才会重新计算或创建新的回调函数。

通过使用 memo 函数或 useCallback 和 useMemo 钩子函数，可以避免不必要的重新渲染，提高组件的性能。