question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

inline style optimization

See original GitHub issue

as I found most of the styles in react-native-paper are provided in an inline fashion. doesn’t it create extra re-renders and a performance issue?

for example

// https://github.com/callstack/react-native-paper/blob/main/src/components/Button.tsx
// Line:311
        <Text
            selectable={false}
            numberOfLines={1}
            style={[
              styles.label,
              compact && styles.compactLabel,
              uppercase && styles.uppercaseLabel,
              textStyle,
              font,
              labelStyle,
            ]}
          >
            {children}
          </Text>

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11

github_iconTop GitHub Comments

1reaction
raajnadarcommented, Nov 21, 2021

why would this cause performance issue? What is inline here? No style is inline here

1reaction
github-actions[bot]commented, Oct 19, 2021

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Improve site performance by inlining your CSS - LogRocket Blog
Once you understand how CSS can impact your site performance, you can then look for opportunities to inline your CSS — the right...
Read more >
Optimize CSS Delivery | PageSpeed Insights
Optimize CSS Delivery · On this page · Overview · Recommendations · Example of inlining a small CSS file · Don't inline large...
Read more >
Angular 12 CSS optimization inline event handler with ...
The Angular 12 devkit seems to add a new inline event handler to the CSS bundle reference in index.html, example below. <link rel="stylesheet" ......
Read more >
Angular Security - Disable Inline Critical CSS - 0xdbe
This article describes what's wrong with this optimization and how to disable it to keep a strict CSP (Content Security Policy). What's wrong?...
Read more >
Improve website speed: inline css - Marketing Tracer
Inline CSS is often faster because it skips 1 or more network requests. CSS blocks the rendering of the page. While the CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found