在React中，当子组件更新父组件的数组时，可能会导致无限重新渲染。解决这个问题的一种方法是使用useCallback和memo来优化子组件的渲染。

以下是一个示例代码：

import React, { useState, useCallback, memo } from "react";

// 子组件
const ChildComponent = memo(({ data, updateData }) => {
  const handleClick = () => {
    // 更新父组件的数组
    updateData([...data, "new item"]);
  };

  return (
    

      添加新项
      

        {data.map((item, index) => (
          
{item}
        ))}
      
    
  );
});

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState([]);

  // 使用useCallback优化子组件的更新函数，避免重新创建回调函数
  const updateData = useCallback((newData) => {
    setData(newData);
  }, []);

  return (
    

      
父组件
      
    
  );
};

export default ParentComponent;

在上面的示例代码中，我们使用了memo来优化子组件的渲染，只有当data发生变化时，子组件才会重新渲染。同时，我们使用useCallback来优化子组件的更新函数updateData，避免在父组件重新渲染时重新创建回调函数。

通过这种优化，当子组件更新父组件的数组时，只有当data发生变化时才会触发子组件的重新渲染，避免了无限重新渲染的问题。