Some questions about using the useEffect hook - react-native

Question

I am new in react-native and the hooks. In my react-native project, I have one screen needs to query data from backend, then, there are some code using the backend returned data should only be run once when the screen mounted. This is what I did (I am using react-query for data fetching from backend):
const MyScreen = ()=> {
// fetch data from backend or cache, just think this code gets data from backend if you don't know react-query
const {status, data, error} = useQuery(['get-my-data'], httpClient.fetchData);
// these code only need to run once when screen mounted, that's why I use useEffect hook.
useEffect(() => {
// check data
console.log(`data: ${JSON.stringify(data)}`);
// a function to process data
const processedData = processeData(data);
return () => {
console.log('Screen did unmount');
};
}, []);
return (<View>
{/* I need to show processed data here, but the processedData is scoped in useEffect hook & I need to have the process data function in useEffect since only need it to be run once */}
</View>)
}
My questions are:
Does react native guarantee the order that the code above useEffect is invoked always first after that run the useEffect code?
As you can see the processedData is returned inside useEffect, how can I pass that return to the layout code to render the processed data?

Answer 1

First question: useEffect is run after the component has fully rendered and does not block the browser's painting. Consider this example:
export default function App() {
console.log("I am code from the app")
React.useEffect(() => {
console.log("I am the effect")
})
React.useLayoutEffect(() => {
console.log("I am the layout effect")
})
return (
<div className="App">
{console.log("I am inside the jsx")}
<h1>Hello World</h1>
</div>
);
}
Will output:
I am code from the app
I am inside the jsx
I am the layout effect
I am the effect
So the useEffect callback will happen as the last thing, after everything else has been done.
Second Question: You can only pass that by using useState and setting the state inside your effect:
const [data, setData] = React.useState()
React.useEffect(() => {
// Your other code
const processedData = processeData(data);
setData(processedData)
}, [setData])