--- title: "Example React Interview Questions | CoderPad" description: "Looking for questions to test the skills of your React candidates? Look no further..." canonical: "https://coderpad.io/blog/interviewing/example-react-interview-questions/" last_modified: "2026-04-15 16:21:03" --- [Back to blog](https://coderpad.io/blog/) # Example React Interview Questions November 22, 2022 6 Minute Read By Ken Swearengen [Interviewing](https://coderpad.io/blog/interviewing/) Looking to hire a React developer? Get in line… React developers are some of the most in-demand front-end developers. [![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.](https://coderpad.io/wp-content/uploads/2022/11/img_6377af1765c60.png)](https://coderpad.io/wp-content/uploads/2022/11/img_6377af1765c60.png) [Source](https://www.devjobsscanner.com/blog/the-most-demanded-frontend-frameworks-in-2022/) So what can you do to compete? 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’s technical skills in a way that’s both fun and challenging to the candidate. Try using the example React interview questions below to create a creative, engaging interview experience. - [React interview question 1: Virtualized list](#react-interview-question-1-virtualized-list) - [React interview question 2: File tree](#react-interview-question-2-file-tree) - [React interview question 3: To-do list](#react-interview-question-3-to-do-list) - [More interviewing resources](#more-interviewing-resources) ## Learn how to run front-end developer interviews that don’t suck [Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) ## React interview question 1: Virtualized list 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’ll also be able to assess their problem-solving skills and see how they communicate their approach to the challenge. In the example question below, you’ll see that we’ve added an`App.tsx`file, where there’s a`useDictionary()`hook already written. This hook will fetch the entire dictionary and return it in a nice array. 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` that puts an artificial limit on the number of children you can render at once to ensure that there’s no chance of the candidate crashing their browsers during the interview. ### Create learning opportunities Your candidates may or may not be familiar with virtualization for element rendering. As such, we’ve included a brief description of what virtualization is for the candidates: What is virtualization? 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. 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. The goal is to deliver a user experience that feels as seamless as possible. If they already know what it is –great! 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. ### Goals and stretch goals Once the background information is laid out, you can proceed with laying out the goals for this particular technical exercise. Here are the goals we will set for the candidates to test their understanding of the task and implementing virtualization: 1. 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. 2. Scrolling using the mouse wheel should feel completely seamless. The elements should stay positioned correctly and not jump around as elements load/unload. 3. We should be able to drag the scrollbar to any position in the list and have the correct items be visible. Some candidates will spend the whole time working on meeting those goals – and that’s fine. For candidates that can complete the main tasks, you can throw in a stretch goal, like adding a search box to the list. ### Constraints Like building any real-life application, this React exercise has its own requirements and constraints. In particular: - Each list item must have a known height (30px). - ``should limit the maximum list items to 2,500. ### Final tips and advice Before letting the candidate jump into coding, let’s offer them some further advice on how to be successful with this exercise: - 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 – 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. - There is an optional included`useScrollPosition`hook that you can use to quickly get the current scroll position. ### What the candidate sees 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: ## React interview question 2: File tree This question tests a candidate’s ability to generate a complex UI from a simple input and ability to read and render data structures. In this challenge, they will build an arbitrarily-deep file tree explorer given a list of file objects consisting of a`path`and the`contents`of the file. ### Goals and stretch goals More specifically, the candidate: - Must display files in a nested structure, with entries for each folder and file - Must be able to handle arbitrarily-deep file structures 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. When it comes to assessing how the candidate did in achieving these goals, its helpful to ask the following questions: - How efficient is their algorithm? How many times do they loop over the files list? - How accurate is their solution? Are they sorting things correctly according to the requirements? Does the solution handle edge cases? - How do they get to the answer? Do they immediately know how to solve and just jump into writing code? If they don’t know the answer right away, do they know how to utilize appropriate resources (e.g., Google, StackOverflow, you, etc.) to find a suitable solution? - Do they test their code? ### Constraints In sorting the file tree, the following rules must be followed, which mirror the experience we would want the end user to have: - Folders are shown before files - All items are sorted alphabetically (case-insensitive) ### What the candidate sees This CoderPad demonstrates how the question would appear to a candidate in a technical interview: ## React interview question 3: To-do list 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. The candidate is presented with starter code that creates a styled todo list that supports adding “todo” tasks. There are also premade styles for completed todo items. However you will notice that there’s no working mechanism for “completing” a todo list item… ### Goals and stretch goals The candidate should complete the following tasks in order be successful at this exercise: 1. Clicking on a todo item should toggle the “checked” state. 2. The todo list state should be saved and loaded from local storage. 3. Checked items should sink to the bottom of the list automatically. If the candidate is able to complete these goals, they can then attempt the following stretch goals: 1. Allow todo items to be deleted. When you hover your mouse over a todo, an “X” should appear on the far right side, clicking the “X” should remove it from the list. 2. Add hidden timestamps to todo list items (`created_at`,`completed_at`), these will be used for sorting: - The active todos should be sorted by`created_at`-> descending - The completed todos should be sorted by`completed_at`-> ascending ### What the candidate sees ## More interviewing resources > ![✅](https://coderpad.io/assets/emoji/2705.svg) Interested in using this question in a CoderPad Live interview? It’s easy, [simply follow the instructions here](https://coderpad.io/resources/docs/interview/question-bank/example-questions/). Even for the most experienced managers, hiring the right engineers can be tricky. To make it easier, here are some more resources – more example questions and interview tips – to help make your hiring process as smooth as possible: - [25+ React interview questions](https://coderpad.io/interview-questions/react-interview-questions/) - [Online coding test questions for React](https://coderpad.io/online-coding-tests/react/) - [How to Interview Front-end Developers](https://coderpad.io/interview-front-end-developers/) - [3 Design Skills You Should Look For In Front-End Candidates](https://coderpad.io/blog/interviewing/front-end-design-skills/) - [How to Run Front-End Developer Interviews That Don’t Suck](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) - [A Holistic Guide to Diversity and Inclusion in the Technical Hiring Process](https://coderpad.io/blog/interviewing/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process/) ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Interviewing ## 5 Skills of the Future Developer: A Framework for Evaluating AI Fluency According to CoderPad’s State of Tech Hiring 2026 report, 82% of developers now find GenAI useful — up from 76% just a year ago. More telling: 54% of developers would experience a measurable productivity drop if AI tools were removed tomorrow. AI isn’t a productivity booster anymore. It’s infrastructure. With this shift, it’s no surprise […] Read the post](https://coderpad.io/blog/interviewing/5-skills-of-the-future-developer-a-framework-for-evaluating-ai-fluency/) [Hiring Developers ## Q&A: Musings of a CEO on Tech Interviews, Cheating and AI In this Q&A session on cheating and AI in tech interviews, Amanda Richardson emphasizes the importance of trust and effective interview design. Read the post](https://coderpad.io/blog/interviewing/qa-musings-of-a-ceo-on-tech-interviews-cheating-and-ai/) [Engineering Management ## How To Use CoderPad To Interview Software Architects Software architects are the masterminds behind the design and structure of software systems, ensuring that projects are scalable, maintainable, and aligned with business goals. Unlike more hands-on engineering and development roles, assessing architect skills in an interview relies much less on watching them code and more on their ability to drive software design principles and […] Read the post](https://coderpad.io/blog/interviewing/how-to-use-coderpad-to-interview-software-architects/) [Hiring Developers ## “Don’t Expect Candidates to Have Everything Memorized”, the Dos and Don’ts of Cheating Prevention With Nathan Sutter Sure, you want to prevent cheating. But you also want to feel good about your hiring process. So how do you do that? Read the post](https://coderpad.io/blog/hiring-developers/dos-and-donts-cheating-prevention-nathan-sutter/) [Interviewing ## Crafting Effective Technical Interview Questions: A 4-Step Guide Writing great technical interview questions can be hard. We're here to help. Read the post](https://coderpad.io/blog/interviewing/crafting-effective-technical-interview-questions-a-4-step-guide/) [Interviewing ## Viral TikTok Layoff Videos: What You Need to Know So, you’ve heard about these viral TikTok layoff videos, but you’re unsure how concerned you should be? Read about what you can learn from this content, and how it should impact your company’s HR practices. Read the post](https://coderpad.io/blog/interviewing/viral-tiktok-layoff-videos-what-you-need-to-know/) [Interviewing ## 8 Steps Recruiters Can Take to Instill Inclusivity in Tech Interviews As TA professionals, you have the power to create an inclusive interview environment for your interviewers and interviewees. Want to know how? This guide will help you. Read the post](https://coderpad.io/blog/interviewing/inclustive-technical-interview-guide/) [Engineering Management ## These 9 Red Flags Are Scaring Away Candidates During Interviews Don't let your name be dragged into a bad Glassdoor review. Read the post](https://coderpad.io/blog/engineering-management/these-9-red-flags-are-scaring-away-candidates-during-interviews/) [Interviewing ## Best Platforms for Remote Interviews Discover how the modern employment landscape is embracing remote work and virtual interviews. Dive into the capabilities of platforms like Zoom, Skype, Microsoft Teams, and Google Meets for general use, and explore specialized options like HireVue, Codility, and CoderPad for technical hiring. Read the post](https://coderpad.io/blog/interviewing/best-platforms-for-remote-interviews/) [Interviewing ## Why One-Way Video Interviews Don’t Work and What You Should Do Instead Read about why one-way interviews are less promising than they seem and explore alternative methods that offer a fairer, more realistic approach to hiring. Read the post](https://coderpad.io/blog/interviewing/why-one-way-video-interviews-dont-work-and-what-you-should-do-instead/) [Interviewing ## 2 Interview Questions to Assess Your Next Intermediate Backend Engineer Looking for guidance in evaluating your intermediate backend developers? We've got the perfect solution with these two insightful questions. Read the post](https://coderpad.io/blog/interviewing/2-interview-questions-to-assess-your-next-intermediate-backend-engineer/) [Interviewing ## 3 Tips To Introduce ChatGPT Into Your Technical Interviews Integrating ChatGPT into technical interviews involves setting clear expectations, demonstrating its practical use, and acknowledging its limitations, creating a fair and realistic assessment environment that aligns with the evolving landscape of software development Read the post](https://coderpad.io/blog/interviewing/3-tips-to-introduce-chatgpt-into-your-technical-interviews/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)