HOC should not attach sheets until mount #1149
Conversation
|
Changelog forgotten! |
|
Looking at this, we shouldn't be calling .attach in constructor at all, this should be done in |
|
Wouldn’t we then have a flash of uncomputed styles? |
|
Nope, didMount happens synchronously after rendering, so one can still do stuff like that, before browser starts drawing |
|
I had a discussion with the core team about this a while ago, it sounds dangerous but it actually is guaranteed. |
* master: Use componentDidMount for WithStyles (#1157) Use mui like global ponyfill (#1153) HOC should not attach sheets until mount (#1149) v10.0.0-alpha.22 add react-dom dev dependenncy Fix SSR for Hooks based implementation (#1148) React-JSS id prop docs and improvements (#1147) v10.0.0-alpha.21 fix changelog add support hint to the changelog (#1145) Sheets management for css() (#1137) # Conflicts: # packages/react-jss/.size-snapshot.json
* HOC should not attach sheets until mount, same as the new hook implementation * Fix potential FOUC by attaching sheet in HOC constructor when running in browser. * Call registry.add() on the client too for parity with the hooks implementation
|
Unsure if this is the right place to ask this but I noticed a change in test behavior (jest+enzyme, react-jss components) which i'm wondering is a side-effect of this update? It's not a problem, I'm just curious if I'm understanding the functionality I'm seeing & if there are any other changes I missed that might contribute (I just updated react-jss from around ~8.6.* to 10.0.0). Previously components wrapped in After updating the same components I think this makes sense, because enzyme it isn't fully mounting the component with |
Fixes #1143.
Per the discussion in #1140 and, prior to that, #1089, sheets should not be attached during server-side rendering.
Now that #1148 has been merged, server rendering is working for the hook API (
createUseStyles()) but the HOC (withStyles()) hasn't been updated yet so still warns (incorrectly)Rule is not linked. Missing sheet option "link: true"on the server.This PR brings the HOC implementation into line with the hook implementation - adding the sheet to the
SheetsRegistrywhen the component is constructed, and not attaching (managing) it until the component is mounted (which never occurs on the server).