Wait function completed before render in React Native - react-native

Question

I'm facing with problem,
I'm use context for socket io.
In App.js:
let loginInfo;
let socket = null;
// Listening notification on background or quit
messaging().setBackgroundMessageHandler(async remoteMessage => {
// Init socket,
// Start call
});
// Read AsyncStorage
const getLoginData = async () => {
loginInfo = JSON.parse(await AsyncStorage._retrieveData('loginInfo'));
if (loginInfo && loginInfo?.isJoinedRoom) {
socket = io(loginInfo.url, {timeout: 10000, reconnection: false});
// Here print later
console.log('socket in appjs: ', socket); // 1 -> Socket in here assigned
}
};
getLoginData();
const App = () => {
// here print first
console.log('Socket in appjs 2', socket); // 2 -> Socket in here is null
return (
<>
<SocketProvider value={socket}>
<MainContainer />
</SocketProvider>
</>
);
};
export default App;
I'm want to wait function getLoginData is completed before rendering App. SocketProvider with value alway null.
Can you show me how to wait a function completed before rendering, thank.
I try to set another variable in getLoginData let completed = false
and use in App.js but not work :
{completed ? (
<SocketProvider value={socket}>
<MainContainer />
</SocketProvider>
) : (
<></>
)}

Answer 1

The completed won't work because you are using completed = false in getLoginData as a normal variable... You'll have to use it as a state, i.e.
const [completed, setCompleted] = useState(false);
And then in the getLoginData function, once you are done, set the state to true
And use it just like you used it above.