I'm looking to initialize a state using an asynchronous function:

...
export default function Catalog() {
  const [productsShow, setProductsShow] = useState(getAllProducts())

  ...
  return(
    ... Render products using `productsShow` ... 
  )

getAllProducts()

...
export async function getAllProducts() {

    ...
    return productSet  // Of type Set()
}

The issue I have is the productsShow state is undefined when the page renders. I figure this because the page renders without waiting for the results of the async function to complete. Is there a way to initialize the state with results?

I've tried using the then() function but this results in the same error:

getAllProducts().then(initialProducts => {
    useEffect(() => {
      setProductsShow(preProducts => initialProducts)
    }, [productsShow])
  })

I'm using NextJS

There are some similar questions but differ in technologies used:

• Initialize state with async data in Redux
• Can you use an async function to set initial state with useState