Data Processing Before Rendering in React Native Functional Component - reactjs

Question

I have a React Native functional component.
I'm using useEffect to fetch some data from AsycStorage and set it to local state. However, before rendering, I want to do some processing/calculations on this data before I can render it on screen. Where should I be doing this calculation?
My screen looks as follows:
const BasicScreen = ({ data, getPosts }) => {
const [myItems, setItems] = useState([]);
const checkForItems = () => {
var storageItems = AsyncStorage.getItem("MyItems").then((item) => {
if (item) {
return JSON.parse(item);
}
});
setItems(storageItems);
};
useEffect(() => {
async function getItems() {
await checkForItems(); // calling function to get data from storage
}
getItems(); // Local Storage
getPosts(); // Store action
}, []);
return (
<View>
<>
<Text>{JSON.stringify(processedItemsA)}</Text>
<Text>{JSON.stringify(processedItemsB)}</Text>
</>
</View>
);
}
export default BasicScreen;
As you can see, I check for items in AsyncStorage and set that data to local state myItems.
I want to do some mathematical calculations and some conditional logic, for example, separate the data of myItems into two separate categories, and then render that on screen. Something like processedItemsA and processedItemsB. Where should I be doing this processing of data?
processedItemsA = myItems => {
// Some logic
}
processedItemsB = myItems => {
// Some logic
}
I'm not sure about where this logic should go.
Note that this processing is required because apart from storage, I also get some data from redux store, and then process it along with that data.

Answer 1

This way you can achieve this
const [processedItemsA, setProcessedItemsA] = useState({});
const [processedItemsB, setProcessedItemsB] = useState({});
doProcessedItemsA = myItems => {
...
setProcessedItemsA({...data}); // set data after process Item A
}
doProcessedItemsB = myItems => {
...
setProcessedItemsB({...data}); // set data after process Item B
}
const checkForItems = () => {
var storageItems = AsyncStorage.getItem("MyItems").then((item) => {
if (item) {
const parsedItem = JSON.parse(item);
doProcessedItemsA(parsedItem);
doProcessedItemsB(parsedItem);
}
});
// setItems(storageItems); <-- No need to set here -->
};