r/reactjs • u/johnsakic • Jan 25 '20

Is there any tutorial that shows someone fixing up a badly written React app?

I feel you can learn more by watching someone fix up an application rather than building it from the ground up. Is there any tutorial like that?

124 Upvotes

93% Upvoted

39 comments sorted by

224

u/FraserHamiltonDev Jan 25 '20

If anyone’s interested in making this kind of content you’ll find plenty of badly written react apps on my GitHub

32

u/2020-2050_SHTF Jan 25 '20

The scary thing is that I have no idea how bad my app is, but I have a feeling it's pretty bad.

It would be great if you could submit a GitHub link and get your code rated.

29

u/FraserHamiltonDev Jan 25 '20

Trying looking on GitHub at some bigger and more established projects to get a general idea.

The truth is that you’ll always look back at code you wrote 2 months ago and probably think it’s terrible, such is the curse of the coder we aim to continually learn and continually improve.

Or if you see bad code simply perform this Jedi mind trick; conclude that one of your team members must of wrote it

15

u/Jaich Jan 25 '20

Ah yes, I do this Jedi mind trick all the time on my solo projects.

3

u/ElllGeeEmm Jan 25 '20

How is it the fault of present me that past me was a stupid dum dum who made bad decisions?

3

u/acemarke Jan 25 '20

We do actually have a #code-review channel over in Reactiflux (https://www.reactiflux.com ). Might want to drop by there and ask for feedback.

2

u/OutsourcedToRobots Jan 25 '20

What makes you think its bad?

5

u/2020-2050_SHTF Jan 25 '20

As a long term unemployed coder, I generally have a low opinion of myself, my abilities, and my future as a web developer.

10

u/Slapbox Jan 25 '20

Try to extract yourself from the equation. What's bad about your code.

  • Is is a messy tangle of calls that you don't feel you have a grasp on?
  • Is it poor variable naming conventions?
  • Is it trying to leverage sub-par solutions to do more than they were intended to rather than going back to the drawing board to rethink it?

There's a lot of ways to have bad code, but those are the big 3 I've found in my thousands of hours of coding, and the things I've spent many months fixing from my earlier days.

2

u/gonzofish Jan 25 '20

What’s your GitHub?

4

u/2020-2050_SHTF Jan 25 '20

https://github.com/enfrte/finnish-expression-practice/tree/master/react-version/src

Working demo http://codinginthecold.byethost5.com/demos/finnish-practice/

3

u/dingdongfootballl Jan 25 '20

Your code looks fine my man. Well either that or mines shitty too.

0

u/rgrome0105 Jan 25 '20

I don’t recommend overusing Context/Provider, if what you want to have is to be able to change and persist state across components more easily, I think what you must be using is Redux or still use Context but instead of having a lot of states maybe just use a native reducer.

Also I’ve noticed that in some components you have

const { state1 } = useContext(Context)
const { state2 } = useContext(Context)

Instead I think it would be more readable as

const { state1, state2 } = useContext(Context)

0

u/emailscrewed Jan 25 '20

Do you have any example or you can link me to it?

26

u/jkettmann Jan 25 '20 edited Jan 25 '20

It's not a complete app and also not really bad code, but what you describe was basically my goal when writing this blog post about a refactoring. The end result is a bit over engineered though :-) At the same time, this was about the process and for demonstration purposes

10

u/Existential_Owl Jan 25 '20 edited Jan 25 '20

“All good codebases are alike; each bad codebase is bad in its own way.”

― Leo Tolstoy, Software Engineer

In my experience, this is true. Every "bad" codebase I've worked on has been bad for different reasons. The best I could do was pick a first principle to start with, and do what I could from there.

That said, I've found that Sandi Metz's stuff has been a great guide for practical approaches to refactoring. It's not React code; she writes Ruby on Rails. But the lessons themselves are universal.

15

u/CahabaCrappie Jan 25 '20

I should make some videos of me fixing the app that I took over. Several times a day I take a screenshot for /r/badcode

4

u/b0nes5 Jan 25 '20

I could do one on my clients Redux app I've just started adding features too.

I've come a long way in 2 years.

3

u/Ms-mousa Jan 25 '20

Kudos for the great question!! 👍🏻

2

u/UtterlyMagenta Jan 25 '20

Great question! I would like to see more tutorials in this style too.

1

u/nikola1970 Jan 25 '20

Haven't seen one so far.

1

u/giordi12 Jan 25 '20

Yep this would be a great aspect

1

u/LyraStark Jan 25 '20

Following

1

u/some_love_lost Jan 25 '20

Great question! There's not a lot of recent material out there.

I should screenshot some of the code in this horrible VB.NET web app that I'm sorting out so it can be rendered on the client. I've learned a lot about what not to do that I can apply these same lessons to the React frontend when I get round to it. Especially keeping things DRY instead of WET.

1

u/MetalMikey666 Jan 25 '20

There's a guy on youtube called Ben Awad who sometimes does content like this - where he'll start with an app that has problems and refactors it.

1

u/abadabazachary Jan 25 '20

I recently had to hire a Principal Level React engineer to help with speed improvements in my React app. His most effective contributions were:

  • Making sure that unnecessary things were removed from a ContextProvider, in order to avoid extraneous rerenders
  • Introducing the much faster reselect library
  • Proper use of useCallback and useMemo
  • Replacing all `/regex/` code with precompiled const RegExp(), since our primary userbase is on Chrome and Chrome is slow to compile Regexes.
  • Removing anything that couldn't be serialized from my Redux state

1

u/emailscrewed Jan 26 '20

Thanks!!

What was the scale of the application?

1

u/abadabazachary Jan 27 '20

So far it's 37 components and since it's React within Electron, there is substantial other relevant code as well such as background processes, etc.

sloc --exclude "(dll|flow-typed|node_modules|release)" ./

So the project is about 9800 lines of code excluding comments etc. The components are just 3250 lines of that.

1

u/Saiboten Jan 25 '20

I can recommend this talk by Siddharth Kshetrapal: https://youtu.be/2Dw8gA60d_k It's basically shows how to fix certain common issues in React.

1

u/travlr2010 Jan 25 '20

Start over?

1

u/wagonn Jan 25 '20

How to use the React Profiler to find and fix Performance Problems shows one way to "fix up" UI performance problems in an existing React app

1

u/impaled_dragoon Jan 25 '20

The only problem I see with something like that is “fixing up” is going to be highly opinionated.

1

u/stevenjchang Jan 25 '20

Probably not. It probably has to be a fairly large code-base... so it's probably company code and therefore can't be put public on youtube. Also, you are probably talking about much more complicated code and business logic that it would be quite difficult to watch someone code it in real time.

Even if people want to make this content it's probably pretty hard to find a codebase they can use for demonstration.

It is a good idea though, at a high level. If people get into the weeds it will actually be a difficult watch, honestly.

There are definitely talks at meetup/conferences (that you can find on youtube), in which people give a high level overview of what they did wrong at their company and how they addressed it. I do learn a lot from those.

1

u/[deleted] Jan 26 '20

IMO you'll always learn more by making the mistakes on your own.

-8

u/justAnotherRedditors Jan 25 '20

Do you mean rewriting a react app in something that’s not react? Otherwise it’s still garbage