Reactjs 反应，避免在一个条件下渲染两次

我有一个web应用程序在移动设备上查看时出现了一些问题，用户将landcape从水平/垂直或反之更改，因为它再次渲染组件

我有一个

useffect

可以启动一个名为“MyAction”的函数

该函数将一些html内容添加到某个

div

（id=“target”）

我的问题是一个显式的动作（点击一个按钮）会触发useEffect，但是如果用户在手机上旋转视图，则填充了“MyAction”的

div

将消失

这是半完整代码：

const [autocaptureError, setAutocaptureError] = useState(false);
const { isMobile } = useWindowSize(); // some custom hooks that detects type of device
const frontAutoCaptureRef = useRef<HTMLDivElement>(document.createElement('div'));
const scrollToAutocapture = () => frontAutoCaptureRef.current.scrollIntoView();

useEffect(() => {
  if (!autocaptureError) {
    const options{
      locale: 'es',
    };
    window.MyAction('target', options);
  }
}, [autocaptureError, /*a lot of deps because the code is longer */ ]);

const handleNext = (type: string) => {
  if (isMobile) {
    scrollToAutocapture();
    window.addEventListener('resize', () => scrollToAutocapture());
  }
};

return(
  <div id="container>
    <div id="target" />
  </div>
);

const[autocaptureError，setAutocaptureError]=useState（false）；
const{isMobile}=useWindowsSize（）；//一些用于检测设备类型的自定义挂钩
const frontAutoCaptureRef=useRef（document.createElement（'div'）；
常量scrollToAutocapture=（）=>frontAutoCaptureRef.current.scrollIntoView（）；
useffect（（）=>{
如果（！autocaptureError）{
常量选项{
区域设置：“es”，
};
window.MyAction（'target'，选项）；
}
}，[autocaptureError，/*由于代码较长，导致DEP较多*/]）；
常量handleNext=（类型：字符串）=>{
if（isMobile）{
滚动到自动捕获（）；
addEventListener（'resize'，（）=>scrollToAutocapture（））；
}
};
返回(