Is there any performance impact by using styled components in react-native?

Viewed 415

By digging into the library i can see its doing so much heavy lifting like

  1. Hash calculation
function generateStyleObject(executionContext) {
      var flatCSS = flatten(this.rules, executionContext).join('');
      var hash = generateComponentId(flatCSS);

      if (!generated[hash]) {
        var root = safeParse(flatCSS);
        var declPairs = [];
        root.each(function (node) {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value]);
          } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn("Node of type " + node.type + " not supported as an inline style");
          }
        }); // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11

        var styleObject = transformDeclPairs(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
        var styles = styleSheet.create({
          generated: styleObject
        });
        generated[hash] = styles.generated;
      }

      return generated[hash];
    };
  1. running so many loops and doing flatten of objects.
function css(styles) {
  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    interpolations[_key - 1] = arguments[_key];
  }

  if (isFunction(styles) || isPlainObject(styles)) {
    // $FlowFixMe
    return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));
  }

  if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === "string") {
    // $FlowFixMe
    return styles;
  } // $FlowFixMe


  return flatten(interleave(styles, interpolations));
}

So is there any performance impact by using styled components in a big size react native project having n no of styled components and css?

0 Answers
Related