{"componentChunkName":"component---src-templates-blog-post-js","path":"/Interview/react/","result":{"data":{"site":{"siteMetadata":{"title":"Nans' blogs"}},"markdownRemark":{"id":"f68ebc26-5f46-5d6b-a881-622b6c87bb21","excerpt":"⭐ What is the difference between state and props? How do you update a component’s state ? What is the lifecycle of a component ? ⭐⭐ What are React hooks ? How…","html":"<p>⭐</p>\n<ul>\n<li>What is the difference between state and props?</li>\n<li>How do you update a component’s state ?</li>\n<li>What is the lifecycle of a component ?</li>\n</ul>\n<p>⭐⭐</p>\n<ul>\n<li>What are React hooks ?</li>\n<li>\n<p>How would you refactor this code ?</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">Form</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>firstName<span class=\"token punctuation\">,</span> setFirstName<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Taylor'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>lastName<span class=\"token punctuation\">,</span> setLastName<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Swift'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>fullName<span class=\"token punctuation\">,</span> setFullName<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token string\">''</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n<span class=\"token function\">setFullName</span><span class=\"token punctuation\">(</span>firstName <span class=\"token operator\">+</span> <span class=\"token string\">' '</span> <span class=\"token operator\">+</span> lastName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>firstName<span class=\"token punctuation\">,</span> lastName<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n<li>\n<p>How do you handle a complex state ?</p>\n<p>Let’s say I have a <code class=\"language-text\">useState</code> which in a parent component. This state represents complex data, and multiple children components want to update that state. What to do ?</p>\n</li>\n<li>What is “Context” ? What do you use it for ?</li>\n<li>What is prop drilling ?</li>\n<li>How do you handle code duplication in a React codebase ?</li>\n</ul>\n<p>⭐⭐⭐</p>\n<ul>\n<li>What are sources of memory leaks in React ?</li>\n<li>\n<p>How would you refactor this code ?</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">ProductPage</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> product<span class=\"token punctuation\">,</span> addToCart <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>product<span class=\"token punctuation\">.</span>isInCart<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">showNotification</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">Added </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>product<span class=\"token punctuation\">.</span>name<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> to the shopping cart!</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>product<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">handleBuyClick</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token function\">addToCart</span><span class=\"token punctuation\">(</span>product<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">handleCheckoutClick</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token function\">addToCart</span><span class=\"token punctuation\">(</span>product<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">navigateTo</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/checkout'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>\n<p><a href=\"https://blog.scrimba.com/react-interview-questions/\">https://blog.scrimba.com/react-interview-questions/</a>\n<a href=\"https://beta.reactjs.org/learn/you-might-not-need-an-effect\">https://beta.reactjs.org/learn/you-might-not-need-an-effect</a></p>","frontmatter":{"title":"React Interview questions","date":"August 15, 2020","description":"Basic interview questions"}}},"pageContext":{"slug":"/Interview/react/","previous":{"fields":{"slug":"/An elegant solution for memory leaks in React/An elegant solution for memory leaks in React/"},"frontmatter":{"title":"An elegant solution for memory leaks in React","tags":["article","react"]}},"next":{"fields":{"slug":"/Interview/nodejs/"},"frontmatter":{"title":"Nodejs Backend Development questions","tags":["interview","backend"]}}}},"staticQueryHashes":["2841359383","3145232782"]}