Top 50 React Interview Questions for Entry-Level Developers

Part 1: React Basics (Questions 1–10)

1. What is React?

React is an open-source JavaScript library developed by Facebook (now Meta) for building user interfaces, particularly single-page applications. It uses a component-based architecture and a virtual DOM to efficiently update and render UI components when data changes.

2. What are the main features of React?

Virtual DOM for performance optimization
Component-based architecture
Declarative UI design
Unidirectional data flow
JSX syntax extension
Rich ecosystem and hooks

3. What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript. It makes React code more readable and is compiled into React.createElement() calls by tools like Babel.

const element = <h1>Hello, {name}!</h1>;
// Compiles to:
const element = React.createElement('h1', null, 'Hello, ', name, '!');

4. What is the Virtual DOM?

The Virtual DOM is an in-memory representation of the real DOM. When state changes, React creates a new Virtual DOM tree, compares it with the previous one (a process called "diffing"), and updates only the changed parts in the real DOM (called "reconciliation"). This minimizes expensive DOM manipulations.

5. What is the difference between Real DOM and Virtual DOM?

Real DOM updates are slow; Virtual DOM updates are fast
Real DOM directly updates HTML; Virtual DOM acts as a middle layer
Real DOM causes full reflow; Virtual DOM batches updates

6. What is a component in React?

A component is a reusable, independent piece of UI. Components can be functional or class-based. They accept inputs (props) and return React elements describing what should appear on screen.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

7. What is the difference between functional and class components?

Functional components are simpler JavaScript functions that return JSX. Class components use ES6 classes and have lifecycle methods. Since the introduction of Hooks, functional components can handle state and side effects, making them the preferred choice today.

// Functional Component
function Greeting({ name }) {
  return <h1>Hi {name}</h1>;
}

// Class Component
class Greeting extends React.Component {
  render() {
    return <h1>Hi {this.props.name}</h1>;
  }
}

8. What are props in React?

Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow down the component tree.

function Parent() {
  return <Child name="Alice" age={25} />;
}

function Child({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}

9. What is state in React?

State is a built-in object that holds data that may change over time. Unlike props, state is managed within the component and triggers re-renders when updated.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

10. What is the difference between state and props?

Props are passed from parent; state is local to the component
Props are read-only; state can be changed by the component
Props cannot be modified by the child; state can be updated using setState or hooks

Part 2: Components & Props (Questions 11–20)

11. How do you pass data between components?

Data flows from parent to child via props. To pass data from child to parent, you pass a callback function as a prop that the child invokes with the data.

function Parent() {
  const handleMessage = (msg) => console.log(msg);
  return <Child onSend={handleMessage} />;
}

function Child({ onSend }) {
  return <button onClick={() => onSend("Hello!")}>Send</button>;
}

12. What are default props?

Default props provide fallback values when a prop is not specified. In modern React, you can use default parameters in functional components.

function Button({ text = "Click me", color = "blue" }) {
  return <button style={{ color }}>{text}</button>;
}

13. What is prop drilling?

Prop drilling occurs when data is passed through multiple layers of components that do not need the data themselves, just to reach a deeply nested child. It can make code harder to maintain.

14. How do you avoid prop drilling?

You can avoid prop drilling using Context API, state management libraries like Redux, or component composition.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>Current theme: {theme}</button>;
}

15. What are controlled components?

A controlled component is a form element whose value is controlled by React state. The component receives its value from state and updates it via event handlers.

function Form() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

16. What are uncontrolled components?

Uncontrolled components manage their own state internally using refs. React does not control the input value directly.

function Form() {
  const inputRef = useRef(null);
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  return <input ref={inputRef} />;
}

17. What is the children prop?

The children prop allows components to pass elements nested inside them. It is useful for creating wrapper or layout components.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card>
  <h2>Title</h2>
  <p>Content goes here.</p>
</Card>

18. What is a higher-order component (HOC)?

A Higher-Order Component is a function that takes a component and returns a new component with enhanced functionality. It is a pattern for reusing component logic.

function withLoading(Component) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
}

const DataList = withLoading(List);

19. What are pure components?

A pure component performs a shallow comparison of props and state to prevent unnecessary re-renders. In functional components, you achieve similar behavior using React.memo.

const MyComponent = React.memo(function MyComponent({ name }) {
  return <div>{name}</div>;
});

20. What is the difference between element and component?

An element is a plain object describing what should appear on screen. A component is a function or class that returns elements. Elements are the building blocks; components are the templates that produce them.

Part 3: State & Hooks (Questions 21–30)

21. What are React Hooks?

Hooks are special functions introduced in React 16.8 that allow functional components to use state and other React features without writing classes. Common hooks include useState, useEffect, useContext, and useRef.

22. What are the rules of hooks?

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React functions — not regular JavaScript functions

23. How does useState work?

useState returns a stateful value and a function to update it. The initial value is provided as an argument. When the setter is called, React re-renders the component with the new value.

const [count, setCount] = useState(0);

// Updating based on previous state
setCount(prev => prev + 1);

24. How does useEffect work?

useEffect performs side effects in function components. It runs after render and can optionally clean up. The second argument is a dependency array that controls when the effect runs.

useEffect(() => {
  console.log("Component mounted or count changed");
  return () => console.log("Cleanup");
}, [count]);

// Run once on mount
useEffect(() => {
  fetchData();
}, []);

25. What is the dependency array in useEffect?

The dependency array tells React when to re-run the effect. An empty array runs the effect only once on mount. Omitting the array runs the effect after every render. Including values runs the effect when those values change.

26. What is useContext?

useContext allows a component to consume a context value without nesting consumers. It simplifies accessing shared data like themes or user information.

const UserContext = createContext();

function Profile() {
  const user = useContext(UserContext);
  return <h1>Welcome, {user.name}</h1>;
}

27. What is useRef?

useRef returns a mutable object whose .current property persists across renders. It is commonly used to access DOM elements or store mutable values that do not trigger re-renders.

function FocusInput() {
  const inputRef = useRef(null);
  const focus = () => inputRef.current.focus();
  return <input ref={inputRef} />;
}

28. What is useMemo?

useMemo memoizes the result of a computation so it is only recalculated when dependencies change. It is useful for expensive calculations.

const sortedList = useMemo(() => {
  return items.sort((a, b) => a - b);
}, [items]);

29. What is useCallback?

useCallback memoizes a function so it maintains the same reference across renders unless dependencies change. It is useful when passing callbacks to optimized child components.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

30. What is the difference between useMemo and useCallback?

useMemo memoizes a computed value, while useCallback memoizes a function. Both help prevent unnecessary re-renders and recalculations.

Part 4: Events, Forms & Lifecycle (Questions 31–40)

31. How do you handle events in React?

React events are named using camelCase and passed as functions rather than strings. You use synthetic events that wrap native browser events for cross-browser compatibility.

function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("Button clicked");
  };
  return <button onClick={handleClick}>Click</button>;
}

32. What are synthetic events?

Synthetic events are React's cross-browser wrappers around native browser events. They have the same interface as native events but work consistently across all browsers.

33. How do you bind methods in class components?

In class components, you need to bind event handlers to the component instance. This can be done in the constructor, using arrow functions, or with class properties.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { console.log("clicked"); }
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

34. How do you handle forms in React?

React forms typically use controlled components where form data is stored in component state. You handle changes via onChange and submissions via onSubmit.

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password}
        onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

35. What are React lifecycle methods?

Lifecycle methods are special methods in class components that run at different stages of a component's life: mounting, updating, and unmounting. Common ones include componentDidMount, componentDidUpdate, and componentWillUnmount.

36. What is the equivalent of componentDidMount in hooks?

The equivalent is useEffect with an empty dependency array, which runs only once after the initial render.

useEffect(() => {
  console.log("Mounted");
}, []);

37. What is the equivalent of componentDidUpdate in hooks?

Use useEffect with specific dependencies. The effect runs when those dependencies change.

useEffect(() => {
  console.log("Count updated:", count);
}, [count]);

38. What is the equivalent of componentWillUnmount in hooks?

Return a cleanup function from useEffect. It runs before the component unmounts or before the effect re-runs.

useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(timer);
}, []);

39. What is a key prop and why is it important?

The key prop helps React identify which items in a list have changed, been added, or removed. Keys should be unique and stable to ensure efficient reconciliation.

const items = [{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }];

function List() {
  return items.map(item => (
    <li key={item.id}>{item.name}</li>
  ));
}

40. Why should you not use array index as a key?

Using array index as a key can cause issues when items are reordered, inserted, or deleted because React may incorrectly reuse components, leading to UI bugs and performance problems. Use a unique identifier instead.

Part 5: Performance, Routing & Best Practices (Questions 41–50)

41. How do you optimize performance in React?

Use React.memo for expensive components
Use useMemo and useCallback to prevent unnecessary recalculations
Lazy load components with React.lazy and Suspense
Virtualize long lists
Avoid inline functions and objects in render
Use proper keys in lists

42. What is React.lazy?

React.lazy allows you to dynamically import components, enabling code splitting. It must be used with Suspense to provide a fallback while loading.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

43. What is React Router?

React Router is a standard library for routing in React applications. It enables navigation between different components while keeping the URL in sync with what is displayed.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

44. What is the difference between useState and useReducer?

useState is best for simple state with independent values. useReducer is better for complex state logic involving multiple sub-values or when the next state depends on the previous one.

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

45. What is an error boundary?

An error boundary is a class component that catches JavaScript errors in its child component tree, logs them, and displays a fallback UI instead of crashing the whole app.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error(error, info);
  }
  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

46. What are fragments in React?

Fragments let you group multiple elements without adding extra nodes to the DOM. You can use <React.Fragment> or the shorthand <>.

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

47. What is the difference between createElement and JSX?

JSX is syntactic sugar for React.createElement(). Both produce the same React elements, but JSX is more readable and concise. Babel compiles JSX into createElement calls.

48. How do you conditionally render components in React?

You can conditionally render using JavaScript operators like if statements, ternary operators, and logical AND (&&).

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
      {isLoggedIn && <LogoutButton />}
    </div>
  );
}

49. How do you render lists in React?

Use the .map() method to transform arrays into elements. Always provide a unique key prop to each item.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

50. What are the best practices for writing React code?

Keep components small and focused on a single responsibility
Use functional components with hooks over class components
Name components with PascalCase
Destructure props for readability
Avoid deeply nested component trees
Use PropTypes or TypeScript for type checking
Extract reusable logic into custom hooks
Keep state as close to where it is needed as possible
Write meaningful component and variable names
Test your components with tools like Jest and React Testing Library

Conclusion

Mastering these 50 React interview questions gives you a strong foundation in the concepts that entry-level developers are expected to know. From understanding the Virtual DOM and JSX to working with hooks, forms, routing, and performance optimization, each topic reflects real-world skills you will use on the job. The best way to internalize these concepts is to build small projects, experiment with code examples, and practice explaining your answers out loud. Interviewers value not just correct answers but clear reasoning and practical understanding. Keep coding, keep building, and approach each interview with confidence knowing you have prepared thoroughly.