12 helpful tips on building large apps from a senior React dev

Photo by Lautaro Andreani on Unsplash

One day in your 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 10 developers working on a React app can feel like an uphill battle. You should 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 React 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 to 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 from the JavaScript developer community and uncerstand the dos and don'ts of naming – 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 three 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 Component1 and 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 a React 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?

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. React 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.

• You might need to learn git commit, stash, cherry-pick, rebase, merge, fsck commands to the depths: try a cool game for fun learning.
• Remember that Gitflow is the most successful branching strategy
• Use semantic versioning.
• Use a proper software release life cycle for naming development stages.
• Use conventional commits to name your commits and track tasks in Jira (or whatever software you use). This will help you trigger automatic releases, generate changelog, and determine semantic versions.

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.

Final comments

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