Estoy buscando inicializar un estado usando una función asíncrona:

 ... export default function Catalog() { const [productsShow, setProductsShow] = useState(getAllProducts()) ... return( ... Render products using `productsShow` ... )

obtenerTodosLosProductos()

 ... export async function getAllProducts() { ... return productSet // Of type Set() }

El problema que tengo es que el estado de productsShow no está undefined cuando se muestra la página. Me imagino esto porque la página se procesa sin esperar a que se completen los resultados de la función async . ¿Hay alguna manera de inicializar el estado con resultados?

Intenté usar la función then() pero esto da como resultado el mismo error:

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

Estoy usando NextJS

Hay algunas preguntas similares pero difieren en las tecnologías utilizadas:

• Inicializar estado con datos asíncronos en Redux
• ¿Puedes usar una función asíncrona para establecer el estado inicial con useState?