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')
);
It's negligible.
I suppose you could scale this out with much more complex components but I think the render times will grow in linear time.