State is an object which shows the current condition of an application. React is a component-based UI library that uses state to track down the moving parts of a user interface. Hence understanding state management is important. State management makes it easy to make a decision and create an end product that is more efficient. Keeping this in mind, let’s dive into some of the dos and don’ts of state management in a React Application

  • State Management over Prop Drilling: Let’s say your theme has a dark mode and all the rendered components have to know which theme is on so that the components can reflect the right colour. In this case, Prop Drilling is not your solution here. As the application grows in size, it becomes impartial. Instead, you can use State Management and store your theme in a Redux or MobX store or maybe even in a plain Javascript object.
  • Updating a page without a refresh : Let’s say you are creating a to-do app and want to update the todo list component after a user makes a change. But you don’t want to refresh the page. How can you do this? The solution is really simple. All you have to do is to store the to-do items in a global store along with a way of re-fetching the list of to-do items from the server.
  • Storing in the right places : Any application has different kinds of states. Data + loading state, Global UI state, Local UI state, Form state, URL state, and Page state. Carefully choose where your application state will be store in.
  • Learning other state management libraries: It’s always better to be aware of other state management libraries in addition to Redux. Now MobX is also emerging as a state management library, which supports observability and each piece of state is just a class variable. It’s always better to keep learning new libraries until you find the right one for your application.
  • State and View layer: React has 2 layers – State “UI is a function of state” and View “React is just a view layer”. By following this paradigm, developers can easily write functional code separate from your UI, for managing State.

For best practices on State Management in a React Application

React Blogs

Translate »