Emotion example is poorly performant, re-rendering over 50 times a second

What version of Remix are you using?

1.2.3

Steps to Reproduce

1. Download the example app:

$ svn export https://github.com/remix-run/remix/tree/main/examples/emotion

1. Install dependencies
2. Log style re-render trigger:

$ vim app/entry.client.tsx # Add `console.log("🚨 RERENDER 🚨")` in `reset()` function body

1. Run app:

$ npm run dev

1. Look at the console:

This is not only re-applying the style tags, but also re-rendering the entire app tree over 50 times a second, which isn’t good at all. See my comment below for a suggestion on how to combat this problem.

Expected Behavior

A fast app

Actual Behavior

An app that is flooded with console warnings and re-renders

[chaance]

If someone would like to update the emotion example to mirror this chakra example that would be awesome: #35

Emotion supports SSR with streaming and we should be using their native helpers instead of trying to hack our own solutions: https://emotion.sh/docs/ssr#renderstylestonodestream

I plan on knocking this out today 🙂

[chaance]

I’ve been meaning to do this but it fell to the bottom of my to-do list. I’ll try to get back on it next week if no one else beats me to it 😅