This is a workaround for the following problem that I can't seem
to understand.
This JSX code:
<p data-theme={props.app.theme}>{props.app.theme}</p>
Is rendered as:
<p data-theme="light">dark</p>
This happens only upon initial page load because on the server
side we don't know the user's preferred theme. So we start with
the default (light).
Then, as the app bootstraps in the browser, it updated the content
of the P tag with the new theme (dark).
However, for reasons that I really don't understand, it does not
update the `data-theme` attribute.
So this works around that be forcing a different component for each
theme that has the data-theme hardcoded. By force-rendering a different
component, we can be certain React has no choice be to re-render the
entire tag.
If anybody could explain to me why this happen, I'd gladly buy you
a coffee or something.
