Ethereum-org-website: Morpher component memory leak

[samajammin]

Describe the bug

The Morpher.js component doesn't clearTimeout when the component is unmounted.

Console error:

index.js:2177 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Morpher (at pages/index.js:337)
    in h3 (created by pages__H3)
    in pages__H3 (at pages/index.js:336)
    in div (created by pages__Title)
    in pages__Title (at pages/index.js:332)
    in header (created by pages__Header)
    in pages__Header (at pages/index.js:331)
    in div (created by pages__Content)
    in pages__Content (at pages/index.js:328)
    in div (created by pages__Page)
    in pages__Page (at pages/index.js:312)
    in HomePage (created by HotExportedHomePage)
    in AppContainer (created by HotExportedHomePage)
    in HotExportedHomePage (created by PageRenderer)

To Reproduce
Steps to reproduce the behavior:

1. Run project locally
2. Got to http://localhost:8888/en/
3. Navigate to a different page
4. View console error

Expected behavior

Update component to set a variable on the setTimeout call so we can call clearTimeout on the unmount of useEffect

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[wackerow]

Will look at this.

[wackerow]

@samajammin This was tricky honestly because it was difficult to reproduce that error at first. It only occurs if you navigate away from the home page _while_ the morpher animation is churning, because each of those setTimeout() calls is only for 33 milliseconds, and cycle for what looks like 210 milliseconds total. After this, each setTimeout() has already fired and the only thing left if the setInterval() which will trigger this all again 3 seconds later... but during this time no error would result.

That being said, the PR above should fix it. While I was in that file I also applied a small patch to the order of the words array, moving "Ethereum" from first to last. This prevents 'Ethereum' from rendering twice in a row when it starts (starts with state.text which is also "Ethereum").
Also, given current known bug where the morpher does not cycle back to state.counter = 0 appropriately (can be addressed in separate PR), this small adjustment prevents it from ending on 'ఇథిరియూమ్', and temporarily added clearInterval() to halt further renders once it hits the end.

Let me know what you think!