The DOM is a structured representation of a webpage that browsers use to render the elements and handle interactions. Directly manipulating the DOM can be slow, especially when making frequent changes like updating content, styling, or adding elements
React DOM is a library in the React ecosystem that provides the functionality necessary to render React components into the Document Object Model (DOM), which is the structured representation of the HTML elements of a web page.
The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM (Document Object Model) used in web browsers. It allows React to efficiently update the user interface by minimizing direct interactions with the actual DOM, which is slow and performance-intensive. Every time the state or props of a component change, React updates the virtual DOM first.
When a component’s data changes, React creates a new virtual DOM that reflects those changes. React compares the new virtual DOM with the previous version using a process called diffing to figure out exactly what parts have changed. React then updates only the specific parts of the real DOM that were altered, making the process faster and more efficient.
React reconciliation is the process React uses to efficiently update the real DOM. When a component’s state or props change, React creates a new version of the virtual DOM, which is an in-memory representation of the actual DOM. React then compares the new virtual DOM to the previous version, finds the differences (a process called "diffing"), and updates only the parts of the real DOM that have changed, rather than re-rendering the entire UI. This approach improves performance by reducing the number of direct manipulations to the DOM, which can be slow. Instead, React makes minimal updates based on the changes detected during the reconciliation process.
React Fiber is a new reconciliation algorithm that allows React to break up rendering work into smaller, manageable units (called fibers) and pause and resume work as necessary. This makes React capable of handling long-running tasks (like heavy UI updates or animations) without blocking the main thread, ensuring the user interface stays responsive.
React Router helps you handle navigation in your React app, allowing users to move between different pages or views without refreshing the entire page
It lets you define different paths in your app and specify which components should be shown for each path.
Components for Routes:
: This sets up the router to work with HTML5 history (like normal web pages). : This is where you define all your different paths (routes). : This tells React Router what component to show for a specific path.
Key Features:
Routing: Manages how different URLs map to different components. Dynamic Routing: Handles routes with dynamic segments (e.g., /user/:id). Nested Routes: Allows for nested views and layouts. Declarative: Routes are defined using React components, making them easy to manage and update.
React Router is a library used for managing navigation and routing in your React applications. React Fiber is an internal technology that improves how React performs rendering and updates.
- client side routing
- server side routing