Terminology
DOM stands for 'Document Object Model'. It is a structured representation of HTML in the webpage or application. It represents the entire UI(User Interface) of the web application as the tree data structure.
It is a structural representation of HTML elements of a web application in simple words.
What is Dom in React?
Whenever there is any change in the state of the application UI, DOM is updated and represents the change. The DOM is rendered and manipulated with every change for updating the application User Interface, which affects the performance and slows it down.
Therefore, with many UI components and the complex structure of DOM, It will update in more expensive as it needs to be re-rendered with each change.
The DOM is constituted as a tree data structure. It consists of the node for each UI element present in the web document.
#Modal A Modal or dialog box is a message box that allows further interactivity of the page without navigating away from the current content in the browser. A modal box is not locked to the screen (i.e., the client can navigate away from it without a required interaction), though it is typically the user’s focus (based on your styling of the box). In most instances, if a user wants to dismiss the modal, they can simply close the box with a provided button, or click outside of the modal. An example of a modal is when a user needs to complete a form or provide specific information for a search query, but you don’t want them to navigate to another page.
SoC is a fundamental principle in software engineering and design aimed at breaking down complex systems into smaller, more manageable parts. The goal is to organize a system's components in a way that each part addresses a single concern, or a cohesive aspect of functionality, rather than mixing multiple concerns together. This approach enhances modularity, maintainability, and scalability of software systems.
useEffect is a React Hook that allows you to perform side effects in function components. It will affect things outside the function.
Side effects include: Fetching data from an API. Subscribing to event listeners. Manually manipulating the DOM. Setting timers.
It is a piece of code that waits for a specific event to happen and then responds to it. Events can be triggered by user actions (like clicks, mouse movement, or key presses) or system-generated events (like network requests or errors).