Would this approach to styling can cause performance problems?

Question

If I create style sheet for all my components like this (so 1 component = 1 stylesheet file) would this approach to writing it make some performance issue?
My goal is to have access to theme properties but if this approach can make performance issue in the future I need to consider another approach.

import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
    
const dashboardStyles = (props) => StyleSheet.create({
  progress: {
    backgroundColor: props.colors.background,
  },
});

function useStyles() {
  const { colors } = useTheme();
  const styles = React.useMemo(() => dashboardStyles({ colors }));

  return styles;
}

export default useGlobalStyles;

Answer 1

Performance issues may come in several shapes and flavors depends on your current situation. In our case I think performance issues could be in the following categories:

• Size - a large compressed application file may result in higher loads in terms of bandwidth for both client (waiting longer for app to start) and server (more resources required which usually means a higher cost)
• UX - we want to deliver the best user experience possible meaning actions perform by user will be processes as fast as possible

Let's start with the easy on - UX. Since the react styling commands are injected to the browser's DOM as styling properties the performance gap between this process comparing to simply use fixed css files should be insignificant. So at least here we are certain that the user experience will not be affected.

When we are talking about size (which has an immediate effect on bandwidth) - we aim to make our app bundle as lightweight as possible. Our endgame is a working application that will also be as lightweight as possible.

From my experience with react you can reduce the size of styling follow these steps:

• For each component create 1 css file containing the fixed styling (from some odd reason many developers use react to apply static styles) and set only the dynamic styles in your react file (very similar to the code you've already posted in your question)
• When several components use the same basic style (or when you feel you are copy-and-paste styles across components) - create higher-level stylesheet files that will be re-used. This will help you to write less and use more and therefore - reduce the total size of your app bundle file

These should keep you app as lightweight as possible meaning less bandwidth and less memory consumed by your end-clients browsers (less memory allocations and more references to shared styles).

Technical note: please use general styling commands in your css files and more specific commands in your code (e.g. background or border when using fixed style and backgroundColor or borderWidth when using synamic style in your code). This will help you to better ensure that your dynamic style will always overwrite the fixed default (if there is any) in your fixed styling. More information and useful operators on this topic can be found here

Answer 2

I would structure my files as such:

• theme.js

contains only styles, definitions of color palette, font types, and sizes, widths and heights, things that'll be used globally, I use react-native-paper theme on this page.

• commonPageStyles.js

contains only styles that are repeated in multiples pages, such as
page header, page description, anything..

• ComponentX.js

the component that is reused with their style on the same page, e.g a submit button

• MyUniquePage.js

the style that is unique to this page

Very important note: a lot of the styles I declare end up being unused, and I lose track of them, and the style files'd only get bigger and uglier. so what I ended up doing. Is if the styles file doesn't need to live on an independant .js page, I'd include it in the component page and then use this VS code plugin "remove unused styles by xixi" to clean the unused styles page.

Answer 3

Don't Repeat Yourself(DRY) is best for boost your performance.. Yes, your approach of creating a globalStyles files and import that file and using it in your project is a good concept..

I would only suggest that while using your globalStyles don't

import allGlobalStyles from '../GlobalStyles';

Instead use

import {progress, errorStyle, pannelStyle} from '.../GlobalStyles';

which will only import a section of code to your component rather than importing entire file... This is also useful while importing from npm packages too... Like

import {isEmpty, isObject} from 'loadsh';