General React Basics

Q1: What is React, and why is it used in web development?

A1: React is a JavaScript library used for building user interfaces, especially for single-page
applications (SPAs). It allows for the creation of reusable UI components and efficiently
updates the view when data changes.

Q2: What is JSX, and how does it work in React?

A2: JSX (JavaScript XML) is a syntax extension for JavaScript that allows HTML-like code to be
written inside JavaScript. It is then transformed into regular JavaScript by a compiler (like
Babel). React uses JSX to describe what the UI should look like.

React Components

Q3: What are components in React?

A3: Components are the building blocks of React applications. They are JavaScript functions
or classes that return JSX and define how a UI should look and behave.

Q4: What is the difference between a functional component and a class-based component?

A4: A functional component is a simple JavaScript function that returns JSX. A class-based
component, on the other hand, is a JavaScript class that extends React.Component and has
additional features like lifecycle methods and state management (prior to React 16.8).

Q5: What is the purpose of the render() method in class-based components?

A5: The render() method is required in class-based components and is used to return the JSX
that defines the UI of the component.

State and Props

Q6: What are props in React?

A6: Props (short for properties) are used to pass data from a parent component to a child
component in React. They are read-only and help customize the child component’s behavior
or appearance based on the parent's data.

Q7: What is state in React, and how does it differ from props?

A7: State is a built-in object in React that holds data that may change over time. Unlike
props, which are passed from parent to child, state is local to the component and can be
modified by that component using the setState() method (in class components) or the
useState hook (in functional components).
Q8: How do you update the state in a React component?

A8: In class components, state is updated using this.setState(). In functional components,

Event Handling and Forms

Q9: How do you handle events in React?

A9: In React, events are handled by attaching event handlers to JSX elements (e.g., <button
onClick={handleClick}>Click Me</button>). The handler function is called when the event
occurs, and it can modify the component's state or trigger other actions.

Q10: How do you handle form inputs in React?

A10: Form inputs in React are handled using controlled components. This means that the
form data is bound to the component’s state. The value of the input field is controlled by
state, and changes are handled by event handlers that update the state.

Hooks

Q11: What are hooks in React?

A11: Hooks are functions that allow functional components to have side effects, manage
state, and use other React features. useState and useEffect are the most commonly used
hooks.

Q12: What is the useState hook used for?

A12: The useState hook is used to add state to functional components. It allows you to
declare state variables and update them within the component.

Q13: What is the useEffect hook, and what is it used for?

A13: The useEffect hook is used to perform side effects in functional components, such as
fetching data, subscribing to external services, or updating the DOM. It is called after the
component renders.

Lifecycle Methods (Class Components)

Q14: What are lifecycle methods in React?

A14: Lifecycle methods are special methods in class-based components that are called at
specific points during a component's life. Common lifecycle methods include
componentDidMount(), componentDidUpdate(), and componentWillUnmount().
Q15: What does the componentDidMount method do?

A15: The componentDidMount method is called once a component has been rendered and
mounted to the DOM. It is often used to fetch data or initialize resources.

React Router

Q16: What is React Router, and why is it used?

A16: React Router is a library for implementing routing in React applications. It allows
navigation between different views or components based on the URL, enabling single-page
applications (SPAs) to have multiple pages.

Q17: How do you define routes in React using React Router?

A17: Routes in React Router are defined using the Route component, which maps a URL path
to a specific component. For example: <Route path="/home" component={Home} />.

Handling Errors and Debugging

Q18: How can you handle errors in a React component?

A18: Errors in React can be handled using Error Boundaries, which are special components
that catch JavaScript errors in their child components and display a fallback UI instead of
crashing the application.

Q19: What is an "Error Boundary" in React?

A19: An Error Boundary is a component that catches JavaScript errors anywhere in its child
component tree, logs those errors, and displays a fallback UI. It is implemented using the
componentDidCatch lifecycle method in class components.

Styling in React

Q20: How do you style React components?

A20: React components can be styled using external CSS files, inline styles, or CSS-in-JS
libraries like styled-components. Inline styles are objects in JavaScript, and CSS-in-JS allows
for dynamic styling within the component.

Q21: What are the advantages of using CSS Modules in React?

A21: CSS Modules provide locally scoped styles, meaning that class names are automatically
scoped to the component, avoiding global CSS conflicts and making the styles more modular
and reusable.
Q22: What is the purpose of keys in React lists?

A22: Keys are used in React lists to uniquely identify each element in the list. This helps
React optimize re-rendering by tracking changes to individual items, improving performance.

Q23: What is Virtual DOM in React?

A23: The Virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize
rendering by only updating the parts of the UI that have changed, instead of re-rendering
the entire page.

Q24: What is the purpose of useRef in React?

A24: The useRef hook is used to create a reference to a DOM element or a value that
persists between renders. It is often used for accessing DOM elements directly or for storing
mutable values without causing a re-render.