Leonardo Maldonado
Feb 28, 2020 ⋅ 6 min read

Why you shouldn’t use inline styling in production React apps

Leonardo Maldonado Fullstack developer. JavaScript, React, TypeScript, GraphQL.

Recent posts:

Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 ⋅ 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 ⋅ 4 min read
View all posts

4 Replies to "Why you shouldn’t use inline styling in production React apps"

  1. Your argument against inline styles because of limitations with argument passing appears somewhat flawed; or am I misunderstanding something here?

    const Button = ({ backgroundColor }) => {
    return (

    My Button


  2. I don’t see inline styles not “looking good” because you used a ternary operator. Actually, you could do a small refactor it to be just as you did on your CSS-in-JS approach and you code will look the same.

    I’d say you can use inline styling for minor changes on not-reusable components or for styles you don’t want be available to be changed, like giving div a flex property rather than create a React component or a CSS classes only to this end. If you need more complexity than you can move to a more featured place: CSS-in-JS or whatever, but it’s easier to start from basic and then evolve as soons as you need more power.

  3. This is exactly what I was thinking… he also says that using the ternary “grows the component size” but it actually doesn’t result in any more lines of code. In fact it results in less lines of code. It also is very readable, I would argue that it’s more readable than the styled component version because it doesn’t need a special syntax unique to the styled component library, instead it is taking advantage of a feature native to the javascript language.

  4. There are libraries that allow devs to access all of CSS features with inline styles, so that’s not a real concern. And you keep saying that inline styles aren’t “performant” but never offer a single reason as to why their performance is worse. You also don’t provide any reason as to why inline styles aren’t “scalable”. This is just a really low quality article, and it’s sad because it’s also the first search result in google.

    “the inline styling might slow you and your coworkers down a little bit to create new components or maintain those that already exist.” Again, WHY? You make so many claims in this article and never even attempt to substantiate them in any way. It’s ridiculous.

    “One of the jobs of developers is to try to find the most performant solution” This is just flat out wrong. As a developer you don’t need to find the “most performant” solution, in fact it’s often a huge waste of time. Why? Because users don’t care if your application takes 10 ms to run instead of 1 ms to run. Computers are very fast. What is important is implementing features quickly, not implementing quick features.

Leave a Reply