{"id":13726004,"url":"https://github.com/jm90m/rn-styled-components-performance","last_synced_at":"2025-05-07T21:30:54.870Z","repository":{"id":89183008,"uuid":"101126376","full_name":"jm90m/rn-styled-components-performance","owner":"jm90m","description":"Testing performance styled-components vs inline styles in React Native","archived":false,"fork":false,"pushed_at":"2017-08-26T21:51:18.000Z","size":9,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-04T01:28:20.134Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jm90m.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-23T02:03:37.000Z","updated_at":"2024-02-17T14:41:26.000Z","dependencies_parsed_at":"2023-03-01T10:00:11.035Z","dependency_job_id":null,"html_url":"https://github.com/jm90m/rn-styled-components-performance","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jm90m%2Frn-styled-components-performance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jm90m%2Frn-styled-components-performance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jm90m%2Frn-styled-components-performance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jm90m%2Frn-styled-components-performance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jm90m","download_url":"https://codeload.github.com/jm90m/rn-styled-components-performance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224654059,"owners_count":17347662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:46.877Z","updated_at":"2024-11-14T16:33:06.717Z","avatar_url":"https://github.com/jm90m.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# rn-styled-components-performance\nTesting performance styled-components vs inline styles in React Native\n\n# To run this project\n* `npm install`\n* and open with expo\n\nFrom this blog post: [https://codeburst.io/a-quick-performance-comparison-of-styled-components-vs-inline-styles-in-react-native-e07adffd14cb](https://codeburst.io/a-quick-performance-comparison-of-styled-components-vs-inline-styles-in-react-native-e07adffd14cb)\n# A Quick Performance Comparison of Styled-Components vs Inline Styles in React Native\n\nI have often wondered what the performance differences were between\nstyled-components and inline styles when it comes to React Native. Here, I’ll be\ncomparing the two with several test cases. I will be using 2 different versions\nof styled-components for my test, one version being the latest release and the\nother version coming from the master branch\n([https://github.com/styled-components/styled-components](https://github.com/styled-components/styled-components)).\nSince [Max Stoiber](https://medium.com/@mxstbr), had informed me that they had\ndone some performance optimizations on master.\n\nThe first test case I have includes a ScrollView that will render 10,000\nelements. We use ScrollView rather than ListView since ListView is optimized for\nbig data sets, and it doesn’t render all the data at once. \u003cbr\u003e While ScrollView\nrenders all its react child components at once.\n\nI created 2 different screens that each housed a ListView and ScrollView, with\nchild components created using styled-components and inline styles.\n\nHere’s , this is the screen that has inline styles. It contains both a\nrenderListView \u0026 renderScrollView functions (swapping them out when I test,\nrather than creating a different screen)\n\n    import React, { Component } from 'react';\n    import { ListView, ScrollView, StyleSheet, View, Text } from 'react-native';\n    import testData from './test-data';\n\n    const styles = StyleSheet.create({\n      row: {\n        paddingTop: 5,\n        paddingBottom: 5,\n        borderBottomWidth: 1,\n        borderBottomColor: 'grey',\n      },\n      scrollView: {\n        flex: 1,\n      },\n    });\n\n    class TestScreen extends Component {\n      constructor(props) {\n        super(props);\n        const ds = new ListView.\n    ({ rowHasChanged: (r1, r2) =\u003e r1 !== r2 });\n        this.state = {\n          dataSource: ds.cloneWithRows(testData),\n        };\n      }\n\n      componentWillMount() {\n        \n    .log(`ListView - Rendering ${testData.length} components`);\n        \n    .time('inline');\n      }\n\n      componentDidMount() {\n        \n    .timeEnd('inline');\n      }\n\n      renderRow(row) {\n        return \u003cView style={styles.row}\u003e\u003cText\u003e{row.name}\u003c/Text\u003e\u003c/View\u003e;\n      }\n\n      renderListView() {\n        return (\n          \u003cListView\n            dataSource={this.state.dataSource}\n            renderRow={this.renderRow}\n            enableEmptySections={true}\n          /\u003e\n        );\n      }\n\n      renderScrollView() {\n        return (\n          \u003cScrollView style={styles.scrollView}\u003e\n            {testData.map((row, index) =\u003e (\n              \u003cView style={styles.row} key={index}\u003e\u003cText\u003e{row.name}\u003c/Text\u003e\u003c/View\u003e\n            ))}\n          \u003c/ScrollView\u003e\n        );\n      }\n\n      render() {\n        return this.renderListView();\n      }\n    }\n    export default TestScreen;\n\nHere’s , and it includes all components even the ListView and ScrollView\ninitialized with styled-components.\n\n    import React, { Component } from 'react';\n    import { ListView } from 'react-native';\n    import styled from 'styled-components/native';\n    import testData from './test-data';\n\n    const Row = styled.View`\n      padding-top: 5;\n      padding-bottom: 5;\n      border-bottom-width: 1;\n      border-bottom-color: grey;\n    `;\n\n    const RowText = styled.Text`\n    `;\n\n    const ScrollViewStyled = styled.ScrollView`\n      flex: 1;\n    `;\n\n    const ListViewStyled = styled.ListView`\n    `;\n\n    class TestScreenStyled extends Component {\n      constructor(props) {\n        super(props);\n        const ds = new ListView.\n    ({ rowHasChanged: (r1, r2) =\u003e r1 !== r2 });\n        this.state = {\n          dataSource: ds.cloneWithRows(testData),\n        };\n      }\n      componentWillMount() {\n        \n    .log(`ListView - Rendering ${testData.length} components`);\n        \n    .time('styled');\n      }\n\n      componentDidMount() {\n        \n    .timeEnd('styled');\n      }\n\n      renderRow(row) {\n        return \u003cRow\u003e\u003cRowText\u003e{row.name}\u003c/RowText\u003e\u003c/Row\u003e;\n      }\n\n      renderListView() {\n        return (\n          \u003cListViewStyled\n            dataSource={this.state.dataSource}\n            renderRow={this.renderRow}\n            enableEmptySections={true}\n          /\u003e\n        );\n      }\n\n      renderScrollView() {\n        return (\n          \u003cScrollViewStyled\u003e\n            {testData.map((row, index) =\u003e \u003cRow key={index}\u003e\u003cRowText\u003e{row.name}\u003c/RowText\u003e\u003c/Row\u003e)}\n          \u003c/ScrollViewStyled\u003e\n        );\n      }\n\n      render() {\n        return this.renderListView();\n      }\n    }\n\n    export default TestScreenStyled;\n\n### Performance Results\n\n![Performance Results](https://cdn-images-1.medium.com/max/1000/1*_btyJwRSwfGZOjerxfCJ_g.png)\n\nThe current version of styled-components performed way better than the latest\nrelease version. There is about a 1–2 second performance difference in\nstyled-components latest release version vs master in the ScrollView tests. I\nonly tested the time it took from componentWillMount to componentDidMount, for\nrendering components in both ListView and ScrollView. When it comes to rendering\nsmaller amount of components (1000 and under) in a ScrollView or using the\nListView for rendering any amount of components, then the difference is\nnegligible between styled-components and inline styles.\n\nWhen you’re rendering large amounts of components in a list, you would want to\nuse a ListView rather than a ScrollView, since ScrollView just loads everything\nat once. So you would never really use a ScrollView to render a large set of\ncomponents. The time difference between rendering components in a ListView in\nstyled-components versus inline styles, is fairly small for all different\namounts of components rendered. Even when it comes to rendering large amounts of\ncomponents in the ScrollView, the latest version on master for styled-components\ncomes fairly close to inline styles.\n\n### Conclusion\n\nStyled-components is coming closer and closer to being as fast as inline styles.\nI recommend everyone to give it a try in their project, it’s pretty rare if ever\nthat you’ll actually render large amounts of components in a ScrollView. The\nListView performance for styled-components is almost the same to the performance\nof inline styles even for extremely large component sets. The amount of context\nand readability that styled-components provides to your components and screens\nis well worth the small performance costs (if any) in many instances. I have no\ndoubt in my mind as future updates to styled-components happen, we will start to\nsee the performance gap become even smaller.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjm90m%2Frn-styled-components-performance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjm90m%2Frn-styled-components-performance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjm90m%2Frn-styled-components-performance/lists"}