Next.js: React Hooks and with-amp

[mtngoatgit]

Examples bug report

Example name

with-amp

Describe the bug

Unable to get React Hooks to fire inside with-amp example.

To Reproduce

I add the following file to the basic structure of the app (based on React's documentation for the useEffect hook):

```import React, { useState, useEffect } from "react";

export default function Example() {
const [count, setCount] = useState(0);

useEffect(() => {
document.title = You clicked ${count} times;
});

return (

You clicked {count} times

);
}
```

• Logging the state will print the initial state ('0'), but it never prints a change in state.

• Writing a log within the useEffect fn never prints and no value is assigned to the document (meaning useEffect is never firing).

• Using a different configuration of the _document.js resolves the issue. For example, if I use the _document.js from the with-styled-components example the hooks behave as expected.

[timneutkens]

There's a misconception here about how AMP works, it is only server-rendered, there is no client-side user javascript, so there is no support for onClick.

[pPanda-beta]

@timneutkens
Why the following are excluded from amp-rendered pages?

• React lifecycle methods
• React callbacks like onClick, ...
• React Hooks

If we dig through we find amp do support asynchronous javascript WRITTEN BY AUTHOR,

https://amp.dev/documentation/components/amp-script/?format=websites
and
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript

[piavgh]

There's a misconception here about how AMP works, it is _only_ server-rendered, there is no client-side user javascript, so there is no support for onClick.

Hi @timneutkens , can you please share a link that explains why is that? Thank you :D

[omar-dulaimi]

@timneutkens Any docs about this?