uniqueId() generation breaks server side rendering

[felix-d]

For example, in TextField

https://github.com/nikgraf/belle/blob/master/src/components/TextInput.js#L139 This breaks server side rendering because a new id is generated on the client.

warning.js:45Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) to;" class="style-idb6de" id="username" (server) to;" class="style-idd07b" id="username"

I guess you could use key or id from props to create that id and fallback on a random id.

export default class TextInput extends Component {

  constructor(properties) {
    super(properties);
    ...
    this.uniqueId = properties.key;
  }

  /**
   * Generates the style-id & inject the focus & hover style.
   */
  componentWillMount() {
    const id = this.uniqueId || uniqueId();
    this._styleId = `style-id${id}`;
    updatePseudoClassStyle(this._styleId, this.props);
  }

[mcbryant]

I'm interested in fixing this!

Regarding your suggestions, @felix-d:

• React confusingly treats "key" differently from other props. You can't access it from this.props.
• An "id" prop would absolutely solve this issue! It would be a bit painful to require an "id" (or similar) prop for every component when you want server side rendering, though.

Here's two similar ways of solving this:

• We could make style IDs based on a hash of the computed style. Multiple components with the same style would have the same hash, and we would have to update the hash whenever the style changes. We would need to reference count each hash globally. I'm not sure what having to change class names when styles change would do for performance. Hopefully, not much?
• We could generate hashes after the component mounts. The downside here is we would have to either manually add class names or rerender, neither of which seem quite "right".

I'd be interested in implementing the style-hash ID approach. Am I missing another way? Thoughts, @felix-d and @nikgraf?

[felix-d]

@mcbryant

An "id" prop would absolutely solve this issue! It would be a bit painful to require an "id" (or similar) prop for every component when you want server side rendering, though.

This is what Material UI does AFAIK.

The hashing solution seems like a good idea but it's more complex. I'd go with the id solution first to fix the issue, and then maybe think about an alternative solution that involves hashing, but the id solution is quite viable and solid 👍 Simple is always better than complex 😄

Good reasoning!