React Interview Questions - Intermediate Level

React Interview Questions – Intermediate

Here are 20 React interview questions for intermediate-level developers, designed to test your understanding of React’s core concepts and advanced features.

1. What is the significance of React keys, and why should they be unique?

React keys are unique identifiers for elements in a list. They help React identify which items have changed, been added, or removed, improving rendering performance. Keys must be unique among siblings but do not need to be globally unique.

2. What is the difference between useEffect and useLayoutEffect?

useEffect: Executes after the render phase and is not blocking. It is commonly used for data fetching or subscriptions.
useLayoutEffect: Executes synchronously after DOM mutations but before the browser paints. It is used for measuring or mutating the DOM.

3. How do you optimize performance in a React application?

To optimize performance, you can:

Use React.memo for functional components to prevent unnecessary re-renders.
Utilize the useCallback and useMemo hooks for caching functions and values.
Implement code splitting with React.lazy and Suspense.
Optimize state management by lifting state up or using context efficiently.

4. Explain React portals and their use cases.

React portals allow you to render children into a DOM node outside the parent component hierarchy. They are useful for modals, tooltips, or overlays where DOM structure and styling may require isolation.

</>

Copy

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

5. How does the Context API differ from Redux?

Both Context API and Redux manage state, but:

Context API: Suitable for sharing state between components in a tree without passing props manually. It is lightweight and built into React.
Redux: A state management library for more complex applications, offering a predictable state container and middleware for handling side effects.

6. What are higher-order components (HOCs)?

HOCs are functions that take a component and return a new component with added functionality. They are used for reusing component logic like authentication or logging.

</>

Copy

function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
}

7. What are React refs, and how are they used?

Refs provide a way to access DOM elements or class component instances directly. They are created using React.createRef or useRef in functional components.

</>

Copy

function TextInput() {
  const inputRef = useRef();

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

8. What are controlled and uncontrolled components?

Controlled components: Form elements where the value is managed by React state using props like value and onChange.

Uncontrolled components: Form elements where the value is managed by the DOM and accessed using refs.

9. What is React Suspense?

React Suspense allows you to handle the rendering of components that rely on asynchronous data fetching. It works with React.lazy for code splitting.

10. Explain the useReducer hook and its advantages.

The useReducer hook is an alternative to useState for managing complex state logic. It uses a reducer function to handle state transitions based on dispatched actions.

</>

Copy

const initialState = { count: 0 };

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

const [state, dispatch] = useReducer(reducer, initialState);

11. How does React handle events differently from the DOM?

React uses a synthetic event system to wrap native DOM events, ensuring cross-browser compatibility. Events in React use camelCase (e.g., onClick instead of onclick).

12. What is code splitting in React?

Code splitting is a technique to improve performance by splitting the application code into smaller chunks that are loaded dynamically as needed, often implemented using React.lazy and Suspense.

13. What is the purpose of PropTypes?

PropTypes is a type-checking library built into React to validate the types of props passed to a component, ensuring proper usage and debugging during development.

14. What is React.memo?

React.memo is a higher-order component that memoizes the output of a functional component, preventing unnecessary re-renders if the props remain unchanged.

15. What is reconciliation in React?

Reconciliation is React’s process of updating the DOM by comparing the current and previous virtual DOM trees and applying only the necessary changes to the real DOM.

16. What are render props in React?

Render props is a pattern where a component uses a prop to pass a function that determines what to render, enabling reusable logic between components.

17. How do you handle errors in React?

Errors in React can be handled using Error Boundaries, which catch JavaScript errors in their child component tree and display a fallback UI.

18. What is hydration in React?

Hydration is the process of React attaching event listeners and restoring the state to a server-rendered HTML, enabling a fully interactive application on the client side.

19. What is the difference between React and React Native?

React: A library for building web applications using components and a virtual DOM.
React Native: A framework for building mobile applications using React concepts but renders native UI components.

20. What is the purpose of the React Profiler?

The React Profiler is a development tool that helps measure the rendering performance of components, identifying bottlenecks and optimizing the app’s performance.

TutorialKart

React Interview Questions – Intermediate