Dette indhold er ikke tilgængeligt på dit sprog. Her er den engelsk version.

A senior React developer shares 12 small but helpful tips on building large React apps

May 20, 2021 · 6 minutter læst

One day in your software development career you’ll run into a huge React app. And it's going to be a thing!

Most of the small to medium projects written in React are not that hard to handle. But large ones are a different story. Having ten developers working on a React app can feel an uphill battle. You should better know some rules and tricks to successfully cope with the complications that will face you.

In this article, you’ll find several tips that may be of great help. Follow them when working on a large-scale React app.

1 Follow coding standards

Any large company has its guidelines. And those are essential. Before that, there are a few community rules called best practices. The best code is the one written by the most hardworking developers for the laziest ones. So make sure you are aware of the ideas shared by Ryan McDermott in Clean JavaScript, folks from Airbnb in their JavaScript Style Guide, W3 JavaScript Best Practices, or similar resources.

2 Use Typescript

Strict typing helps your team read the code and prevents potential runtime errors. The compiler nature of Typescript may confuse some developers, but it has an extreme predictive accuracy. Moreover, you get a helping hand from IDEs like VSCode on code completion.

3 Decouple logic from UI

There are two hardest points in programming: decoupling business logic from UI and naming variables. Despite their complicated nature, using them boosts readability. Decoupling can be file or page scope. Let’s compare two code snippets to illustrate the benefits you’ll get.

// bad
<Button
onClick= {()=>{
dispatch(first)
dispatch(second)
dispatch(third)
}}
disabled={data.status === ‘loading’ && !inputState || otherCondition}
// good
<Button
onClick={handleClick}
disabled={!isReadyToSubmit}

4 Adhere SOLID principles

All OOP developers are familiar with five SOLID rules:

  • Single responsibility
  • Open-Close
  • Liskov substitution
  • Interface segregation
  • Dependency inversion principles

Keep in mind, that those rules are applicable to React though it is a mostly functional programming library. This statement has been proved by numerous practical examples.

5 Learn design patterns

There are practical solutions to common software problems. Reactpatterns.com is a useful website for prevalent React patterns. On the other hand, some of the OOP design patterns have been translated currently.

6 Obey naming conventions

Good naming is a stronghold of readability and summarization of the ongoing process. It can be a real complication most of the time. Developers frequently fall into the trap of incompleteness or exaggeration.

For example, they may use broad-meaning words such as ‘check’, ‘look’ instead of more accurate ‘is’, ‘exists’, ‘get’, ‘fetch’, ‘has’, or apply ‘handle’ in the meaning of ‘do something’, although it relates to event handling.

There are several conventions for naming React files, modules, and variables. You should follow the best practices followed by the JavaScript community and know the dos and don’ts of naming. can download or create ESLint rules according to your choice.

// bad
var visible = true;
// good
var isVisible = true;

7 Use Recoil and React-query, not Redux and Saga

This tip may help you decrease the coding speed up to 3 times. You’ll also lower the danger of memory leaks caused by the redux-saga storing all query data inside Redux. Better code readability would come as a bonus.

8 Create a fake (mock) data server

The main feature of React-like frameworks is separating backend code from the frontend. But at some point, you get dependent on the backend as if any service gets a 503 error or is not ready yet. Frontend developers shouldn’t wait for backend issues to be solved. In such cases, I recommend using connect-api-mocker library. MirageJS is a good choice too. FakerJS can help you create random real-like data.

9 Modularize the project

Grandparent (global) -> parent -> children (local) like tree configuration is the best option for folder and code structure. Let’s assume you have a Component1 and a Component2, and they have styles outside of their folders. It’s a bad practice to follow. The dependent structure shouldn’t be allowed over full modularization, as good code pursues the rule of maintainability and readability.

10 Create a strict page folder structure

Occasionally one developer might make the UI part of a page and others carry on the further development of connecting it to the API. How do you form a readable component structure?

A couple of weeks ago I created a component and folder structure to be the first one ever specifically for pages. It’s called the Trenary folder structure and departs components into partials, blocks, and components. You can easily continue any uncompleted work and obey the SOLID principles.

11 Master version control

This is especially important for team leads. Developers will depend on Git for not losing the process. There will be so many versioning-related issues like:

  • Losing a code block.
  • Rolling back to some specific date.
  • Editing released versions without changing the ongoing development.
  • Creating, tracking, and logging changes.

Those are all complex duties that require following strict rules.

12 Care about form handling

You should plan your forms accurately. Some of those libraries may be of help:

  • react-hooks-form is a great form handler with isolated and reduced re-render technology and less complicated code.
  • yup will create a client-side validation before asking the server and is easy to use with form libraries.

By and large

React makes developers’ life easier. Yet there are some more pains to heal. I shared several tips that may help you deal with large projects. Use them and keep looking for new ways to improve your work.

Indhold

Stressfrit ansættelsesforløb af teknisk ekspertise starter her

Kodning er et universelt sprog. Derfor søger Proxify vidt og bredt efter de bedste globale talenter inden for teknologi. Vi gør det sikkert, trygt og nemt at ansætte udviklere og designere. Og til en god pris, selvfølgelig.

I et kort opkald på 15 minutter vil vi gerne:

  • Forstå den type talent, din virksomhed har brug for
  • Drøft den engagementsplan, der er bedst egnet for dig
  • Forklarer nøjagtigt, hvordan Proxify fungerer

Planlæg et møde