React is a JavaScript library used to build user interfaces, especially single-page applications.

React is used to build reusable UI components, manage dynamic data, and create fast and interactive web applications.

A component is a reusable piece of UI. It can display content and handle logic independently.

JSX stands for JavaScript XML. It allows us to write HTML-like code inside JavaScript.

Functional components are simple JavaScript functions. Class components use ES6 classes. Today, functional components are more commonly used.

Props are inputs passed from parent component to child component. They are used to send data.

State is used to store data that can change inside a component and update the UI when changed.

Props are passed from parent to child and are read-only. State is managed inside the component and can be changed.

An event in React is an action like click, change, submit, or mouseover handled using event handlers.

Virtual DOM is a lightweight copy of the real DOM. React uses it to update only the changed parts efficiently.

useState is a React Hook used to create and manage state in functional components.

useEffect is a Hook used to handle side effects such as API calls, subscriptions, and DOM updates.

The dependency array controls when the effect runs. If it is empty, the effect runs once after initial render.

Conditional rendering means showing different UI based on conditions using if, ternary operator, or logical operators.

List rendering means displaying multiple items using methods like map().

Keys help React identify which list items changed, added, or removed, making updates faster and more accurate.

Lifting state up means moving shared state to the nearest common parent so multiple child components can use it.

A controlled component is a form element whose value is managed by React state.

An uncontrolled component stores form data in the DOM instead of React state, usually accessed with refs.

React Fragment is used to group multiple elements without adding extra nodes to the DOM.

useRef is used to access DOM elements directly or store mutable values without causing re-render.

useMemo is used to memoize expensive calculations so they do not run on every render unnecessarily.

useCallback is used to memoize functions so the same function reference can be reused between renders.

React Router is a library used for navigation between pages or views in a React application.

Client-side routing changes views without reloading the page. Server-side routing loads a new page from the server for each route.

Context API is used to share data across components without passing props manually through every level.

Prop drilling means passing props through multiple nested components even when intermediate components do not need them.

Lazy loading means loading components only when needed, improving application performance and initial load time.

React.memo is used to prevent unnecessary re-rendering of a component when its props do not change.

useEffect runs after the browser paints the screen. useLayoutEffect runs before the browser paints.

I optimize performance by using memoization, lazy loading, proper key usage, splitting components, avoiding unnecessary re-renders, and managing state efficiently.

Unnecessary re-rendering can happen because of frequent state changes, parent re-renders, new object or function references, and improper component structure.

Reconciliation is the process React uses to compare the new virtual DOM with the previous one and update the real DOM efficiently.

A higher-order component is a function that takes a component and returns a new enhanced component.

A custom hook is a reusable JavaScript function that uses React Hooks to share logic between components.

Forms are handled using controlled components, state management, validation, and submit handlers.

API calls are commonly made inside useEffect using fetch or libraries like Axios.

Errors can be handled using try-catch for async code, proper validation, conditional rendering, and error boundaries for component errors.

An error boundary is a React component used to catch JavaScript errors in child components and show fallback UI.

State management libraries like Redux or Zustand help manage shared and complex application state more clearly in large projects.

No. React is a JavaScript library for building user interfaces.

No. Props are read-only. A child component should not modify them directly.

Yes, usually state updates trigger re-render, but React may optimize and batch updates in some cases.

No. Hooks should always be called at the top level of a React function component or custom hook.

No. The key prop is used internally by React and is not directly accessible inside the child component.