Search code examples
reactjsstyled-components

What are the performance implications to adding *all* styled-system attributes to a styled-component?


When using styled-system with styled-components what, if any, are performance implications to loading in more props than I may use?

For example, this is what I currently have for a base Div component, but there are tons of other props I'm not using -- e.g., fontSize and fontSizeProps as two of dozens of other examples.

import React from 'react';
import { themed } from 'Utils/theme.helpers';
import styled from 'styled-components';
import {
 alignSelf,
 AlignSelfProps,
 height,
 HeightProps,
 maxHeight,
 MaxHeightProps,
 maxWidth,
 MaxWidthProps,
 minHeight,
 MinHeightProps,
 minWidth,
 MinWidthProps,
 order,
 OrderProps,
 overflow,
 OverflowProps,
 space,
 SpaceProps,
 width,
 WidthProps,
} from 'styled-system';

export type DivProps = React.PureComponent<JSX.IntrinsicElements['div']> &
 AlignSelfProps &
 OrderProps &
 OverflowProps &
 SpaceProps &
 WidthProps &
 MaxWidthProps &
 MinWidthProps &
 MaxHeightProps &
 HeightProps &
 MinHeightProps;

export const Div = styled.div<DivProps>(
    {
 boxSizing: 'border-box',
    },
 space,
 width,
 minWidth,
 maxWidth,
 height,
 minHeight,
 maxHeight,
 order,
 alignSelf,
 overflow,
 themed('container')
);

Solution

  • It's negligible.

    enter image description here

    1. The top 3 Empty divs are styled-system components with no props.
    2. The colored divs are derived from your Div example with 1 color prop each.
    3. The last styled div is just a styled-component without styled-system.

    I suppose you could scale this out with much more complex components but I think the render times will grow in linear time.