When starting a new React project, it’s always a good idea to put together some guidelines that you and your team will follow to make the code scalable.

In this post, I will share with you a handful of insights from my years of using React that will help you to determine your own project guideline.

1. Learn how to organize state between local and global state

React is a library that manages the UI based on its current state. As a developer, it’s your job to organize where to keep the state that makes up your application. Some developers prefer to keep every single piece of data inside the redux store to keep track of all available states.

But do you really need to dispatch an action to your state manager just to open or close a simple dropdown menu? And do other parts of your application need to know about the value of that contact form? Form values tend to be short-lived and only used by the component that renders the form.

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

As a rule of thumb, you can ask these questions:

• Do other parts of the application care about this data?
• Do you need to be able to create further derived data based on this original data?
• Is the same data being used to drive multiple components?
• Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
• Do you want to cache the data (ie, use what’s in state if it’s already there instead of re-requesting it)?
• Do you want to keep this data consistent while hot-reloading UI components (which may lose their internal state when swapped)?

Components using local states are more independent and predictable.

#react #javascript #frontend #react native