React.
js Interview Questions & Answers
1. What is React?
React is a JavaScript library for building user interfaces, developed by Facebook. It enables
developers to create reusable UI components and efficiently update the UI with a virtual DOM.
2. What are the key features of React?
Some key features include:
- Component-Based Architecture
- Virtual DOM
- Unidirectional Data Flow
- JSX (JavaScript XML)
- Hooks (for functional components)
- Performance Optimization
3. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code within
JavaScript. JSX is compiled into JavaScript functions by Babel.
4. What is the difference between state and props?
- Props (short for properties) are read-only data passed from a parent component to a child
component.
- State is a local data storage for a component that can be changed using `useState` or
`this.setState`.
5. What is the virtual DOM?
The Virtual DOM is a lightweight representation of the actual DOM. React updates the virtual DOM
first, then efficiently updates only the changed parts of the real DOM, improving performance.
6. How do you update state in React?
State is updated using `useState` (in functional components) or `this.setState` (in class
components). Example:
const [count, setCount] = useState(0);
setCount(count + 1);
7. What are controlled and uncontrolled components?
- Controlled components manage form elements via React state.
- Uncontrolled components use traditional HTML form elements with refs to access values.
8. What is React Router?
React Router is a library for handling navigation in React applications. It enables dynamic route
changes without full page reloads.
9. What are React Hooks?
Hooks allow functional components to use state and lifecycle methods. Common hooks:
- `useState` (State Management)
- `useEffect` (Side Effects)
- `useContext` (Context API)
10. What is Redux?
Redux is a state management library that follows a unidirectional data flow. It consists of:
- Store (Centralized state)
- Actions (Payload of information)
- Reducers (State updates logic)
11. How do you fetch data in React?
Data fetching can be done using `fetch` or `Axios`. Example:
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
12. What are error boundaries?
Error boundaries are React components that catch JavaScript errors in the component tree and
display a fallback UI instead of crashing the application.
13. What is lazy loading?
Lazy loading improves performance by loading components only when needed. Example:
const LazyComponent = React.lazy(() => import('./Component'));
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
14. What is the difference between SSR and CSR?
- SSR (Server-Side Rendering) generates the HTML on the server before sending it to the browser.
- CSR (Client-Side Rendering) loads JavaScript in the browser, rendering content dynamically.
