All questions
Showing of 108What is the Virtual DOM and how does it work?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The Virtual DOM is a JavaScript representation of the actual DOM (Document Object Model). It's a programming concept where a "virtual" representation of the UI is kept in memory and synced with the "real" DOM.
How it works:
- When state changes occur, React creates a new virtual DOM tree
- React compares (diffs) the new virtual DOM tree with the previous virtual DOM tree
- React calculates the minimum changes needed to update the real DOM
- React applies only these necessary changes to the real DOM
This process is called reconciliation and makes React applications faster because manipulating the virtual DOM is much faster than manipulating the real DOM.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is JSX and why is it used in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes React components more readable and easier to write.
JSX gets transpiled to React.createElement() calls by tools like Babel:
// JSX
const element = <h1>Hello, World!</h1>;
// Transpiled to
const element = React.createElement('h1', null, 'Hello, World!');
Benefits of JSX:
- More intuitive and readable than
React.createElement() - Allows mixing of HTML-like syntax with JavaScript expressions
- Provides better error messages and warnings
- Enables static type checking
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What's the difference between React elements and React components?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
React Element: A plain JavaScript object that describes what should appear on screen. It's the smallest building block of React apps.
const element = <h1>Hello, World!</h1>;
React Component: A function or class that returns React elements. Components are reusable and can accept inputs (props).
// Function component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Class component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are the differences between functional and class components?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Functional Components:
- Simpler syntax
- Use React Hooks for state and lifecycle methods
- Better performance (less overhead)
- Easier to test and debug
- Preferred approach in modern React
function MyComponent(props) {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}
Class Components:
- More verbose syntax
- Use
this.stateand lifecycle methods - Have access to
thiscontext - Legacy approach (still supported)
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <div>{this.state.count}</div>;
}
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you create a React component?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
There are two main ways to create React components:
1. Function Component (Recommended):
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Or using arrow function
const Welcome = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
2. Class Component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are the rules of JSX?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Key JSX rules:
- Must return a single parent element or use React Fragment
- Use camelCase for attributes:
classNameinstead ofclass,onClickinstead ofonclick - Close all tags: Self-closing tags must end with
/> - Use curly braces for JavaScript expressions:
{variable}or{expression} - Boolean attributes:
disabled={true}or justdisabled
// Correct JSX
function MyComponent() {
return (
<div className="container">
<img src="image.jpg" alt="Description" />
<p>Count: {count}</p>
</div>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is React Fragment and when would you use it?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
React Fragment lets you group multiple elements without adding an extra node to the DOM. It's useful when you need to return multiple elements from a component but don't want to wrap them in a div.
// Using React.Fragment
function MyComponent() {
return (
<React.Fragment>
<h1>Title</h1>
<p>Description</p>
</React.Fragment>
);
}
// Using short syntax
function MyComponent() {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you conditionally render elements in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
There are several ways to conditionally render elements:
1. Ternary Operator:
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
}
2. Logical AND (&&):
function Notification({ hasMessages }) {
return (
<div>
{hasMessages && <p>You have new messages!</p>}
</div>
);
}
3. If-else statements:
function UserStatus({ user }) {
if (user.isAdmin) {
return <AdminPanel />;
} else if (user.isLoggedIn) {
return <UserPanel />;
} else {
return <LoginForm />;
}
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you render lists in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use the map() method to render lists, and always provide a unique key prop:
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
);
}
The key prop helps React identify which items have changed, been added, or removed, improving performance during re-renders.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are props in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Props (short for properties) are read-only inputs passed from parent components to child components. They allow data to flow down the component tree.
// Parent component
function App() {
return <Welcome name="John" age={25} />;
}
// Child component
function Welcome(props) {
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}
Props characteristics:
- Read-only (immutable)
- Passed from parent to child
- Can be any JavaScript value (strings, numbers, objects, functions, etc.)
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is state in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
State is a built-in React object used to contain data that may change over the lifetime of a component. When state changes, the component re-renders.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
State characteristics:
- Mutable (can be changed)
- Local to the component
- Triggers re-renders when updated
- Should not be modified directly
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What's the difference between props and state?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
| Props | State |
|---|---|
| Read-only | Mutable |
| Passed from parent | Local to component |
| Cannot be changed by component | Can be changed by component |
| External data | Internal data |
| Functional parameters | Component memory |
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you handle events in React?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
React uses SyntheticEvents, which are wrappers around native events that provide consistent behavior across browsers:
function Button() {
const handleClick = (event) => {
event.preventDefault();
console.log('Button clicked!');
console.log('Event type:', event.type);
};
return (
<button onClick={handleClick}>
Click me
</button>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you prevent default behavior in React events?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use the preventDefault() method on the event object:
function Form() {
const handleSubmit = (event) => {
event.preventDefault(); // Prevents form from submitting
console.log('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you pass parameters to event handlers?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
There are several ways to pass parameters:
1. Arrow function in JSX:
function ItemList({ items }) {
const handleClick = (id) => {
console.log('Clicked item:', id);
};
return (
<div>
{items.map(item => (
<button key={item.id} onClick={() => handleClick(item.id)}>
{item.name}
</button>
))}
</div>
);
}
2. Bind method:
function ItemList({ items }) {
const handleClick = (id, event) => {
console.log('Clicked item:', id);
};
return (
<div>
{items.map(item => (
<button key={item.id} onClick={handleClick.bind(null, item.id)}>
{item.name}
</button>
))}
</div>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is useState hook and how do you use it?
What are controlled vs uncontrolled components?
What is Create React App and what does it provide?
What is the difference between React and ReactDOM?
What is lifting state up in React, and when do you need it?
What are React Hooks?
How do you pass data from child to parent component?
What is the `key` prop and why is it important?
What is prop drilling and how can you avoid it?
What are SyntheticEvents in React?
What are React lifecycle methods?
Name the most commonly used lifecycle methods?
What is componentDidMount and when is it used?
What is componentWillUnmount and when is it used?
What is useEffect hook and what are its use cases?
What's the difference between useEffect with and without dependencies?
What is useContext hook?
What is useReducer hook and when should you use it?
What are the rules of Hooks?
What is useMemo hook and when should you use it?
What is useCallback hook?
What is useRef hook?
What are custom Hooks?
What is React Context and when should you use it?
How do you create and consume Context?
What are different ways to manage state in React?
When should you use external state management libraries?
What is React.memo and when should you use it?
What is the difference between useMemo and React.memo?
What is React.lazy and Suspense?
What is code splitting in React?
What are Error Boundaries in React?
How do you handle errors in async operations?
What is React Router and how do you use it?
How do you handle route parameters in React Router?
How do you implement protected routes?
What's the difference between BrowserRouter and HashRouter?
How do you handle form validation in React?
How do you handle different form input types?
How do you test React components?
How do you test components with state and effects?
How do you test async operations and API calls?
How do you test components with Context?
What alternatives exist to Create React App?
What is the difference between development and production builds?
How do you handle environment variables in React?
What are some deployment strategies for React applications?
What is React.StrictMode?
What are React Portals?
How do you handle forms with multiple inputs efficiently?
What is useId hook?
What is the Container/Presentational component pattern?
How do you optimize images in React applications?
How do you test custom hooks?
What is Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)?
What is Static Site Generation (SSG)?
How do you handle state persistence across page refreshes?
What is the difference between useLayoutEffect and useEffect?
What are the new features in React 19?
What is hydration in React?
What is Redux and how does it work with React?
What is the Provider pattern?
What are the new features in React 18?
What is Component Composition and how does it compare to inheritance?
What are Higher-Order Components (HOCs)?
What is the Render Props pattern?
What is the Forwarding Refs pattern?
What are some common React performance optimization techniques?
What are the best practices for optimizing large lists?
What are the performance implications of Context?
How do you create Error Boundaries with Hooks?
What are Compound Components?
How do you optimize React apps for production?
What is React Fiber?
What is Concurrent Mode in React?
How do you implement drag and drop in React?
How do you implement infinite scrolling in React?
What is useTransition hook?
What is useDeferredValue hook?
What is useSyncExternalStore hook?
What is the Compound Component pattern with Context?
What is the Observer pattern in React?
What is the State Reducer pattern?
How do you measure React application performance?
How do you implement undo/redo functionality?
How do you implement optimistic updates?
What are common security concerns in React applications?
How do you handle authentication and authorization?
How do you test components with complex user interactions?
How do you implement and test error boundaries?
What are React Server Components?
What is the React Compiler?
What is a stale closure in React hooks, and how do you fix it?
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
93 of 108 React answers are in Pro.
Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.
- Full answers + code
- AI explanations, simpler or deeper
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsDjango
Python Full-Stack DevelopmentRuby on Rails
Convention over ConfigurationServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQInterviewers also test these - they're common to every stack, whichever one you picked above.
FastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDInterviewers also test these - they're common to every stack, whichever one you picked above.
AI Engineer
LLMs, RAG, Agents, EvalsAI-Powered Developer
Claude Code, Copilot, Agentic WorkflowsCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.