Cannot update a component while rendering a different component react-navigation - react-native

Question

I'm building an app using expo and react native. In my project, I have a stackNavigator containing three stackScreen and I also have a DatabaseManager class with static async function. In my components, I use useState and useEffect to load my data and display them.
When I move from the first Screen to the second one, I got an error :
Warning: Cannot update a component (%s) while rendering a different component (%s). To locate the bad setState() call inside %s, follow the stack trace as described in https://reactjs.org/link/setstate-in-render%s, StackNavigator, Screen, Screen.
This warning is, I suppose the reason why I need to tap 2 times on the screen to navigate between screens sometimes.
Here's a part of my code:
export default class DatabaseManager {
...
static async getSplits(){
if (!this.db)
await this.openDatabase();
const query = "select distinct day from exercises";
const resultQuery = await this.executeSql(query, []);
const result = [];
var rows = resultQuery.rows;
for (let i = 0; i < rows.length; i++) {
var item = rows.item(i);
result.push({split: item.DAY});
}
return result;
}
static async getExercises( split){
if (!this.db)
await this.openDatabase();
const query = "select distinct name from exercises where day = ? order by number";
const resultQuery = await this.executeSql(query, [split]);
const result = [];
var rows = resultQuery.rows;
for (let i = 0; i < rows.length; i++) {
var item = rows.item(i);
result.push({name: item.NAME});
}
return result
}
}
App.js
//...
function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName='Home' >
<HomeStack.Screen name="Home" component={Home} options={{title:'Splits'} }/>
<HomeStack.Screen name="Screen" component={Screen} />
</HomeStack.Navigator>
);
}
...
export default function Home ({navigation}){
const [splits, setSplits] = useState([{ split:''}]);
const handlePress = async (split) => {
navigation.navigate('Screen', {split: split});
};
useEffect(() => {
const dataFetch = async () => {
const data = await DatabaseManager.getSplits();
setSplits(data);
}
dataFetch();
}, [])
return (
<View style={styleHome.container}>
<ScrollView style={styleHome.scrollViewContainer}>
{splits.map((split, index) => (
<View style={styleHome.touchableContainer} key={index}>
<Pressable
key={split.split}
style={styleHome.touchable}
activeOpacity={1}
onPress={() => handlePress(split.split)}
>
<Text style={styleHome.textTouchable}>{split.split}</Text>
</Pressable>
</View>
))}
</ScrollView>
</View>
);
The second screen is similar to this.
I tried to use useFocusEffect, enableFreeze and useFocus. I also tried to put a Loading Screen before navigating to a new screen, nothing solve the issue. By using some console.log, I found out that my code seems to be correct, the Home component doesn't re render after navigating to the other component.

Answer 1

I found out the solution: I just had a bad navigation.setOptions() in the second screen ...
I wrapped it in the useEffect() and it works fine.
I found the solution there: https://github.com/react-navigation/react-navigation/issues/9478#issuecomment-813031134