Importing colors vs destructuring from props (from theme)

Question

i was wandering, Is there a difference in terms of performance if import a color from an object, like so:

import { colors } from "theme/colors";

export const BoxStyled = styled.div`
  background: ${colors.primary};
  min-width: 184px;
`;

or if I use the theme like so :

export const BoxStyled = styled.div`
${({ theme: { colors }}) => `
  background: ${colors.primary};
  min-width: 184px;
`}
`;

I'm using ReactJS with styled-components

Answer 1

Nothing noticeable as the callback function is not doing anything expensive. If your application is facing performance issues, it is most likely due to some other thread blocking operations somewhere else in your app.

To answer your question, the following will be faster since it is just an object property getter.

import { colors } from "theme/colors";

export const BoxStyled = styled.div`
  background: ${colors.primary};
  min-width: 184px;
`;

whereas, the following is doing both, invoking the callback and also accessing the property from the object.

export const BoxStyled = styled.div`
  ${({ theme: { colors }}) => `
    background: ${colors.primary};
    min-width: 184px;
  `}
`;