BLOGS

React is a JavaScript library for creating user interfaces that is declarative, fast, and customizable. In MVC, the 'V' represents the view. ReactJS is an open-source, component-based front end library that is exclusively responsible for the application's display layer.
How Does it Work: While developing client-side apps, a team of Facebook engineers discovered that the DOM (The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It outlines the logical structure of documents as well as how they are accessed and altered.) To make things quicker, React provides a virtual DOM, which is essentially a DOM tree representation in JavaScript. When it wants to read or write to the DOM, it will utilize the virtual version of it. The virtual DOM will then try to determine the most effective way to update the browser's DOM. React elements, unlike browser DOM elements, are simple objects that are inexpensive to construct. The DOM is updated to match the React elements using React DOM. This is because JavaScript is extremely fast, and it is worthwhile to have a DOM tree in it to speed up its operation.

Props are known as properties it can be used to pass data from one component to another. Props cannot be modified, read-only, and Immutable.

1. The Data is passed from one component to another.
2. It is Immutable (cannot be modified).
3. Props can be used with state and functional components.
4. Props are read-only.

The state represents parts of an Application that can change. Each component can have its State. The state is Mutable and It is local to the component only.

• The Data is passed within the component only.
• The Data is passed within the component only.
• State can be used only with the state components/class component (Before 16.0).
• State is both read and write.

useEffect(callback, dependencies) is the hook that manages the side-effects in functional components.callback argument is a function to put the side-effect logic.dependencies is a list of dependencies of your side-effect: being props or state values. The purpose of the useEffect Hook is to eliminate the side effects of employing class-based components. For example, operations like as changing the DOM, retrieving data from API endpoints, configuring subscriptions or timers, and so on might have unintended consequences.

useEffect's some other use cases:
1. Running once on mount: fetch API data.
2. Running on state change: validating input field.
3. Running on state change: live filtering.
4. Running on state change: trigger animation on new array value.
5. Running on props change: update paragraph list on fetched API data update.