diffHydratedStyles() — react Function Reference

Source Code

packages/react-dom-bindings/src/client/ReactDOMComponent.js lines 2042–2088

function diffHydratedStyles(
  domElement: Element,
  value: mixed,
  serverDifferences: {[propName: string]: mixed},
): void {
  if (value != null && typeof value !== 'object') {
    if (__DEV__) {
      console.error(
        'The `style` prop expects a mapping from style properties to values, ' +
          "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
          'using JSX.',
      );
    }
    return;
  }
  // First we compare the string form and see if it's equivalent.
  // This lets us bail out on anything that used to pass in this form.
  // It also lets us compare anything that's not parsed by this browser.
  const clientValue = createDangerousStringForStyles(value);
  const serverValue = domElement.getAttribute('style');

  if (serverValue === clientValue) {
    return;
  }
  const normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
  const normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
  if (normalizedServerValue === normalizedClientValue) {
    return;
  }

  if (
    // Trailing semi-colon means this was regenerated.
    normalizedServerValue[normalizedServerValue.length - 1] === ';' &&
    // TODO: Should we just ignore any style if the style as been manipulated?
    hasViewTransition((domElement: any))
  ) {
    // If this had a view transition we might have applied a view transition
    // name/class and removed it. If that happens, the style attribute gets
    // regenerated from the style object. This means we've lost the format
    // that we sent from the server and is unable to diff it. We just treat
    // it as passing even if it should be a mismatch in this edge case.
    return;
  }

  // Otherwise, we create the object from the DOM for the diff view.
  serverDifferences.style = getStylesObjectFromElement(domElement);
}