在使用useEffect()中的fetch渲染组件之前，ReactNative UI会冻结一秒钟

Question

TL；DR：当我试图呈现一个在useEffect()中执行API获取的组件时，我的UI会冻结.5-1s。

我有ComponentX，它是一个通过redux调度从useEffect((中的API获取数据的组件。我正在使用RTK来构建我的redux存储。

function ComponentX() {
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchListData()); // fetch list data is a redux thunk.
}, [dispatch]);

... 
return <FlatList data={data} /> // pseudo code
}

正如您所看到的，每次渲染组件时都会进行提取。

现在我在App中有了ComponentX以及另一个名为ComponentY的组件。

以下是我的应用程序如何确定显示哪个组件的基本实现。假设每个组件都有一个执行onClick的按钮

function App() {
const [componentToRender, setComponentToRender] = useState("x");
if (componentToRender === "x") {
return <ComponentX onClick={() => setComponentToRender("y")}/>
} else {
return <ComponentY onClick={() => setComponentToRender("x")}/>
}
}

现在，当我尝试从ComponentY移动到ComponentX时，问题就发生了。当我点击"；背面"；ComponentY上的按钮，UI将冻结.5-1s，然后显示ComponentX。从useEffect中删除dispatch(fetchListData());修复了这个问题，但显然我不能这样做，因为我需要来自API的数据。

另一件有趣的事情是，我试图将调度封装在if语句中，假设它会阻止数据提取，从而解决"；滞后；当CCD_ 11为假时。在渲染ComponentX之前，UI仍然冻结。

useEffect(() => {
if (shouldReload) { // assume this is false
console.log("reloading");
dispatch(fetchListData());
}
}, [dispatch, shouldReload]);

知道这里发生了什么吗？

编辑：

我做了更多的代码修剪，试图简化事情。我发现，从等式中删除redux可以解决这个问题。只需执行以下操作，滞后现象就会消失。这让我相信这与Redux/RTK有关。

const [listData, setListData] = useState([]);
useEffect(() => {
getListData().then(setListData) 
}, []);

Answer 1

有时在交互/动画完成后运行代码可以解决问题。

useEffect(() => {
InteractionManager.runAfterInteractions(() => {
dispatch(fetchListData());
});
}, [dispatch]);