获得完整访问权限
新与我们合作推广 ->
获得完整访问权限
JavaScriptReactAngularVueSvelteCSSHTMLTypeScript

React 面试问题

关于组件架构、钩子、状态管理、性能以及真实世界 UI 组件的 140+ 个最重要的 React 面试问题。
由前面试官解答
测试场景
在浏览器中编码

题目列表

React 面试指南涵盖核心概念和特定于面试的 React 提示的全面 React 面试指南
0/12 指南
指南
  • Counter热身问题Build a simple counter that increments whenever a button is clicked
    可用的框架
  • 新
    useBooleanImplement a hook that manages a boolean state, with additional convenience utility methods
    语言
  • 新
    useCounterImplement a hook that manages a counter state, with some additional convenience utility methods
    语言
  • AccordionBuild an accordion component that a displays a list of vertically stacked sections with each containing a title and content snippet
    可用的框架
  • Contact FormBuild a contact form which submits user feedback and contact details to a back end API
    可用的框架
  • Holy GrailBuild the famous holy grail layout consisting of a header, 3 columns, and a footer
    可用的框架
  • Progress BarsBuild a list of progress bars that fill up gradually when they are added to the page
    可用的框架
  • 新
    useClickAnywhereImplement a hook that handles click events anywhere on the document
    语言
  • 新
    useCounter IIImplement an optimized version of the useCounter hook
    语言
  • 新
    useCycleImplement a hook that cycles through a sequence of values
    语言
  • Mortgage CalculatorBuild a calculator that computes the monthly mortgage for a loan
    可用的框架
  • TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
    可用的框架
  • 新
    useArrayImplement a hook that manages an array of items
    语言
  • 新
    useDebounceImplement a hook that debounces a value
    语言
  • 新
    useSetImplement a hook that manages a JavaScript set
    语言
  • 新
    useTimeoutImplement a hook that invokes a callback function after a specified delay
    语言
  • 新
    useWindowSizeImplement a hook that returns the current height and width of the window
    语言
  • Data TableBuild a users data table with pagination features
    可用的框架
  • Dice RollerBuild a dice roller app that simulates the results of rolling 6-sided dice
    可用的框架
  • File ExplorerBuild a file explorer component to navigate files and directories in a tree-like hierarchical viewer
    可用的框架
  • Like ButtonBuild a Like button that changes appearance based on the states
    可用的框架
  • Modal DialogBuild a reusable modal dialog component that can be opened and closed
    可用的框架
  • Star RatingBuild a star rating component that shows a row of star icons for users to select the number of filled stars corresponding to the rating
    可用的框架
  • Todo ListBuild a Todo list that lets users add new tasks and delete existing tasks
    可用的框架
  • Traffic LightBuild a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
    可用的框架
  • 新
    useInputControlImplement a hook that manages a controlled input value and tracks its dirty & touched state
    语言
  • 新
    useMediaQueryImplement a hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.)
    语言
  • 新
    useMediatedStateImplement a hook that is similar to useState, but supports a mediation process
    语言
  • 新
    useQueryImplement a hook that manages a promise resolution
    语言
  • Digital ClockBuild a 7-segment digital clock that shows the current time
    可用的框架
  • Tic-tac-toeBuild a tic-tac-toe game that is playable by two players
    可用的框架
  • Image CarouselBuild an image carousel that displays a sequence of images
    可用的框架
  • Job BoardBuild a job board that displays the latest job postings from Hacker News
    可用的框架
  • StopwatchBuild a stopwatch widget that can measure how much time has passed
    可用的框架
  • Transfer ListBuild a component that allows transferring of items between two lists
    可用的框架
  • Nested CheckboxesBuild a nested checkboxes component with parent-child selection logic
    可用的框架
  • Flight Booker高级Build a component that books a flight for specified dates
    可用的框架
  • Generate Table高级Generate a table of numbers given the rows and columns
    可用的框架
  • Progress Bar高级Build a progress bar component that shows the percentage completion of an operation
    可用的框架
  • Temperature Converter高级Build a temperature converter widget that converts temperature values between Celsius and Fahrenheit
    可用的框架
  • 新
    useBoolean II高级Implement an optimized version of the useBoolean hook
    语言
  • 新
    useDefault高级Implement a hook that returns the default value when state is null or undefined
    语言
  • 新
    useEffectOnce高级Implement a hook that runs an effect only once
    语言
  • 新
    useFocus高级Implement a hook that enables programmatic focusing of an element
    语言
  • 新
    usePrevious高级Implement a hook that returns the previous value of a state
    语言
  • 新
    useStateWithReset高级Implement a hook that's similar to useState but with an additional reset function that resets the state to its initial value
    语言
  • 新
    useToggle高级Implement a hook that manages a boolean toggle state
    语言
  • Tweet高级Build a component that resembles a Tweet from Twitter
    可用的框架
  • 新
    useBreakpoint高级Implement a hook that returns the current breakpoint name based on the current window width
    语言
  • 新
    useClickOutside高级Implement a hook that detects clicks outside of a specified element
    语言
  • 新
    useCountdown高级Implement a hook that manages a countdown
    语言
  • 新
    useEventListener高级Implement a hook that subscribes to browser events
    语言
  • 新
    useHover高级Implement a hook that tracks whether an element is being hovered
    语言
  • 新
    useInterval高级Implement a hook that creates an interval that invokes a callback function at a specified delay
    语言
  • 新
    useKeyPress高级Implement a hook that subscribes to keyboard events
    语言
  • 新
    useMap高级Implement a hook that manages a JavaScript map
    语言
  • 新
    useObject高级Implement a hook that manages an object value
    语言
  • 新
    useStep高级Implement a hook that manages a step counter for a multi-step process
    语言
  • 新
    useThrottle高级Implement a hook that throttles a value
    语言
  • Accordion II高级Build an accessible accordion component that has the right ARIA roles, states, and properties
    可用的框架
  • Accordion III高级Build a fully accessible accordion component that has keyboard support according to ARIA specifications
    可用的框架
  • Analog Clock高级Build an analog clock where the hands update and move like a real clock
    可用的框架
  • Data Table II高级Build a users data table with sorting features
    可用的框架
  • File Explorer II高级Build a semi-accessible file explorer component that has the right ARIA roles, states, and properties
    可用的框架
  • File Explorer III高级Build a file explorer component using a flat DOM structure
    可用的框架
  • Grid Lights高级Build a grid of lights where the lights deactivate in the reverse order they were activated
    可用的框架
  • Modal Dialog II高级Build a semi-accessible modal dialog component that has the right ARIA roles, states, and properties
    可用的框架
  • Modal Dialog III高级Build a moderately-accessible modal dialog component that supports common ways to close the dialog
    可用的框架
  • Progress Bars II高级Build a list of progress bars that fill up gradually in sequence, one at a time
    可用的框架
  • Tabs II高级Build a semi-accessible tabs component that has the right ARIA roles, states, and properties
    可用的框架
  • Tabs III高级Build a fully accessible tabs component that has keyboard support according to ARIA specifications
    可用的框架
  • 新
    useIdle高级Implement a hook that detects user inactivity
    语言
  • Progress Bars III高级Build a list of progress bars that fill up gradually concurrently, up to a limit of 3
    可用的框架
  • Birth Year Histogram高级Build a widget that fetches birth year data from an API and plot it on a histogram
    可用的框架
  • Connect Four高级Build a game for two players who take turns to drop colored discs from the top into a vertically suspended board/grid
    可用的框架
  • Image Carousel II高级Build an image carousel that smoothly transitions between images
    可用的框架
  • Pixel Art高级Build a pixel art drawing tool where users can paint pixels with selected colors
    可用的框架
  • Undoable Counter高级Build a counter with a history of the values and ability to undo/redo actions
    可用的框架
  • Users Database高级Build a UI to filter, create, update, and delete users
    可用的框架
  • Whack-A-Mole高级Build a popular arcade game where players attempt to hit moles as they pop up from holes in a board
    可用的框架
  • Memory Game高级Build a memory game where the player needs to match pairs of cards
    可用的框架
  • Auth Code Input高级Build an auth code input component that allows users to enter a 6-digit authorization code
    可用的框架
  • Progress Bars IV高级Build a list of progress bars that fill up gradually concurrently, up to a limit of 3 and allows for pausing and resuming
    可用的框架
  • Data Table III高级Build a generalized data table with pagination and sorting features
    可用的框架
  • Modal Dialog IV高级Build a fully-accessible modal dialog component that supports all required keyboard interactions
    可用的框架
  • Data Table IV高级Build a generalized data table with pagination, sorting and filtering features
    可用的框架
  • Image Carousel III高级Build an image carousel that smoothly transitions between images that has a minimal DOM footprint
    可用的框架
  • Selectable Cells高级Build an interface where users can drag to select multiple cells within a grid
    可用的框架
  • Tic-tac-toe II高级Build an N x N tic-tac-toe game that requires M consecutive marks to win
    可用的框架
  • Transfer List II高级Build a component that allows transferring of items between two lists, bulk selection/unselection of items, and adding of new items
    可用的框架
  • Wordle高级Build Wordle, the word-guessing game that took the world by storm
    可用的框架

React Interview Questions and Answers

Are you tired of generic interview prep resources that barely scratch the surface of what it takes to master React? Look no further. Our React-specific interview questions and answers are your ultimate guide to becoming a confident and capable React developer.

Curated and answered by ex-FAANG interviewers with years of experience building React-based applications at scale, our collection ensures you're fully prepared for interviews. From core React concepts to advanced techniques, every question comes with detailed explanations, example solutions, and practical tips. Our in-browser coding workspace provides instant feedback, so you can refine your skills and understand exactly how to improve.

Our comprehensive resource is divided into two categories: React Coding Interview Questions and React Quiz Interview Questions, providing a holistic approach to your preparation.

React Coding Interview Questions

Master essential React development techniques and patterns with our curated list of coding interview questions. These challenges are designed to prepare you for:

  1. Component design and reusability: Build modular and reusable React components to create scalable applications.
  2. State and props management: Understand the nuances of managing state and props effectively to build dynamic user interfaces.
  3. React hooks: Leverage React Hooks like useState, useEffect, and custom hooks to simplify stateful logic and side effects.
  4. Performance optimization: Implement strategies like memoization, lazy loading, and code splitting to enhance application performance.
  5. Real-world scenarios: Address common challenges, such as form handling, API integrations, and dynamic rendering, with React best practices.

Each coding question includes:

  • Example solutions: Step-by-step implementations to guide you through solving the problem.
  • Automated test cases: Instantly validate your solutions, ensuring correctness and efficiency.
  • Best practices: Learn techniques to improve code readability, maintainability, and performance.

Our browser-based coding environment allows you to practice directly in React with no setup required. You can see the results of your code in real-time, making it easier to grasp key concepts.

Example coding questions include:

  • How to build a reusable dropdown component in React?
  • How to handle form validation with controlled components?
  • How to implement infinite scrolling in a React application?

These questions are designed to mirror real-world challenges, helping you build a robust understanding of React development.

React Quiz Interview Questions

React quiz questions focus on testing your knowledge of the framework's fundamentals and advanced features. These trivia-style questions cover:

  1. Core concepts: Explore key topics like JSX, the virtual DOM, and the component lifecycle.
  2. Hooks: Understand when and how to use hooks like useMemo, useReducer, and useContext.
  3. State management: Learn how to manage global state using Context API, Redux, or third-party libraries.
  4. Routing: Familiarize yourself with React Router and its features for building single-page applications.
  5. Testing: Understand the basics of testing React components with tools like Jest and React Testing Library.

Each quiz question includes:

  • Concise answers (TL;DR): Quick solutions to help you respond confidently during interviews.
  • Detailed explanations: Gain deeper insights to ensure you understand each concept and can articulate your answers clearly.

Example quiz topics include:

  • What is the difference between functional and class components in React?
  • How does React's reconciliation process work?
  • What are the benefits of using useMemo and React.memo for optimization?

These questions help you master the theoretical and practical aspects of React, giving you the confidence to handle any interview scenario.

Why Choose Our React Interview Questions?

  1. Credibility: All questions and answers are crafted by ex-FAANG engineers with years of experience in building large-scale React applications and interviewing top candidates.
  2. Comprehensive coverage: From fundamental concepts to advanced patterns, our resource covers every aspect of React development.
  3. Practical focus: Learn techniques directly applicable to real-world React projects, including dynamic rendering, state management, and performance tuning.
  4. Interactive learning: Use our in-browser coding workspace to practice React problems with instant feedback, simulating real interview conditions.

By leveraging this resource, you'll develop practical skills and theoretical knowledge that go beyond what's typically covered in React tutorials, making you a standout candidate for any React-based role.

How These Questions Help You Excel

Our React interview questions are structured to help you:

  1. Master React fundamentals: Strengthen your understanding of JSX, component architecture, and the React ecosystem.
  2. Develop a problem-solving mindset: Approach React challenges systematically, breaking them into manageable steps.
  3. Gain hands-on experience: Practice React-specific coding problems and see your solutions come to life in an interactive environment.
  4. Communicate effectively: Prepare to explain your code and thought process clearly, a crucial skill for technical interviews.

Real-World Applications

The scenarios covered in this resource aren't just theoretical. They reflect real-world challenges developers face when working with React, such as:

  • Building scalable and reusable components for complex user interfaces.
  • Managing global state effectively in large applications.
  • Debugging performance issues and optimizing render cycles.

By mastering these areas, you'll not only be interview-ready but also equipped to excel in skills for the job, making you a standout candidate for any front-end engineering role.

Related lists

Check out other lists of questions below if you're looking for something more specific: