Can't use componentDidMount() hooks on components inside pages which use withAmp().
I tried to use IntersectionObserver to create lazy load image. Everything is fine until I export with withAmp(), ComponentDidMount() hooks seems not to be working, I tried console.log() inside componentDidMount hooks, no luck.
Steps to reproduce this behavior
pages/index.js
import React, { Fragment } from 'react'
import { withAmp } from 'next/amp'
import Card from '../components/card'
const App = () => (
<Fragment>
<h1>Hello World</h1>
<Card />
</Fragment>
)
export default withAmp(App)
components/card.js
import React, { useEffect } from 'react'
const Card = () => {
useEffect(() => {
console.log("Start Observe!")
}, [])
return(
<div>
<h1>Card</h1>
</div>
)
}
export default Card
withAmp() does messed up ComponentDidMount() for some reason, hope there's a why to resolve this issue.
What I expected to see is: To use componentDidMount or other relate way to be able to set state after served on client side and is rendered.
Without withAmp()

With withAmp()

Is there a relevant way to run function after served on client side and rendered but still can be able to use set state?
There is no Next.js or React client-side runtime in AMP-only mode https://github.com/zeit/next.js#amp-page-modes use the Hybrid one instead.
Thanks @MarchWorks.
Probably good to note that if your app only has client-side JS for image lazy loading you probably want to use AMP First with amp-img which does lazy loading by default.
Most helpful comment
There is no Next.js or React client-side runtime in AMP-only mode https://github.com/zeit/next.js#amp-page-modes use the Hybrid one instead.