React is arguably one of the best UI libraries available, with its ability to build small, reusable pieces of User Interface(UI) that can be put together easily to produce a scalable web application. In building our modern UI pages we often want to animate our content or display pieces of information from an API which can lead to much work and load on our Browser DOM. REACT tends to solve this problem by reducing the load on the DOM, so our DOM gets to house only what we need and are using at a given period of time.
Before we continue, what is a DOM? DOM stands for Document Object Model; a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
React solves this by having a virtual DOM that interacts with our Browser DOM and part of how REACT listens for changes on the DOM is through the state.
React, in addition, creates a ‘virtual DOM’ that interacts with our Browser DOM by constantly listening for changes in what should be displayed and only updating the Browser DOM when absolutely necessary. Where exactly is it listening to changes? Let’s talk about state.
What is State? State is a JavaScript object that stores a component’s dynamic data and determines the component’s behavior. As the name implies, it is the storage of the application’s current state. Eg. The current list of restaurants in a given distance, whether a user is logged in, etc. Because the state is dynamic, it enables a component to keep track of changing information and React can decide if and when to re-render the DOM allowing for a fluid and interactive user experience.
React uses the state to display whatever data is needed to the user, if the state changes, perhaps due to user interaction, React can instantly re-render the DOM to show the new and up to date data without needing a full page refresh or any other extraneous effort on behalf of the browser.
Whilst an incredibly useful and efficient system, it also introduces us to the world of REACT lifecycle where we determine what, when and how these changes should be applied but in this article, we will not dive too deep into that but feel free to read up on it later. In short, these lifecycle methods explain the several stages REACT goes through both for mounting and un-mounting our component.
React State can be divided into two categories: Application State and Component State.
Application State: Application state, as the name suggests, are states we want to make available to all components because they contain data needed for the entire application. An example would be logged in user information; we would probably want to save that in the application state as many separate components will need to know if a user is logged in and therefore make a decision as to what will be displayed. To manage the Application state we can continue to use just React or introduce state management tools like Redux, Mobx, Context API. The debate on which to use and the pros and cons is a long discussion that I will explore in subsequent articles.
Component State: Component State as the name implies are states specific to a component. A good example would be handling your input forms; we don't need the current values of each input available to the whole application, so the state itself can be stored within the component.
Starting out with React part of what I struggled with was an understanding of state, thereby leading to poor decisions, numerous bug and general misuse of the benefits of React. Getting a firm understanding of the concept of state, why it is used and best practices are essential to becoming competent as a React developer.
Top comments (0)