Each “smart component” has their own state, which is data that is highly manipulative. If that data becomes manipulated in any way, the UI is reactive in which it will efficiently render the right components (and only those components) and not have to reload the whole page with every update.
There are two main types of components in React, “smart components” and “dumb components”. Smart components are “stateful” in which that it stores information in memory and has the ability to modify or change it. Dumb components are “stateless” in which it doesn’t really store data or modifies it. Components can pass down this data to other smart components or dumb components as “props”.
There are methods called “lifecycle hooks” which can happen before AND after the render of the HTML happens. The first one is called componentWillMount() which is a method that runs before the render happens and componentDidMount() which oppositely, happens after the render.
React.js is perfect for building SPAs (single page applications) because generally, manipulating the DOM (document object model) is slow. It’s usually slow if there is frequent changes to the data model and things have to re-render frequently. React maintains a “virtual DOM” which it modifies and tracks changes there. Once changes have been made, React uses optimizations to render these changes as efficiently as possible.