{"id":24604,"date":"2022-11-22T04:02:15","date_gmt":"2022-11-22T12:02:15","guid":{"rendered":"https:\/\/coderpad.io\/?p=24604"},"modified":"2023-08-04T13:54:59","modified_gmt":"2023-08-04T20:54:59","slug":"example-react-interview-questions","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/example-react-interview-questions\/","title":{"rendered":"Example React Interview Questions"},"content":{"rendered":"\n<p>Looking to hire a React developer? Get in line\u2026<\/p>\n\n\n\n<p>React developers are some of the most in-demand front-end developers.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_6377af1765c60.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_6377af1765c60.png\" alt=\"Why react interview questions are important: According to Dev Jobs Scanner, there are about 137k React developer job openings, 76k for Angular, 18k for vue, and other frameworks are about 5k.\"\/><\/a><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.devjobsscanner.com\/blog\/the-most-demanded-frontend-frameworks-in-2022\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>So what can you do to compete?&nbsp;<\/strong><\/p>\n\n\n\n<p>Create a great interview experience! And one of the best ways to do that is to create technical interview questions that allow you to assess a candidate\u2019s technical skills in a way that\u2019s both fun and challenging to the candidate.&nbsp;<\/p>\n\n\n\n<p>Try using the example React interview questions below to create a creative, engaging interview experience.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav aria-label=\"Table of Contents\"><ul><li class=\"\"><a href=\"#react-interview-question-1-virtualized-list\">React interview question 1: Virtualized list<\/a><\/li><li class=\"\"><a href=\"#react-interview-question-2-file-tree\">React interview question 2: File tree<\/a><\/li><li class=\"\"><a href=\"#react-interview-question-3-to-do-list\">React interview question 3: To-do list<\/a><\/li><li class=\"\"><a href=\"#more-interviewing-resources\">More interviewing resources<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\" data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"react-interview-question-1-virtualized-list\">React interview question 1: Virtualized list<\/h2>\n\n\n\n<p>This exercise aims to have the candidate render every word in the English language in a single, scrollable, performant list. To complete it, candidates will need to demonstrate their skills in render optimization fundamentals. You\u2019ll also be able to assess their problem-solving skills and see how they communicate their approach to the challenge.&nbsp;<\/p>\n\n\n\n<p>In the example question below, you\u2019ll see that we\u2019ve added an <code>App.tsx<\/code> file, where there&#8217;s a <code>useDictionary()<\/code> hook already written. This hook will fetch the entire dictionary and return it in a nice array.<\/p>\n\n\n\n<p>The dictionary has nearly 400K words, far too many elements to write to the DOM at once. It will almost certainly crash web browsers. For this reason, we added a component called <code>&lt;SafelyRenderChildren<\/code>&gt; that puts an artificial limit on the number of children you can render at once to ensure that there\u2019s no chance of the candidate crashing their browsers during the interview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-learning-opportunities\">Create learning opportunities<\/h3>\n\n\n\n<p>Your candidates may or may not be familiar with virtualization for element rendering. As such, we\u2019ve included a brief description of what virtualization is for the candidates:&nbsp;<\/p>\n\n\n\n<p><strong><em>What is virtualization?<\/em><\/strong><\/p>\n\n\n\n<p><em>Virtualization in client-side development, deals with the concept of only rendering elements that are critical for providing a seamless user experience, and culling every element that is off the screen.<\/em><\/p>\n\n\n\n<p><em>So instead of rendering 500K list items, we might start with only rendering 500 items, and then progressively adding\/removing list items as the user scrolls.<\/em><\/p>\n\n\n\n<p><em>The goal is to deliver a user experience that feels as seamless as possible.<\/em><\/p>\n\n\n\n<p>If they already know what it is \u2013great! If not, we hope to help enhance their interview experience by teaching them about something new and increasing their chances of success with the exercise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"goals-and-stretch-goals\">Goals and stretch goals<\/h3>\n\n\n\n<p>Once the background information is laid out, you can proceed with laying out the goals for this particular technical exercise.<\/p>\n\n\n\n<p>Here are the goals we will set for the candidates to test their understanding of the task and implementing virtualization:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><em>When loading the page, we should see a list that is filled with words, the scrollbar should be as long as the entirety of the dictionary, appearing as if every word is already present in the list.<\/em><\/li>\n\n\n\n<li><em>Scrolling using the mouse wheel should feel completely seamless. The elements should stay positioned correctly and not jump around as elements load\/unload.<\/em><\/li>\n\n\n\n<li><em>We should be able to drag the scrollbar to any position in the list and have the correct items be visible.<\/em><\/li>\n<\/ol>\n\n\n\n<p>Some candidates will spend the whole time working on meeting those goals \u2013 and that\u2019s fine. For candidates that can complete the main tasks, you can throw in a stretch goal, like adding a search box to the list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"constraints\">Constraints<\/h3>\n\n\n\n<p>Like building any real-life application, this React exercise has its own requirements and constraints. In particular:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Each list item must have a known height (30px).<\/em><\/li>\n\n\n\n<li><em><code>&lt;SafelyRenderChildren\/&gt;<\/code> should limit the maximum list items to 2,500.<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"final-tips-and-advice\">Final tips and advice<\/h3>\n\n\n\n<p>Before letting the candidate jump into coding, let\u2019s offer them some further advice on how to be successful with this exercise:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>The amount of items you render at one time is completely up to you, and should be tuned for a balance of performance and usability \u2013 i.e. we want no visual evidence of loading when mouse wheel scrolling, and minimal evidence of loading when scrolling large distances at one time.<\/em><\/li>\n\n\n\n<li><em>There is an optional included <code>useScrollPosition<\/code> hook that you can use to quickly get the current scroll position.<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-the-candidate-sees\">What the candidate sees<\/h3>\n\n\n\n<p>If we put this all together into a CoderPad, we can see what the experience would be like for you and the candidate. You can even try out the exercise yourself:<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 100%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=224573&#038;use_question_button\" width=\"800\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"react-interview-question-2-file-tree\">React interview question 2: File tree<\/h2>\n\n\n\n<p>This question tests a candidate\u2019s ability to generate a complex UI from a simple input and ability to read and render data structures.<\/p>\n\n\n\n<p>In this challenge, they will build an arbitrarily-deep file tree explorer given a list of file objects consisting of a <code>path<\/code> and the <code>contents<\/code> of the file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"goals-and-stretch-goals-1\">Goals and stretch goals<\/h3>\n\n\n\n<p>More specifically, the candidate:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Must display files in a nested structure, with entries for each folder and file<\/em><\/li>\n\n\n\n<li><em>Must be able to handle arbitrarily-deep file structures<\/em><\/li>\n<\/ul>\n\n\n\n<p>If they solve this challenge and still have more time, their follow-on task is to implement the ability to add new files to the file tree.<\/p>\n\n\n\n<p>When it comes to assessing how the candidate did in achieving these goals, its helpful to ask the following questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How efficient is their algorithm? How many times do they loop over the files list?<\/li>\n\n\n\n<li>How accurate is their solution? Are they sorting things correctly according to the requirements? Does the solution handle edge cases?<\/li>\n\n\n\n<li>How do they get to the answer? Do they immediately know how to solve and just jump into writing code? If they don\u2019t know the answer right away, do they know how to utilize appropriate resources (e.g., Google, StackOverflow, you, etc.) to find a suitable solution?<\/li>\n\n\n\n<li>Do they test their code?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"constraints-2\">Constraints<\/h3>\n\n\n\n<p>In sorting the file tree, the following rules must be followed, which mirror the experience we would want the end user to have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>&nbsp;&nbsp;&nbsp;&nbsp;Folders are shown before files<\/em><\/li>\n\n\n\n<li><em>&nbsp;&nbsp;&nbsp;&nbsp;All items are sorted alphabetically (case-insensitive)<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-the-candidate-sees-3\">What the candidate sees<\/h3>\n\n\n\n<p>This CoderPad demonstrates how the question would appear to a candidate in a technical interview:<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=224723&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"react-interview-question-3-to-do-list\">React interview question 3: To-do list<\/h2>\n\n\n\n<p>In this challenge the candidate will display their knowledge of object-oriented programming. The goal of the exercise is to create a working todo list with persistent data storage. <\/p>\n\n\n\n<p>The candidate is presented with starter code that creates a styled todo list that supports adding &#8220;todo&#8221; tasks. There are also premade styles for completed todo items. <\/p>\n\n\n\n<p>However you will notice that there&#8217;s no working mechanism for &#8220;completing&#8221; a todo list item&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"goals-and-stretch-goals-4\">Goals and stretch goals<\/h3>\n\n\n\n<p>The candidate should complete the following tasks in order be successful at this exercise:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clicking on a todo item should toggle the &#8220;checked&#8221; state. <\/li>\n\n\n\n<li>The todo list state should be saved and loaded from local storage. <\/li>\n\n\n\n<li>Checked items should sink to the bottom of the list automatically.<\/li>\n<\/ol>\n\n\n\n<p>If the candidate is able to complete these goals, they can then attempt the following stretch goals:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Allow todo items to be deleted. When you hover your mouse over a todo, an &#8220;X&#8221; should appear on the far right side, clicking the &#8220;X&#8221; should remove it from the list. <\/li>\n\n\n\n<li>Add hidden timestamps to todo list items (<code>created_at<\/code>, <code>completed_at<\/code>), these will be used for sorting:   \n<ul class=\"wp-block-list\">\n<li>The active todos should be sorted by <code>created_at<\/code> -&gt; descending   <\/li>\n\n\n\n<li>The completed todos should be sorted by <code>completed_at<\/code> -&gt; ascending <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-the-candidate-sees-5\">What the candidate sees<\/h3>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=235744&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"more-interviewing-resources\">More interviewing resources<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Interested in using this question in a CoderPad Live interview? It&#8217;s easy, <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/example-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">simply follow the instructions here<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>Even for the most experienced managers, hiring the right engineers can be tricky.&nbsp;<\/p>\n\n\n\n<p>To make it easier, here are some more resources \u2013 more example questions and interview tips \u2013 to help make your hiring process as smooth as possible:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/interview-questions\/react-interview-questions\/\">25+ React interview questions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/online-coding-tests\/react\/\">Online coding test questions for React<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/interview-front-end-developers\/\">How to Interview Front-end Developers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/front-end-design-skills\/\" target=\"_blank\" rel=\"noreferrer noopener\">3 Design Skills You Should Look For In Front-End Candidates<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Run Front-End Developer Interviews That Don\u2019t Suck<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">A Holistic Guide to Diversity and Inclusion in the Technical Hiring Process<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Looking for questions to test the skills of your React candidates? Look no further&#8230;<\/p>\n","protected":false},"author":12,"featured_media":25030,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-24604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=24604"}],"version-history":[{"count":42,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24604\/revisions"}],"predecessor-version":[{"id":35870,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24604\/revisions\/35870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/25030"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=24604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=24604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=24604"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=24604"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=24604"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=24604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}