Top 30 Interview Questions and Answers for Senior Web Developers with React.js

1.What is React ?

Answer: React is a front-end JavaScript library for building user interfaces, particularly single-page web applications. It uses a component-based declarative state-driven architecture, which allows for reusable and maintainable UI components. Key features include:

Virtual DOM for better performance
Component-based architecture
JSX syntax
Rich ecosystem of libraries
Reusable UI components
Strong community support
React Hooks for state management
Server-side rendering capabilities (Next.js, Remix)
Cross-platform development support (React Native)
SEO-friendly when used with proper tools
Easy integration with other libraries
Developer tools for debugging (React DevTools)
Large scale application support
Declarative UI programming

2. Explain how the Virtual DOM works in React.js

Answer: The Virtual DOM is an in-memory representation of the actual DOM. When a state change occurs in a React component, React first updates the Virtual DOM and then compares it with the previous Virtual DOM (using a process called “diffing”). React only applies the differences to the real DOM, optimizing updates.

Here’s a simple example demonstrating state updates with Virtual DOM:

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, when the button is clicked:

The state updates trigger a new Virtual DOM creation
React compares the new Virtual DOM with the previous one
Only the h1 content needs to update, so React efficiently updates just that part in the real DOM

3. What are React Hooks, and why were they introduced?

Answer: Hooks were introduced to allow developers to use state and other React features in functional components without needing to convert them into class components. Common hooks include useState, useEffect, useContext, etc.

Here’s a simple example using the useState hook:

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Key benefits of Hooks:

Reuse stateful logic between components
Simplify complex components by separating concerns
Avoid class component complexity (this binding, lifecycle methods)
Enable better code organization and reusability
Reduce the need for higher-order components and render props
Make it easier to test and maintain components

4. How do you manage state in React applications?

Answer: State in React applications can be managed through several approaches, each suited for different scenarios:

Local State Management:
- Using useState hook for component-level state
- Ideal for component-specific data

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Global State Management:
- Using Context API for sharing state between components
- Useful for avoiding prop drilling

const AppContext = React.createContext();

function AppProvider({ children }) {
  const [globalState, setGlobalState] = useState({});

  return (
    <AppContext.Provider value={{ globalState, setGlobalState }}>
      {children}
    </AppContext.Provider>
  );
}

Third-party State Management:
- Redux for large-scale applications
- MobX for reactive state management
- Zustand for simple state management
- Recoil for atomic state management

5. Explain the Context API and its typical use cases

Answer: The Context API provides a way to pass data through the component tree without passing props manually at every level. It’s useful for global data like user authentication, theme preferences, or language settings.

Here’s an example demonstrating Context API usage:

const ThemeContext = React.createContext("light");

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

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

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button className={theme}>Button</button>;
}

Common use cases for Context API:

Theme management
User authentication state
Language/localization preferences
Global UI state
Application configuration
User preferences
Shared data across multiple components
Avoiding prop drilling in deeply nested components

6. How does React’s component lifecycle work, and how has it changed with the introduction of hooks?

Answer: React’s component lifecycle has evolved significantly with the introduction of hooks. In class components, lifecycle methods provided specific points to handle component mounting, updating, and unmounting. With hooks, particularly useEffect, we can achieve the same functionality in functional components more flexibly.

Here’s a comparison of lifecycle methods and their hook equivalents:

Class Component Lifecycle:

class MyComponent extends React.Component {
  componentDidMount() {
    // Called after component mounts
  }

  componentDidUpdate(prevProps, prevState) {
    // Called after component updates
  }

  componentWillUnmount() {
    // Called before component unmounts
  }

  render() {
    return <div>Component Content</div>;
  }
}

Functional Component with Hooks:

function MyComponent() {
  useEffect(() => {
    // componentDidMount logic
    console.log("Component mounted");

    // componentWillUnmount logic
    return () => {
      console.log("Component will unmount");
    };
  }, []); // Empty dependency array = run once on mount

  useEffect(() => {
    // componentDidUpdate logic
    console.log("Component updated");
  }); // No dependency array = run on every update

  return <div>Component Content</div>;
}

Key differences and advantages of hooks:

More flexible control over side effects
Better separation of concerns
Ability to reuse stateful logic
Simpler mental model for handling lifecycle events
Reduced code duplication
Better handling of edge cases
More predictable behavior
Easier testing and maintenance

7. What are the differences between controlled and uncontrolled components in React?

Answer: Controlled and uncontrolled components represent two different approaches to handling form inputs in React. The main difference lies in how the form data is managed.

Controlled Components:
- Form data is controlled by React state
- More predictable but requires more code
- Provides immediate access to form values
- Enables instant validation and conditional rendering

function ControlledForm() {
  const [value, setValue] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form submitted with value:", value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Controlled input"
      />
      {/* Immediate validation example */}
      {value.length < 3 && <span>Value must be at least 3 characters</span>}
    </form>
  );
}

Uncontrolled Components:
- Form data is handled by the DOM itself
- Uses refs to access values when needed
- Less code but harder to implement validation
- Better performance for simple forms

function UncontrolledForm() {
  const inputRef = React.useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form submitted with value:", inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={inputRef}
        defaultValue="Default value"
        placeholder="Uncontrolled input"
      />
    </form>
  );
}

Key considerations for choosing between controlled and uncontrolled components:

Use Controlled Components When:
- Need immediate field validation
- Need to enforce input formats
- Need to conditionally disable submit button
- Need to implement instant search
- Need to dynamically change input values
Use Uncontrolled Components When:
- Building simple forms
- Integrating with non-React code
- Performance is a concern
- Working with file inputs
- Form data is only needed on submit

8. How would you optimize the performance of a React application?

Answer: There are several key strategies to optimize React performance:

Code Splitting:

// Load components only when needed
const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

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

Prevent Unnecessary Re-renders:

// Use React.memo for pure components
const MovieCard = React.memo(({ title, rating }) => (
  <div>
    <h3>{title}</h3>
    <span>{rating}/10</span>
  </div>
));

// Use proper keys in lists
function MovieList({ movies }) {
  return movies.map((movie) => (
    <MovieCard key={movie.id} title={movie.title} rating={movie.rating} />
  ));
}

Optimize Heavy Computations:

function MovieFilter({ movies }) {
  // Cache expensive calculations
  const topRatedMovies = useMemo(
    () => movies.filter((movie) => movie.rating > 8),
    [movies]
  );

  // Cache callbacks
  const handleSort = useCallback(() => {
    // sorting logic
  }, []);

  return <div>{/* render movies */}</div>;
}

Additional Quick Tips:
- Use production builds
- Implement lazy loading for images
- Use pagination or virtual scrolling for long lists
- Keep component state local when possible
- Avoid inline function definitions in renders
- Use Chrome DevTools and React Profiler to identify bottlenecks

Remember: Always measure performance before and after optimization to ensure your changes actually improve the application.

9. What is Prop Drilling, and how can it be avoided in React?

Answer: Prop drilling is when you pass props through multiple intermediate components that don’t need the data, just to get it to a deeper component. It’s like passing a bucket down through many people just to reach the last person who actually needs it.

Here’s a simple example of prop drilling:

// Prop Drilling Problem
function App() {
  const [user] = useState({ name: "John" });
  return <ComponentA user={user} />;
}

function ComponentA({ user }) {
  // ComponentA doesn't need user, just passes it down
  return <ComponentB user={user} />;
}

function ComponentB({ user }) {
  // ComponentB doesn't need user either
  return <ComponentC user={user} />;
}

function ComponentC({ user }) {
  // Finally, ComponentC actually needs the user
  return <div>Hello, {user.name}!</div>;
}

Two main solutions to avoid prop drilling:

Using Context API (Recommended for small-medium apps):

// Create context
const UserContext = React.createContext();

// Wrap parent with Provider
function App() {
  const [user] = useState({ name: "John" });
  return (
    <UserContext.Provider value={user}>
      <ComponentA />
    </UserContext.Provider>
  );
}

// Use data directly in any child component
function ComponentC() {
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

Using Redux or other state management (For larger apps):

function ComponentC() {
  const user = useSelector((state) => state.user);
  return <div>Hello, {user.name}!</div>;
}

Key benefits:

Cleaner code
Easier to maintain
Better component reusability
Simpler debugging

10. What is the significance of keys in React, and how do they work in lists?

Answer: Keys help React identify which items in a list have changed, are added, or are removed, thus optimizing re-renders. Keys should be unique and stable.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

11. How do you handle side effects in React components?

Answer: Side effects such as data fetching or subscriptions are handled using the useEffect hook.

useEffect(() => {
  // Data fetching or subscription
  return () => {
    // Clean-up subscription if necessary
  };
}, []); //  Empty dependency array to run only on mount

12. What are Higher-Order Components (HOCs) in React, and when should you use them?

Answer: HOCs are functions that take a component and return a new component, useful for reusing component logic.

function withLoading(Component) {
  return function LoadingWrapper({isLoading})
    if (isLoading) return <div>Loading...</div>;
    return <Component {...props} />;
  };

13. What is React.memo, and how does it help with performance optimization?

Answer: React.memo is a higher-order component that prevents a functional component from re-rendering if its props haven’t changed.

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

14. What is Server-Side Rendering (SSR) in React, and what are its benefits?

Answer: SSR renders React components on the server and sends the fully rendered HTML to the client. It improves SEO and speeds up the initial load.

15. What is JSX?

Answer: JSX stands for JavaScript XML. It allows writing HTML inside JavaScript and makes the code easier to understand and debug.

const element = <h1>Hello, world!</h1>;

16. What is the difference between props and state?

Answer: Props are read-only and passed down from parent components, while state is managed within a component and can be updated using setState() or useState() hook.

17. What is the difference between useMemo and useCallback?

Answer: useMemo memorizes a computed value, while useCallback memorizes a function reference.

// useMemo example
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// useCallback example
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

18. What is the purpose of useRef?

Answer: useRef is used to persist values between renders and to directly access DOM elements. Unlike state, updating a ref doesn’t cause a re-render.

const inputRef = useRef(null);
const focusInput = () => {
  inputRef.current.focus();
};

19. How is Redux toolkit used with React?

Answer: Redux is a state management library. It stores the global state in a single store and allows components to access and update it via actions and reducers.

// Create a slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 }
  }
});

// Use in component
function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Count: {count}
    </button>
  );
}