5 ms·

People inheriting old react codebases now have to deal with way more complexity. For example, everyone was using styled components 2-3 years ago and now they a

People inheriting old react codebases now have to deal with way more complexity. For example, everyone was using styled components 2-3 years ago and now they are moving away. The complexity styled components introduced has to be managed alongside the current trend (tailwind?). Old styled components codebase looks horrible. They end up with Java inheritance hell. You create a button, then create another button inheriting that button but with slightly different behavior. Now that one button is extended by God knows how many and any change is going to break all of it. There have been many patterns which got popular but then we found problems and stopped using them. There is also hooks vs classes. There is an exponential complexity in a legacy react codebase if it is not maintained well because react itself is not opinionated.

aniforprez 5y ago
There's also a lot of great improvements in tooling that just completely outclass what CRA does. Webpack is a dinosaur that is slow and painful to use compared to new stuff like vite that is blazing fast and isn't written in JavaScript. Nextjs comes with a lot of routing decisions already made so it becomes much easier to quickly build apps on top of it
- dmitriid 5y ago
  That stuff is only blazing fast because it only targets greenfield projects and has no upgrade path for older projects with complex configurations (scratch "complex", any configurations). We've yet to see how it will fate in 3-5 years.
- thrower123 5y ago
  I am always amazed at how slow any build process that involves webpack always becomes. Webpack runtime is well over 50% of the total time on our CI server builds, and that includes an installshield installer build and thousands of dotnet unit tests that are more complex than they ought to be in that pipeline.
tmstieff 5y ago
I'm working on a codebase that evolved at the same pace as React, but without any thought for idiomatic principals. As a result, you have class-based components, purely functional components, hook based components, HOCs, Redux state passed in through the older functional way, Redux state passed in through an HOC, styled components, traditional CSS styled components, and anything else you can think of that was in vogue at some point. It's a mediocre code base that generally works as advertised, but the performance is trash due to misuse of styled components, and the state management is a nightmare to traverse. I think this is the reality of a lot of 3 - 5 year old React frontends, and it has definitely soured my opinion on React / Redux a bit. I'm not sure if this effects other frontend frameworks as much, but it does seem like React was always pushing for a "new way to do things" every year.
- egeozcan 5y ago
  From here, your problem sounds like a broken code review process or missing/unclear style guides in teams/company. > I'm not sure if this effects other frontend frameworks as much, but it does seem like React was always pushing for a "new way to do things" every year. In my experience, it purely depends on how you regulate the code internally. You can always find developers using something shiny every week when you already solved the problem the shiny thing solves like 100 times in your codebase. I had the same problem with some random integration of Blazor recently in a .NET codebase. Some had the same problem (apparently, I came later) integrating Primefaces to a JSF codebase. It may be amazing tech, but do you really need it if you can KISS without it?
  - arvinsim 5y ago
    > It may be amazing tech, but do you really need it if you can KISS without it? I am only half joking when I say that most developers would say yes due to Resume Driven Development
- rembrant 5y ago
  I believe React is inherently terrible, rather than your reason. I think all libraries that try to abstract an underlying technology into something that it is not, and then also have to provide escape clauses for the abstraction because the user actually has to know how the underlying stuff works, are inherently broken. I also think state-based reactivity is a terrible way to reason about things because sometimes you don't want a certain part of the state to participate in the reactivity, and then at another time you do, so you have to add another state variable to say when it is OK for the other state variable to start participating in the state. It just isn't a good way to create algorithms. The whole idea of React performing a bunch of tasks in the background and updating everything when it feels like is just all a bunch of silly magic. In fact, my state of JavaScript 2021 would be pretty damning, but because of the libraries used instead of JavaScript (like React and TypeScript), not because of JavaScript. React presents a simple view of the world, but in doing so, you now have no idea what is actually happening, and you need to know that. This isn't like an array in JavaScript that is abstraction of an array in c that needs memory allocated and new arrays created and so on. You don't need to know how that works other than that the JavaScript version is a bit slower and you accept that. You need to know how all of the stuff React hides actually works to create your program. In terms of hooks, there are so many "rules". Instead of seeing an API, the API is moved into the documentation and not visible in the code until run-time when you get one of the many errors like not adding a dependency to a hook, using a hook outside of some specific area, etc, etc. It isn't JavaScript at all, so you no longer have the tools of the language to freely use to make your life easier.
doteka 5y ago
Bad developers will write bad code no matter the pattern - styled components has never been a source of issues for us. Why would we move to a new “trend”? I think this is unique to the JS ecosystem.
- nobleach 5y ago
  > Why would we move to a new “trend”? Because if you dare question if TailwindCSS might not be a good idea, you'll be shouted down by an angry mob?
smrtinsert 5y ago
The difference compared to "Java inheritance hell" is that refactoring in Java takes minutes and is safe, going back as far as they have releases for. Good luck doing that on an old node project with any library frankly.
dbbk 5y ago
> For example, everyone was using styled components 2-3 years ago and now they are moving away. What are you basing this theory on, and what do you think people are moving to? In my experience it's still the go-to industry standard.
derangedHorse 5y ago
React doesn’t stop you from writing messy and inconsistent code. I’d say it does bring structure to code that could be a lot worse without it though.
Gigacore 5y ago
Just curious - what are developers moving on to if styled-components is not so good anymore?

aniforprez 5y ago

There's also a lot of great improvements in tooling that just completely outclass what CRA does. Webpack is a dinosaur that is slow and painful to use compared to new stuff like vite that is blazing fast and isn't written in JavaScript. Nextjs comes with a lot of routing decisions already made so it becomes much easier to quickly build apps on top of it

dmitriid 5y ago
That stuff is only blazing fast because it only targets greenfield projects and has no upgrade path for older projects with complex configurations (scratch "complex", any configurations). We've yet to see how it will fate in 3-5 years.
thrower123 5y ago
I am always amazed at how slow any build process that involves webpack always becomes. Webpack runtime is well over 50% of the total time on our CI server builds, and that includes an installshield installer build and thousands of dotnet unit tests that are more complex than they ought to be in that pipeline.

tmstieff 5y ago

I'm working on a codebase that evolved at the same pace as React, but without any thought for idiomatic principals. As a result, you have class-based components, purely functional components, hook based components, HOCs, Redux state passed in through the older functional way, Redux state passed in through an HOC, styled components, traditional CSS styled components, and anything else you can think of that was in vogue at some point. It's a mediocre code base that generally works as advertised, but the performance is trash due to misuse of styled components, and the state management is a nightmare to traverse. I think this is the reality of a lot of 3 - 5 year old React frontends, and it has definitely soured my opinion on React / Redux a bit. I'm not sure if this effects other frontend frameworks as much, but it does seem like React was always pushing for a "new way to do things" every year.

egeozcan 5y ago
From here, your problem sounds like a broken code review process or missing/unclear style guides in teams/company. > I'm not sure if this effects other frontend frameworks as much, but it does seem like React was always pushing for a "new way to do things" every year. In my experience, it purely depends on how you regulate the code internally. You can always find developers using something shiny every week when you already solved the problem the shiny thing solves like 100 times in your codebase. I had the same problem with some random integration of Blazor recently in a .NET codebase. Some had the same problem (apparently, I came later) integrating Primefaces to a JSF codebase. It may be amazing tech, but do you really need it if you can KISS without it?
- arvinsim 5y ago
  > It may be amazing tech, but do you really need it if you can KISS without it? I am only half joking when I say that most developers would say yes due to Resume Driven Development
rembrant 5y ago
I believe React is inherently terrible, rather than your reason. I think all libraries that try to abstract an underlying technology into something that it is not, and then also have to provide escape clauses for the abstraction because the user actually has to know how the underlying stuff works, are inherently broken. I also think state-based reactivity is a terrible way to reason about things because sometimes you don't want a certain part of the state to participate in the reactivity, and then at another time you do, so you have to add another state variable to say when it is OK for the other state variable to start participating in the state. It just isn't a good way to create algorithms. The whole idea of React performing a bunch of tasks in the background and updating everything when it feels like is just all a bunch of silly magic. In fact, my state of JavaScript 2021 would be pretty damning, but because of the libraries used instead of JavaScript (like React and TypeScript), not because of JavaScript. React presents a simple view of the world, but in doing so, you now have no idea what is actually happening, and you need to know that. This isn't like an array in JavaScript that is abstraction of an array in c that needs memory allocated and new arrays created and so on. You don't need to know how that works other than that the JavaScript version is a bit slower and you accept that. You need to know how all of the stuff React hides actually works to create your program. In terms of hooks, there are so many "rules". Instead of seeing an API, the API is moved into the documentation and not visible in the code until run-time when you get one of the many errors like not adding a dependency to a hook, using a hook outside of some specific area, etc, etc. It isn't JavaScript at all, so you no longer have the tools of the language to freely use to make your life easier.

doteka 5y ago

Bad developers will write bad code no matter the pattern - styled components has never been a source of issues for us. Why would we move to a new “trend”? I think this is unique to the JS ecosystem.

nobleach 5y ago
> Why would we move to a new “trend”? Because if you dare question if TailwindCSS might not be a good idea, you'll be shouted down by an angry mob?

smrtinsert 5y ago

The difference compared to "Java inheritance hell" is that refactoring in Java takes minutes and is safe, going back as far as they have releases for. Good luck doing that on an old node project with any library frankly.

dbbk 5y ago

> For example, everyone was using styled components 2-3 years ago and now they are moving away. What are you basing this theory on, and what do you think people are moving to? In my experience it's still the go-to industry standard.

derangedHorse 5y ago

React doesn’t stop you from writing messy and inconsistent code. I’d say it does bring structure to code that could be a lot worse without it though.

Gigacore 5y ago

Just curious - what are developers moving on to if styled-components is not so good anymore?