{"componentChunkName":"component---src-templates-blog-post-js","path":"/react/react-architecture/","result":{"data":{"site":{"siteMetadata":{"title":"Recipes Collection","author":"Internet Community"}},"markdownRemark":{"id":"2c76098f-5f06-58d9-b2e2-675e1351a78f","html":"<ul>\n<li>\n<p><a href=\"#react-architecture\">React Architecture</a></p>\n<ul>\n<li><a href=\"#q---what-is-react\">Q - What is React?</a></li>\n<li><a href=\"#q---what-are-the-features-of-react\">Q - What are the features of React?</a></li>\n<li><a href=\"#q---what-are-the-advantages-of-using-react\">Q - What are the advantages of using React?</a></li>\n<li><a href=\"#q---what-are-the-limitations-of-react\">Q - What are the limitations of React?</a></li>\n<li><a href=\"#q---how-does-react-work\">Q - How does React work?</a></li>\n<li><a href=\"#q---what-do-you-understand-by-virtual-dom-explain-its-working\">Q - What do you understand by Virtual DOM? Explain its working.</a></li>\n<li><a href=\"#q---differentiate-between-real-dom-and-virtual-dom\">Q - Differentiate between Real DOM and Virtual DOM.</a></li>\n</ul>\n</li>\n</ul>\n<h2 id=\"react-architecture\"><a href=\"#react-architecture\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React Architecture</h2>\n<h4 id=\"q---what-is-react\"><a href=\"#q---what-is-react\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - What is React?</h4>\n<ul>\n<li>React is a front-end JavaScript library developed by Facebook in 2011.</li>\n<li>It follows the component based approach which helps in building reusable UI components.</li>\n<li>It is used for developing complex and interactive web and mobile UI.</li>\n<li>Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.</li>\n</ul>\n<h4 id=\"q---what-are-the-features-of-react\"><a href=\"#q---what-are-the-features-of-react\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - What are the features of React?</h4>\n<ul>\n<li>It uses the virtual DOM instead of the real DOM.</li>\n<li>It uses server-side rendering.</li>\n<li>It follows uni-directional data flow or data binding.</li>\n</ul>\n<h4 id=\"q---what-are-the-advantages-of-using-react\"><a href=\"#q---what-are-the-advantages-of-using-react\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - What are the advantages of using React?</h4>\n<ul>\n<li>It increases the application’s performance</li>\n<li>It can be conveniently used on the client as well as server side.  This enables improved SEO and performance.</li>\n<li>Because of JSX, code’s readability increases. It is also really easy to see the layout, or how components are plugged/combined with each other.</li>\n<li>React is easy to integrate with other frameworks like Meteor, Angular, etc as it is only a view layer.</li>\n<li>Using React, writing UI test cases become extremely easy</li>\n</ul>\n<h4 id=\"q---what-are-the-limitations-of-react\"><a href=\"#q---what-are-the-limitations-of-react\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - What are the limitations of React?</h4>\n<ul>\n<li>React is just a library, not a full-blown framework</li>\n<li>Its library is very large and takes time to understand</li>\n<li>Coding gets complex as it uses inline templating and JSX</li>\n</ul>\n<h4 id=\"q---how-does-react-work\"><a href=\"#q---how-does-react-work\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - How does React work?</h4>\n<p>React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.</p>\n<h4 id=\"q---what-do-you-understand-by-virtual-dom-explain-its-working\"><a href=\"#q---what-do-you-understand-by-virtual-dom-explain-its-working\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - What do you understand by Virtual DOM? Explain its working.</h4>\n<ul>\n<li>A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties.</li>\n<li>React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.</li>\n<li>\n<p>This Virtual DOM works in three simple steps.</p>\n<ol>\n<li>\n<p>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</p>\n<p><img src=\"https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2017/08/1dom-492x180.png\"></p>\n</li>\n<li>\n<p>Then it runs a “diffing” algorithm, which identifies the difference between the previous DOM representation and the new one.</p>\n<p><img src=\"https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2017/08/2dom-430x180.png\"></p>\n</li>\n<li>\n<p>Next step is reconciliation which is that the real DOM will be updated with only the things that have actually changed.</p>\n<p><img src=\"https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2017/08/3dom-209x180.png\"></p>\n</li>\n</ol>\n</li>\n</ul>\n<h4 id=\"q---differentiate-between-real-dom-and-virtual-dom\"><a href=\"#q---differentiate-between-real-dom-and-virtual-dom\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Q - Differentiate between Real DOM and Virtual DOM.</h4>\n<p>Real DOM</p>\n<ul>\n<li>It updates slow.</li>\n<li>Can directly update HTML.</li>\n<li>Creates a new DOM if element updates.</li>\n<li>DOM manipulation is very expensive.</li>\n<li>Too much of memory wastage.</li>\n</ul>\n<p>Virtual DOM</p>\n<ul>\n<li>It updates faster.</li>\n<li>Can’t directly update HTML.</li>\n<li>Updates the JSX if element updates.</li>\n<li>DOM manipulation is very easy.</li>\n<li>No memory wastage.</li>\n</ul>","timeToRead":3,"frontmatter":{"title":"React Architecuture","date":"April 24, 2022","spoiler":"Following are some notes collected through internet"},"fields":{"slug":"/react/react-architecture/","langKey":"en"}}},"pageContext":{"slug":"/react/react-architecture/","previous":{"fields":{"slug":"/react/hooks/","langKey":"en","directoryName":"hooks","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Hooks"}},"next":{"fields":{"slug":"/react/practical-interview-questions/","langKey":"en","directoryName":"practical-interview-questions","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Pracical Interview Questions"}},"translations":[],"translatedLinks":[]}}}