Hot routing and react webhooks

[SharePickle]

Category

• Question
• Bug
• Enhancement

Hello, it's probably an issue on my side, but still here's what I'm getting:
Sorry, something went wrong message is displayed when I'm navigating to any page (hot routing only) containing a custom web part which uses hooks.

Hook is used correctly, it's not after some condition.
The Web Part works if there's no hot routing navigation or you just refresh the page.

Same true for any custom web part. I could not reproduce it with OOB webparts though.

Message:

Source code:

export default () => {

  const theme = (window as any).__themeState__.theme;
  const colors = Object.keys(theme);
  const [key, setKey] = React.useState(+new Date());

  return (
    <div key={key}>
      <div>Theme colors <button type="button" onClick={() => setKey(+new Date())}>Refresh</button></div>
      {colors.map(c => (
        <div key={c} style={{ background: theme[c], color: 'white', padding: '4px 0', textShadow: '1px 1px black' }}>{c}: {theme[c]}</div>
      ))}
    </div >
  );

};

Expected or Desired Behavior

• Webpart loads correctly when navigating from any other page (with hot routing).

Observed Behavior

• Webpart loads incorrectly: Sorry, something went wrong message is displayed.

Steps to Reproduce

• goto Home page
• goto Pages library
• open any page containing custom webpart with react hooks

Notes

Just noticed - it only happens when I navigate from Site Pages library or any Library (Pages, List or Documents).