{"id":1781,"date":"2021-05-24T11:34:04","date_gmt":"2021-05-24T11:34:04","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1781"},"modified":"2021-05-24T11:34:04","modified_gmt":"2021-05-24T11:34:04","slug":"15-react-interview-questions-with-solutions","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1781","title":{"rendered":"15 React Interview Questions with Solutions"},"content":{"rendered":"\n<p><strong>React\u2019s popularity shows no sign of waning, with the demand for developers still outstripping the supply in many cities around the world. For less-experienced developers (or those who\u2019ve been out of the job market for a while), demonstrating your knowledge at the interview stage can be daunting.<\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>In this article, we\u2019ll look at fifteen questions covering a range of knowledge that\u2019s central to understanding and working effectively with React. For each question, I\u2019ll summarize the answer and give links to additional resources where you can find out more.<\/p>\n\n\n\n<h2 id=\"1whatsthevirtualdom\">1. What\u2019s the virtual DOM?<\/h2>\n\n\n\n<h3 id=\"answer\">Answer<\/h3>\n\n\n\n<p>The virtual DOM is an in-memory representation of the actual HTML elements that make up your application\u2019s UI. When a component is re-rendered, the virtual DOM compares the changes to its model of the DOM in order to create a list of updates to be applied. The main advantage is that it\u2019s highly efficient, only making the minimum necessary changes to the actual DOM, rather than having to re-render large chunks.<\/p>\n\n\n\n<h3 id=\"furtherreading\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/bitsofco.de\/understanding-the-virtual-dom\/\">Understanding the Virtual DOM<\/a><\/li><li><a href=\"https:\/\/www.pluralsight.com\/guides\/virtual-dom-explained\">Virtual DOM Explained<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"2whatsjsx\">2. What\u2019s JSX?<\/h2>\n\n\n\n<h3 id=\"answer-1\">Answer<\/h3>\n\n\n\n<p>JSX is an extension to JavaScript syntax that allows for writing code that looks like HTML. It compiles down to regular JavaScript function calls, providing a nicer way to create the markup for your components.<\/p>\n\n\n\n<p>Take this JSX:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div className=\"sidebar\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p>It translates to the following JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.createElement(\n  'div',\n  {className: 'sidebar'}\n)\n<\/code><\/pre>\n\n\n\n<h3 id=\"furtherreading-1\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.sitepoint.com\/an-introduction-to-jsx\/\">An introduction to JSX<\/a><\/li><li><a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\">JSX in Depth<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"3whatsthedifferencebetweenaclasscomponentandafunctionalone\">3. What\u2019s the difference between a class component and a functional one?<\/h2>\n\n\n\n<h3 id=\"answer-2\">Answer<\/h3>\n\n\n\n<p>Prior to React 16.8 (the introduction of hooks), class-based components were used to create components that needed to maintain internal state, or utilize lifecycle methods (i.e.&nbsp;<code>componentDidMount<\/code>&nbsp;and&nbsp;<code>shouldComponentUpdate<\/code>). A class-based component is an ES6 class that extends React\u2019s&nbsp;<code>Component<\/code>&nbsp;class and, at minimum, implements a&nbsp;<code>render()<\/code>&nbsp;method.<\/p>\n\n\n\n<p><strong>Class component<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Welcome extends React.Component {\n  render() {\n    return &lt;h1&gt;Hello, {this.props.name}&lt;\/h1&gt;;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Functional components are stateless (again, &lt; React 16.8) and return the output to be rendered. They are preferred for rendering UI that only depends on props, as they\u2019re simpler and more performant than class-based components.<\/p>\n\n\n\n<p><strong>Functional component<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Welcome(props) {\n  return &lt;h1&gt;Hello, {props.name}&lt;\/h1&gt;;\n}\n<\/code><\/pre>\n\n\n\n<p><em>Note: the introduction of hooks in React 16.8 means that these distinctions no longer apply (see questions 14 and 15).<\/em><\/p>\n\n\n\n<h3 id=\"furtherreading-2\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.freecodecamp.org\/news\/functional-components-vs-class-components-in-react\/\">Functional Components vs Class Components in React<\/a><\/li><li><a href=\"https:\/\/medium.com\/@Zwenza\/functional-vs-class-components-in-react-231e3fbd7108\">Functional vs Class-Components in React<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"4whatarekeysusedfor\">4. What are keys used for?<\/h2>\n\n\n\n<h3 id=\"answer-3\">Answer<\/h3>\n\n\n\n<p>When rendering out collections in React, adding a key to each repeated element is important to help React track the association between elements and data. The key should be a unique ID, ideally a UUID or other unique string from the collection item:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;\n  {todos.map((todo) =&gt;\n    &lt;li key={todo.id}&gt;\n      {todo.text}\n    &lt;\/li&gt;\n  )};\n&lt;\/ul&gt;\n<\/code><\/pre>\n\n\n\n<p>Not using a key, or using an index as a key, can result in strange behavior when adding and removing items from the collection.<\/p>\n\n\n\n<h3 id=\"furtherreading-3\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html#keys\">Lists and Keys<\/a><\/li><li><a href=\"https:\/\/kentcdodds.com\/blog\/understanding-reacts-key-prop\">Understanding React\u2019s key prop<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"5whatsthedifferencebetweenstateandprops\">5. What\u2019s the difference between state and props?<\/h2>\n\n\n\n<h3 id=\"answer-4\">Answer<\/h3>\n\n\n\n<p>props are data that are passed into a component from its parent. They should not be mutated, but rather only displayed or used to calculate other values. State is a component\u2019s internal data that can be modified during the lifetime of the component, and is maintained between re-renders.<\/p>\n\n\n\n<h3 id=\"furtherreading-4\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/uberVU\/react-guide\/blob\/master\/props-vs-state.md\">props vs state<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"6whycallsetstateinsteadofdirectlymutatingstate\">6. Why call setState instead of directly mutating state?<\/h2>\n\n\n\n<h3 id=\"answer-5\">Answer<\/h3>\n\n\n\n<p>If you try to mutate a component\u2019s state directly, React has no way of knowing that it needs to re-render the component. By using the&nbsp;<code>setState()<\/code>&nbsp;method, React can update the component\u2019s UI.<\/p>\n\n\n\n<h3 id=\"bonus\">Bonus<\/h3>\n\n\n\n<p>As a bonus, you can also talk about how state updates are not guaranteed to be synchronous. If you need to update a component\u2019s state based on another piece of state (or props), pass a function to&nbsp;<code>setState()<\/code>&nbsp;that takes&nbsp;<code>state<\/code>&nbsp;and&nbsp;<code>props<\/code>&nbsp;as its two arguments:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.setState((state, props) =&gt; ({\n  counter: state.counter + props.increment\n}));\n<\/code><\/pre>\n\n\n\n<h3 id=\"furtherreading-5\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html#using-state-correctly\">Using State Correctly<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"7howdoyourestrictthetypeofvaluepassedasapropormakeitrequired\">7. How do you restrict the type of value passed as a prop, or make it required?<\/h2>\n\n\n\n<h3 id=\"answer-6\">Answer<\/h3>\n\n\n\n<p>In order to type-check a component\u2019s props, you can use the&nbsp;<code>prop-types<\/code>&nbsp;package (previously included as part of React, prior to 15.5) to declare the type of value that\u2019s expected and whether the prop is required or not:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PropTypes from 'prop-types';\n\nclass Greeting extends React.Component {\n  render() {\n    return (\n      &lt;h1&gt;Hello, {this.props.name}&lt;\/h1&gt;\n    );\n  }\n}\n\nGreeting.propTypes = {\n  name: PropTypes.string\n};\n<\/code><\/pre>\n\n\n\n<h3 id=\"furtherreading-6\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html\">Typechecking with proptypes<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"8whatspropdrillingandhowcanyouavoidit\">8. What\u2019s prop drilling, and how can you avoid it?<\/h2>\n\n\n\n<h3 id=\"answer-7\">Answer<\/h3>\n\n\n\n<p>Prop drilling is what happens when you need to pass data from a parent component down to a component lower in the hierarchy, \u201cdrilling\u201d through other components that have no need for the props themselves other than to pass them on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"20\" height=\"26\" src=\"https:\/\/lvboard.infostore.in.ua\/wp-content\/uploads\/2021\/05\/image.png\" alt=\"\" class=\"wp-image-1782\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.sanity.io\/images\/708bnrs8\/production\/ae4da31c7000675da4d2091a4d0a1a41a79a7e4d-1402x1843.png?w=165&amp;h=217&amp;fit=crop\" alt=\"\"\/><\/figure>\n\n\n\n<h3>Learn PHP for free!<\/h3>\n\n\n\n<p>Make the leap into server-side programming with a comprehensive cover of PHP &amp; MySQL.<br><br>Normally&nbsp;<s>RRP $39.99<\/s>&nbsp;<strong>Yours absolutely free<\/strong>Get the book free<\/p>\n\n\n\n<p>Sometimes prop drilling can be avoided by refactoring your components, avoiding prematurely breaking out components into smaller ones, and keeping common state in the closest common parent. Where you need to share state between components that are deep\/far apart in your component tree, you can use React\u2019s&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/context.html\">Context API<\/a>, or a dedicated state management library like&nbsp;<a href=\"https:\/\/redux.js.org\/\">Redux<\/a>.<\/p>\n\n\n\n<h3 id=\"furtherreading-7\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/kentcdodds.com\/blog\/prop-drilling\">Prop Drilling<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"9whatsreactcontext\">9. What\u2019s React context?<\/h2>\n\n\n\n<h3 id=\"answer-8\">Answer<\/h3>\n\n\n\n<p>The context API is provided by React to solve the issue of sharing state between multiple components within an app. Before context was introduced, the only option was to bring in a separate state management library, such as Redux. However, many developers feel that Redux introduces a lot of unnecessary complexity, especially for smaller applications.<\/p>\n\n\n\n<h3 id=\"furtherreading-8\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/reactjs.org\/docs\/context.html\">Context (React Docs)<\/a><\/li><li><a href=\"https:\/\/www.sitepoint.com\/replace-redux-react-hooks-context-api\/\">How to Replace Redux with React Hooks and the Context API<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"10whatsredux\">10. What\u2019s Redux?<\/h2>\n\n\n\n<h3 id=\"answer-9\">Answer<\/h3>\n\n\n\n<p>Redux is a third-party state management library for React, created before the context API existed. It\u2019s based around the concept of a state container, called the store, that components can receive data from as props. The only way to update the store is to dispatch an action to the store, which is passed into a reducer. The reducer receives the action and the current state, and returns a new state, triggering subscribed components to re-render.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2017\/09\/150602352001-redux-flow-chart.png\" alt=\"Redux conceptual diagram\"\/><\/figure>\n\n\n\n<h3 id=\"furtherreading-9\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.sitepoint.com\/getting-started-redux\/\">Getting Started with Redux<\/a><\/li><li><a href=\"https:\/\/www.sitepoint.com\/redux-deep-dive\/\">A Deep Dive into Redux<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"11whatarethemostcommonapproachesforstylingareactapplication\">11. What are the most common approaches for styling a React application?<\/h2>\n\n\n\n<h3 id=\"answer-10\">Answer<\/h3>\n\n\n\n<p>There are various approaches to styling React components, each with pros and cons. The main ones to mention are:<\/p>\n\n\n\n<ul><li><strong>Inline styling<\/strong>: great for prototyping, but has limitations (e.g. no styling of pseudo-classes)<\/li><li><strong>Class-based CSS styles<\/strong>: more performant than inline styling, and familiar to developers new to React<\/li><li><strong>CSS-in-JS styling<\/strong>: there are a variety of libraries that allow for styles to be declared as JavaScript within components, treating them more like code.<\/li><\/ul>\n\n\n\n<h3 id=\"furtherreading-10\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.sitepoint.com\/react-components-styling-options\/\">How to Style React Components<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"12whatsthedifferencebetweenacontrolledandanuncontrolledcomponent\">12. What\u2019s the difference between a controlled and an uncontrolled component?<\/h2>\n\n\n\n<h3 id=\"answer-11\">Answer<\/h3>\n\n\n\n<p>In an HTML document, many form elements (e.g.&nbsp;<code>&lt;select&gt;<\/code>,&nbsp;<code>&lt;textarea&gt;<\/code>,&nbsp;<code>&lt;input&gt;<\/code>) maintain their own state. An uncontrolled component treats the DOM as the source of truth for the state of these inputs. In a controlled component, the internal state is used to keep track of the element value. When the value of the input changes, React re-renders the input.<\/p>\n\n\n\n<p>Uncontrolled components can be useful when integrating with non-React code (e.g if you need to support some kind of jQuery form plugin).<\/p>\n\n\n\n<h3 id=\"furtherreading-11\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/goshakkk.name\/controlled-vs-uncontrolled-inputs-react\/\">Controlled vs Uncontrolled Inputs<\/a><\/li><li><a href=\"https:\/\/reactjs.org\/docs\/forms.html#controlled-components\">Controlled Components (React Docs)<\/a><\/li><li><a href=\"https:\/\/reactjs.org\/docs\/uncontrolled-components.html\">Uncontrolled Components (React Docs)<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"13whatarethelifecyclemethods\">13. What are the lifecycle methods?<\/h2>\n\n\n\n<h3 id=\"answer-12\">Answer<\/h3>\n\n\n\n<p>Class-based components can declare special methods that are called at certain points in its lifecycle, such as when it\u2019s mounted (rendered into the DOM) and when it\u2019s about to be unmounted. These are useful for setting up and tearing down things a component might need, setting up timers or binding to browser events, for example.<\/p>\n\n\n\n<p>The following lifecycle methods are available to implement in your components:<\/p>\n\n\n\n<ul><li><strong>componentWillMount<\/strong>: called after the component is created, but before it\u2019s rendered into the DOM<\/li><li><strong>componentDidMount<\/strong>: called after the first render; the component\u2019s DOM element is now available<\/li><li><strong>componentWillReceiveProps<\/strong>: called when a prop updates<\/li><li><strong>shouldComponentUpdate<\/strong>: when new props are received, this method can prevent a re-render to optimize performance<\/li><li><strong>componentWillUpdate<\/strong>: called when new props are received&nbsp;<em>and<\/em>&nbsp;<code>shouldComponentUpdate<\/code>&nbsp;returns&nbsp;<code>true<\/code><\/li><li><strong>componentDidUpdate<\/strong>: called after the component has updated<\/li><li><strong>componentWillUnmount<\/strong>: called before the component is removed from the DOM, allowing you to clean up things like event listeners.<\/li><\/ul>\n\n\n\n<p>When dealing with functional components,&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/hooks-effect.html\">the&nbsp;<code>useEffect<\/code>&nbsp;hook<\/a>&nbsp;can be used to replicate lifecycle behavior.<\/p>\n\n\n\n<h3 id=\"furtherreading-12\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/projects.wojtekmaj.pl\/react-lifecycle-methods-diagram\/\">React Lifecycle Methods Diagram<\/a><\/li><li><a href=\"https:\/\/reactjs.org\/docs\/react-component.html#the-component-lifecycle\">The Component Lifecycle API<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"14whatarereacthooks\">14. What are React hooks?<\/h2>\n\n\n\n<h3 id=\"answer-13\">Answer<\/h3>\n\n\n\n<p>Hooks are React\u2019s attempt to bring the advantages of class-based components (i.e. internal state and lifecycle methods) to functional components.<\/p>\n\n\n\n<h3 id=\"furtherreading-13\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.freecodecamp.org\/news\/react-hooks-in-5-minutes\/\">Learn React Hooks in 5 minutes<\/a><\/li><li><a href=\"https:\/\/www.sitepoint.com\/react-hooks\/\">React Hooks: How to Get Started &amp; Build Your Own<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"15whataretheadvantagesofreacthooks\">15. What are the advantages of React hooks?<\/h2>\n\n\n\n<h3 id=\"answer-14\">Answer<\/h3>\n\n\n\n<p>There are several stated benefits of introducing hooks to React:<\/p>\n\n\n\n<ul><li>Removing the need for class-based components, lifecycle hooks, and&nbsp;<code>this<\/code>&nbsp;keyword shenanigans<\/li><li>Making it easier to reuse logic, by abstracting common functionality into custom hooks<\/li><li>More readable, testable code by being able to separate out logic from the components themselves<\/li><\/ul>\n\n\n\n<h3 id=\"furtherreading-14\">Further reading<\/h3>\n\n\n\n<ul><li><a href=\"https:\/\/www.darrenlester.com\/blog\/benefits-of-react-hooks\">Benefits of React Hooks<\/a><\/li><li><a href=\"https:\/\/medium.com\/@mateuszroth\/react-hooks-advantages-and-comparison-to-older-reusable-logic-approaches-in-short-f424c9899cb5\">React Hooks \u2014 advantages and comparison to older reusable logic approaches in short<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"wrappingup\">Wrapping Up<\/h2>\n\n\n\n<p>Although by no means a comprehensive list (React is constantly evolving), these questions cover a lot of ground. Understanding these topics will give you a good working knowledge of the library, along with some of its most recent changes. Following up with the suggested further reading will help you cement your understanding, so you can demonstrate an in-depth knowledge.<\/p>\n\n\n\n<p>We\u2019ll be following up with a guide to React interview code exercises, so keep an eye out for that in the near future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React\u2019s popularity shows no sign of waning, with the demand for developers still outstripping the supply in many cities around the world. For less-experienced developers (or those who\u2019ve been out of the job market for a while), demonstrating your knowledge at the interview stage can be daunting.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1781"}],"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=1781"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1781\/revisions"}],"predecessor-version":[{"id":1783,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1781\/revisions\/1783"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}