React: Don’t Let Your Code Become a Monster — Essential Hygiene Practices in 2024

It has been a long time since I first tried React. With my background in jQuery, Knockout, and Angular, I quickly realized that this library was revolutionary.

Now, after completing over 20 medium and large projects, I want to share my thoughts on the ideal suite of tools and practices for a new project starting in June 2024.

[Note 1]
For this stack, I assume you prefer not to use a full framework like Next.js.

Let’s dive in.

Starting Point

• Vite: incredibly fast HMR and highly optimized production bundle. It has a great bootstrap utility where you can select React and TypeScript template and everything will be working out of the box.
• TypeScript: I hope everyone in 2024 is using TypeScript. In this study, Microsoft reveals that static type systems could have prevented 15% of public bugs on mature real-world code bases. Also, at this conference, Airbnb engineer said that 38% of their bugs could have been prevented by TypeScript (according to postmortem analysis).

Making Things Look Beautiful

Here you have lots of alternatives. I prefer creating my own UI components using Tailwind. I take some help from some libraries for specific components. I found this way to result in a much smaller bundle size than, for example, using Material-UI. Also, you can have control over the details. The downside is that it may take more time to test your UI components, but you avoid the need to learn another large library.

• Tailwind CSS: atomic CSS classes with one of the greatest, cleanest, simplest documentation I’ve ever seen.
• HeadlessUI: When it comes to more complex UI, I prefer to use some unstyled components to make the job easier. It’s a beautiful, very well tested library by Tailwind creators. Some very cool components I’ve used are: Modals (Dialogs), Transitions, Combobox and Dropdown Menu.
• Optional: Classnames: a tiny library to join css classes conditionally.
• Optional: Storybook: for isolating UI components and testing.

Libraries for Behaviour

Choosing is difficult, but I’ll go for libraries that are accepted for great part of the community and have been around for a while.

• Forms: react-hook-form is the indisputable leader here. I really like FormContext feature to track inputs in nested components and avoid prop drilling.
• Routing: react-router (probably you only need to install react-router-dom). It needs no comments.
• API Queries: react-query has a lot of very cool features, like retries, cache and conditional queries (with “enabled” param). If it’s well used, you probably required no useFetch hook (discouraged by React docs) to handle responses. Special mention here to TKDodo’s blog that explains practical common cases (now he’s a maintainer).
• State management: Zustand let them explain why it over Redux:

- Simple and un-opinionated
- Makes hooks the primary means of consuming state
- Doesn’t wrap your app in context providers
- Can inform components transiently (without causing render)

It’s enough for me. Redux was OK for a long time, I mean, without Redux these new tools wouldn’t exist. But now we have the same possibilities with tools that provide a much better Developer Experience.

Testing

“If we want to be serious about quality, it is time to get tired of finding bugs and start preventing their happening in the first place.” — Alan Page

• Unit tests: react-testing-library, created by the great Kent Dodds, allows you to render and test components the same way users interact with them.
• Test Runner: Vitest is fully compatible with Jest, but much faster. Works great with Vite projects.
• E2E tests: Playwright is faster than Cypress. They created their own Chromium version to make browser testing ultra-optimized. I can’t decide if they have better UI or docs. I found these e2e tests to be very stable. Playwright also provides a mocking strategy for API requests.

Code Quality Tools

• ESLint/Prettier: I found these tools to be incredibly useful. I miss them when I change to a language that doesn’t have good and clear linting tools. Beyond making the code look more beautiful, they will prevent tons of errors. For me, it’s a must.
• Optional: Husky: It’s cool to run some linting with every commit
• Optional: Commitlint: For messages convention

Code Quality Practices

• Be aware and quickly fix React errors & warnings: Ignoring them will cause your app to crash sooner or later. It’s better to quickly fix them, so be aware of what’s happening in your console. Also, use the opportunity to learn, don’t limit yourself to Google the solution.
• Keep your components small: React is a framework that lets you componentize your code. Take advantage of it! In my experience, an ideal component size has less than 200 lines. 300-line components are only acceptable in special cases. Anything more than that is considered a large component.
  A large component is difficult to read, refactor, and test. If your component exceeds that size, you should refactor it into two or more components and use custom hooks.
• Set up continuous integration (CI) to run your tests on every push
• Implement Trunk Base Development and avoid branch-hell

Developer Experience

• Absolute imports: Because let’s accept that, it’s better to write “@utils” than “../../../utils”
• kebab-case file names: because if you or some people in your team work in different OS, things can crash. Mac ignores case, but Windows and Linux don’t.

• About npm, pnpm, bun and yarn: Each of these could be a good alternative. However, I found that pnpm and bun can have some compatibility issues, while yarn is often faster than npm. That’s why I’ll go for yarn.
• VS Code & Snippets: I’ve used a lot of Code Editors, but I think the indisputable winner is VS Code. Super compatible with every OS, very very fast. Great UI. Great customizing capabilities. It’s awesome to configure what actions it will perform on autosave. I go for linting and import organizing. About snippets, I have a custom one to create a TypeScript React component and another one for Custom Hooks.
  Some of my favorite extensions are: ESLint, Prettier, Tailwind CSS, GitLens, Vitest, React Refactor, Error Lens
• Scrum: Probably, my next story will be about Scrum. I want to chat with you about some good and bad practices I’ve seen in my years of experience. But I’ll tell you some stuff that works in most projects:

- Teams of no more than 10 people (if you can’t feed them all with 2 pizzas, it’s time to reconsider)
- 4 ceremonies: planning (30/60 minutes), daily (10/15 minutes), review (15/40 minutes) and retrospective (60/90 minutes)
- Pre-planning meetings to refine backlog during sprint and to solve blocks (with other teams, do some minimal research, etc)
- PO being part of the team, participating as actively as any other member

Conclusion

This React stack is all about dev happiness, blazing-fast apps, and keeping things tidy. Vite gets you up and running fast, TypeScript keeps your code robust, Tailwind CSS lets you style with ease and Zustand provides a predictable way to manage application state. But the development practices you choose are what truly matter. These will make the difference between a successful project and a run-of-the-mill one.
And remember, these are just some suggestions! The best tools depend on what you’re building, so pick what makes you feel most awesome.

Are you using any other library or practice I should know about?

I read you.

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com