Beginner React Interview Questions – Set 3

What are hooks in React?

Functions that let functional components use state and other React features.

Can you use hooks in class components?

No, hooks work only in functional components.

What is useReducer?

A hook for managing complex state with reducers, similar to Redux.

Difference between useState and useReducer?

useState is for simple state; useReducer is better for complex logic.

What is useContext?

A hook to access React context without prop drilling.

How do you share state globally in React?

Using Context API or state management libraries like Redux.

What is React Context API?

A way to pass data through the component tree without using props manually at every level.

How to fetch data in React?

Using fetch or axios inside useEffect.

How to handle errors in fetch requests?

Using .catch() or try-catch in async/await.

What is lazy loading in React?

Loading components only when needed using React.lazy and Suspense.

Difference between React.lazy and code splitting?

React.lazy is a tool for code splitting components on-demand.

What is memoization in React?

Optimizing performance by caching component output using React.memo or useMemo.

Difference between useMemo and useCallback?

useMemo caches values; useCallback caches functions.

What is useRef?

A hook to hold mutable values or access DOM elements directly.

Can you update state immediately after calling setState?

No, setState is asynchronous; you can use useEffect to track changes.

What is prop-types in React?

A library to validate props passed to components.

How do you prevent unnecessary re-rendering?

Using React.memo, useMemo, useCallback, or PureComponent.

What is the difference between server-side rendering and client-side rendering?

SSR renders HTML on the server; CSR renders on the client.

Can you update multiple states together?

Yes, by calling multiple setState or using an object in useState.

How to handle multiple side effects?

Using multiple useEffect hooks for each effect.

What is StrictMode in React?

A wrapper component for highlighting potential problems in development.

How do you optimize React app performance?

Using memoization, code splitting, lazy loading, PureComponent, and avoiding unnecessary renders.

How do you pass data from child to parent?

By passing a callback function as a prop from parent to child.

What is reconciliation in React?

The process by which React updates the DOM efficiently using the virtual DOM.

Can React work with TypeScript?

Yes, React supports TypeScript for type safety.

Difference between useEffect cleanup and componentWillUnmount?

useEffect cleanup runs before unmounting or before next effect; componentWillUnmount is only before unmount.

How do you create a React project?

Use create-react-app or Vite.

npx create-react-app my-app

What is the purpose of the public folder in a React app?

The public folder contains static assets like index.html, images, or favicon that are served directly.

What is the src folder in a React app?

The src folder contains the source code, including components, styles, and JavaScript files.

How do you import a component in React?

import Welcome from './Welcome';

What is the purpose of App.js?

App.js is the main component of a React app, serving as the root component rendered in index.js.

How do you pass multiple props to a component?

Pass them as separate attributes.

<User name="Alice" age={25} />

How do you debug a React app?

Use browser developer tools, React Developer Tools, or console.log to inspect components and state.

How do you conditionally apply a CSS class in React?

<div className={`box ${isActive ? 'active' : ''}`}>Content</div>

What is the purpose of the package.json file?

Defines project metadata, dependencies, and scripts for a React app.

How do you add a third-party library to a React project?

Install it using npm or yarn and import it.

npm install axios

What is the purpose of the node_modules folder?

It contains all the dependencies installed for the project.

How do you handle form submission in React?

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };
  return <form onSubmit={handleSubmit}><button>Submit</button></form>;
}

What is the purpose of ESLint in a React project?

ESLint enforces coding standards and catches potential errors in JavaScript code.

How do you make a component reusable?

Use props to make the component configurable and avoid hardcoding values.

What is the difference between export default and export?

Export default exports a single default module, while export allows multiple named exports.

How do you handle asynchronous operations in React?

Use async/await inside useEffect or event handlers for tasks like API calls.

What is a React portal?

A portal allows rendering a component’s content into a different DOM node, useful for modals or popups.

What is the Suspense component?

Suspense displays a fallback UI (like a loader) while lazy-loaded components or data are loading.

How do you handle errors in React?

Use error boundaries in class components or try-catch in async operations.

What is an error boundary?

A component that catches JavaScript errors in its child component tree and displays a fallback UI.