The virtual DOM<\/strong> is an object<\/strong> that represents the real DOM<\/strong> in the memory. Since DOM<\/strong> updates are an integral part of any web app but are the costliest operation<\/strong> in the world of frontend<\/strong>, the virtual DOM<\/strong> is utilized to check for parts of the app that need to be updated & update only those parts, thus significantly boosting performance<\/strong>.<\/p>\n\n\n\n React<\/strong> code is written in JSX<\/strong>, but no browser can execute JSX<\/strong> directly as they are built to read-only regular JavaScript<\/strong>.<\/p>\n\n\n\n Thus we require to use tools like Babel<\/strong> to transpile JSX<\/strong> to JavaScript<\/strong> so that the browser can execute it.<\/p>\n\n\n\n For example:<\/p>\n\n\n\n This would cause new DOM Elements<\/strong> to be created everytime React<\/strong> allows class names to be specified for a component like class names are set for a DOM<\/strong> element in HTML<\/strong>.<\/p>\n\n\n\n When developers first start using React<\/strong> after developing traditional web applications, they often opt for CSS classes<\/strong> as they are already familiar with the approach.<\/p>\n\n\n\n Styling React<\/strong> elements using inline CSS<\/strong> allows styles to be completely scoped to an element. However, certain styling features are not available with inline styles<\/strong>. For example, the styling of pseudo-classes<\/strong> like Pre-processors<\/strong> are often used on React<\/strong> projects. This is because, like CSS<\/strong>, they are well understood by developers and are often already in use if React<\/strong> is being integrated into a legacy application.<\/p>\n\n\n\n CSS-in-JS modules<\/strong> are a popular option for styling React<\/strong> applications because they integrate closely with React<\/strong> components. For example, they allow styles to change based on React<\/strong> props at runtime. Also, by default, most of these systems scope all styles to the respective component being styled<\/strong>.<\/p>\n\n\n\n Lazy loading<\/strong> is a technique used to reduce the load time of a React app<\/strong>. It helps reduce the risk of web app performances to a minimum, by loading up the components as the user navigates through the app<\/strong>.<\/p>\n\n\n\n Sometimes while developing React<\/strong> applications, there is a need to pass data from a component that is higher in the hierarchy<\/strong> to a component that is deeply nested<\/strong>. To pass data between such components, we pass props from a source component and keep passing the prop<\/strong> to the next component in the hierarchy till we reach the deeply nested component<\/strong>.<\/p>\n\n\n\n The disadvantage of using Developers use The conventional way to update Portal<\/strong> is a recommended way to render children into a DOM<\/strong> node that exists outside the DOM hierarchy<\/strong> of the parent component.<\/p>\n\n\n\n Research says, writing down your goals on pen & paper<\/strong> makes you 21%<\/strong> to 39%<\/strong> more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier<\/strong>: https:\/\/www.amazon.com\/Tapajyoti-Bose\/e\/B09VGDDHRR<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" 1. What is the React Virtual DOM? Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the actual DOM by a library such as ReactDOM.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2393"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2393"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2393\/revisions"}],"predecessor-version":[{"id":2394,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2393\/revisions\/2394"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. Why do we need to
transpile<\/code> React code?<\/h1>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/1400\/0*dSaZZDejKKRE_X9h.gif\")
<\/figure>\n\n\n\n3. What is the significance of
keys<\/code> in React?<\/h1>\n\n\n\nKeys<\/code> in React<\/strong> is used to identify unique VDOM<\/strong> Elements with their corresponding data driving the UI<\/strong>; having them helps React<\/strong> optimize rendering by recycling existing DOM<\/strong> elements.<\/p>\n\n\n\nKey<\/code> helps React<\/strong> identify which items have changed<\/strong>, are added<\/strong>, or are removed<\/strong>, enabling it to reuse already existing DOM<\/strong> elements, thus providing a performance boost<\/strong>.<\/p>\n\n\n\nconst Todos = ({ todos }) => {
return (
<div>
{todos.map((todo) => (
<li>{todo.text}<\/li>
))}
<\/div>
);
};<\/pre>\n\n\n\ntodos<\/code> change, but adding the key<\/code> prop (<li key={todo.id}>{todo.text}<\/li><\/code>) would result in “dragging” around the DOM Elements<\/strong> inside the ul<\/code> tag & updating only the necessary li<\/code>s.<\/p>\n\n\n\n4. What is the significance of
refs<\/code> in React?<\/h1>\n\n\n\nRefs<\/code> are variables that allow you to persist data between renders<\/strong>, just like state<\/code> variables, but unlike state<\/code> variables, updating refs<\/code> does NOT cause the component to re-render<\/strong>.<\/p>\n\n\n\nRefs<\/code> are usually used to, but not restricted to, store reference to DOM elements<\/strong>.<\/p>\n\n\n\n5. What are the most common approaches for styling a React application?<\/h1>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/440\/0*fPCATdXn2MyRFfuC.gif\")
<\/figure>\n\n\n\nCSS Classes<\/strong><\/h2>\n\n\n\n
Inline CSS<\/strong><\/h2>\n\n\n\n
:hover<\/code>.<\/p>\n\n\n\nPre-processors (Sass, Stylus, and Less)<\/strong><\/h2>\n\n\n\n
CSS-in-JS Modules (Styled Components, Emotion, and Styled-jsx)<\/strong><\/h2>\n\n\n\n
6. What are some of the performance optimization strategies for React?<\/h1>\n\n\n\n
Using useMemo<\/strong><\/h2>\n\n\n\n
useMemo<\/code> is a React hook that is used for caching CPU-Expensive functions<\/strong>. A CPU-Expensive function<\/strong> called repeatedly due to re-renders of a component<\/strong>, can lead to slow rendering<\/strong>.<\/p>\n\n\n\nuseMemo<\/code> hook can be used to cache<\/strong> such functions. By using useMemo<\/code>, the CPU-Expensive function<\/strong> gets called only when it is needed.<\/p>\n\n\n\nuseCallback<\/code> can be used to obtain a similar result.<\/p>\n\n\n\nLazy Loading<\/strong><\/h2>\n\n\n\n
7. What is prop drilling and how to avoid it?<\/h1>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/994\/0*Ypxno_eiUm56gEys.gif\")
<\/figure>\n\n\n\nprop drilling<\/code> is that the components that should otherwise be not aware of the data have access to the data, moreover, the code becomes harder to maintain<\/strong>.<\/p>\n\n\n\nProp drilling<\/code> can be avoided using the Context API<\/strong> or some form of State Management<\/strong> library.<\/p>\n\n\n\n8. What is the
StrictMode<\/code> component and why would you use it?<\/h1>\n\n\n\n<StrictMode \/><\/code> is a component included with React<\/strong> to provide additional visibility of potential issues<\/strong> in components. Suppose the application is running in development mode<\/strong>. In that case, any issues are logged to the development console<\/strong>, but these warnings are not shown if the application is running in production mode<\/strong>.<\/p>\n\n\n\n<StrictMode \/><\/code> to find problems such as deprecated lifecycle methods<\/strong> and legacy patterns<\/strong>, to ensure that all React<\/strong> components follow current best practices.<\/p>\n\n\n\n<StrictMode \/><\/code> can be applied at any level of an application component hierarchy<\/strong>, which allows it to be adopted incrementally within a codebase.<\/p>\n\n\n\n9. What are
synthetic events<\/code> in React?<\/h1>\n\n\n\nSynthetic events<\/code> combine the response of different browser’s native events into one API<\/strong>, ensuring that the events are consistent across different browsers<\/strong>. The application is consistent regardless of the browser it is running in.<\/p>\n\n\n\nconst Component = () => {
const handleClick = (e) => {
e.preventDefault(); \/\/ synthetic event
console.log(\"link clicked\");
}; return <a onClick={(e) => handleClick}>Click me<\/a>;
};<\/pre>\n\n\n\n10. Why is it not advisable to update
state<\/code> directly, but use the setState<\/code> call?<\/h1>\n\n\n\nstate<\/code> is to use the setState<\/code> call. Without using it, the user would still be able to modify the state, but it would not update the DOM<\/strong> to reflect the new state.<\/p>\n\n\n\nconst Component = () => {
const [count, setCount] = useState(0);
\/\/ let [count, setCount] = React.useState(0); const handleClickUpdate = () => {
setCount((c) => c + 1);
\/\/ count = count + 1; \/\/ will not update the DOM
}; return (
<>
{count}
<button onClick={handleClickUpdate}>Click me<\/button>
<\/>
);
};<\/pre>\n\n\n\n11. What are
portals<\/code> in React?<\/h1>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/1400\/0*Wlj0qnz_R-OFStz6.gif\")
<\/figure>\n\n\n\nconst Portal = ({ children }) => {
\/\/ NOTE: it is advisable to create a new DOM node for the portal
const portalRoot = document.getElementById(\"portal-root\"); return ReactDOM.createPortal(children, portalRoot);
};<\/pre>\n\n\n\n