5 tips to write scalable react code:

5 tips to write scalable react code:

Table of contents

No heading

No headings in the article.

1) Organize local and global state:

  • React is a library that manages the UI based on its current state. we can manage the state locally or globally (using context API, redux etc)

  • Rather than using Redux/Context-API to keep track of every single state inside your application, it’s better to keep some state local to avoid over-engineering your application.

2) Use Typescript:

  • Typescript uses strict typing and it will help you and your team understand the code properly and prevents potential runtime errors.

  • TypeScript simplifies JavaScript code, making it easier to read and debug.

3) Decouple your logic from your component:

  • As your project grows, some of your component’s logic seems to get used over and over again. put the component’s logic in a separate file/library or write a custom hook to separate logic from a single component.

4) Testing:

  • When starting out a project, it’s very easy to justify skipping writing test code because your codebase is relatively small.

  • As the size of the codebase increases, it’s impossible to test your React project manually without spending a major amount of time and resources.

  • testing will help you grow your project when manual testing can no longer verify the code is working as expected.

5) Modularize the project:

  • Structure your codebase around the concept of modules, each module will have its own responsibility i.e breaking down your application into smaller, single-purpose function.

  • Modularization helps a developer, spend time writing code than figuring out what the code does