State value not showing - reactjs

Question

I'm new to React.js ,I'm creating a new application using react hooks, I get data from API and set it to state using setProductTypes() and then when i reading the that sate value productTypes.length it not showing the values (observed it from debugger), I display data based on that and it shows the data .
import React, { useState, useEffect } from "react";
import ProductTypeDataService from "../../services/ProductTypeService";
import Card from 'react-bootstrap/Card'
import { CardGroup } from "react-bootstrap";
const ProductTypeList = () => {
const [productTypes, setProductTypes] = useState([]);
const [nestedArray, setNestedArray]= useState([]);
useEffect(() => {
debugger ;
retrieveTutorials();
},[]);
const retrieveTutorials = () => {
ProductTypeDataService.getAll()
.then(response => {
setProductTypes(response.data);
createNestedArray();;
})
.catch(e => {
console.log(e);
});
};
const createNestedArray= ()=>{
var arr = new Array([]);
var arrayLength = productTypes.length;
for (var i = 0; i < arrayLength; i+4) {
for (var k = 0; k < 4; k++) {
arr[i,k] =productTypes[i+k];
}
}
setNestedArray(arr);
console.log(nestedArray);
};
return (
<div className="col-md-6">
<h4>Product Type List</h4>
<CardGroup>
{productTypes &&
productTypes.map((productType, index) => (
<Card>
<Card.Body>
<Card.Img variant="top" src={productType.imageUrl} />
</Card.Body>
<Card.Footer>
<small className="text-muted">{productType.name}</small>
</Card.Footer>
</Card>
))}
</CardGroup>
</div>
)
}
export default ProductTypeList

Answer 1

State is updated asynchronously.
You either have to pass productTypes received from API call response as parameter to createNestedArray(response.data) or move createdNestedArray inside a useEffect.
useEffect(() => {
// function will be called when productTypes changes
createNestedArray()
}, [productTypes])

Answer 2

That won't do because the productTypes are not yet available. If you need to call the createNestedArray function there, you should move the createNestedArray call in setTimeout, if not you should call the createNestedArray function out of retrieveTutorials function.
Լook at this example:
useEffect(() => {
if (productTypes !== undefined || productTypes.length != 0) {
createNestedArray();
}
}, [productTypes])