Viva Questions

.map() returns a new array, which allows React to transform data directly into a list of JSX elements. .forEach() only iterates and returns undefined, so it cannot be used directly inside a JSX expression to render content.

In JSX, you must use 'className' instead of 'class'. This is because JSX is syntactic sugar for JavaScript, and 'class' is a reserved keyword in JavaScript (used for defining classes). Using it would confuse the transpiler.

I would use the Spread Operator (...). I would return a new object, spreading the existing state first, and then overriding the specific property, like: { ...state, email: 'new@email.com' }.

Reconciliation is the process where React updates the DOM. When state changes, React creates a new Virtual DOM tree and compares it to the previous one (diffing). It calculates the minimum number of changes required and strictly updates only those specific nodes in the real DOM, rather than re-painting the entire page.

Standard CSS stylesheets have global scope, meaning class names can clash across different components. CSS Modules are scoped locally to the component; React generates unique class names during the build to ensure styles don't leak or conflict.

Before Hooks, Functional Components were 'stateless' and could not hold their own local state or access lifecycle methods (like componentDidMount). They were primarily used just for presentation (dumb components).

State updates in React are asynchronous. When you call the setter function, React schedules a re-render, but the current closure still holds the old value. The new value will only be available in the next render cycle or inside a useEffect that watches that variable.

useMemo caches the result of a function calculation. useCallback caches the function definition itself. You choose useCallback when you pass a function as a prop to a child component (wrapped in React.memo) to prevent the child from re-rendering unnecessarily due to a new function reference being created on every parent render.

We achieve this by returning a cleanup function from inside the useEffect callback. If the dependency array is empty, this return function runs only when the component unmounts.

No, updating a useRef value (ref.current) does not trigger a re-render. It is used to persist data across renders without causing the visual update cycle that useState triggers.

No, it is not identical. React uses a 'SyntheticEvent' system. It wraps the browser's native event to ensure cross-browser compatibility and performance optimization, though the API interface looks very similar.

In a Controlled component, the form data is handled by React state (the input value is tied to state). In an Uncontrolled component, the form data is handled by the DOM itself, usually accessed via a Ref.

To prevent the browser's default behavior, which is to reload the full page. Since we are building Single Page Applications (SPAs), we want to handle the data submission via JavaScript without a page refresh.

The HTML <a> tag causes a full page refresh, reloading all CSS and JS bundles. The <Link> component utilizes the History API to change the URL and render the new component view without reloading the page, maintaining the SPA experience.

Axios offers better developer ergonomics. For example, Axios automatically transforms JSON data (so you don't need to call .json()), handles error status codes (like 404 or 500) inside the .catch() block automatically (unlike Fetch), and has built-in support for request interception.

I would define the route path with a dynamic segment, like '/product/:id'. In the destination component, I would use the useParams hook (from react-router-dom) to extract the 'id' value from the URL.

.push() mutates the original array. Redux relies on shallow equality checking (reference checks) to determine if state has changed. If you mutate the array directly, Redux won't detect the change and components won't re-render. You must return a new array copy.

The flow is strictly one-way: An Action is Dispatched from a component -> The Reducer handles the action and updates the Store -> The Store passes the new State back down to the Component.

It generates a production-ready version of the app. This includes minified JavaScript files, optimized CSS, and an index.html file. The code is transpiled and bundled so it can be deployed to a static server.

Using the array index is risky if the list can be reordered, filtered, or items can be inserted at the top. It can confuse React's reconciliation process, leading to incorrect DOM updates or bugs with component state (like input fields preserving wrong values).

Arrow functions do not have their own 'this' context; they inherit it from the parent scope. This often eliminates the need to manually bind the function in the constructor.

Destructuring allows you to unpack values from the props object directly into distinct variables. It makes the code cleaner and makes it immediately obvious which properties the component relies on without repeating 'props.name' or 'props.age'.

The 'src' folder contains the source code (components, logic, styles) that will be processed and bundled by the build tool. The 'public' folder contains static assets (like index.html, favicon, robots.txt) that are served directly without processing.

No, you cannot. JSX expressions accept JavaScript expressions (which evaluate to a value), but if-else is a statement. You must use the ternary operator (condition ? true : false) or logical AND (&&) instead.

The 'children' prop is a special prop that automatically passes whatever content is nested between the opening and closing tags of a component. It allows for component composition, whereas standard props are passed as attributes.

In React, inline styles are passed as JavaScript objects, not strings. JavaScript property names cannot contain hyphens (unless quoted), so React uses camelCase for CSS properties.

The parent passes a function (a callback) down to the child via props. The child then calls this function, optionally passing data as arguments, effectively sending data 'up' to the parent.

You should use useMemo. By wrapping the heavy calculation in useMemo and providing a dependency array, the calculation will only re-run when the dependencies change, rather than on every single render.

Hooks must only be called at the top level of the React function. They cannot be called inside loops, conditions (if-statements), or nested functions, to ensure they run in the exact same order on every render.

Passing props through 5 levels of components that don't need the data themselves is called 'Prop Drilling' and makes code hard to maintain. useContext allows the button to access the Theme value directly from the Provider, bypassing the intermediate components.

It corresponds to the 'Updation' phase (and Mounting). Without a dependency array, the effect runs after every single render of the component.

I would use useReducer when the state logic is complex (e.g., involves multiple sub-values) or when the next state depends on the previous state in a complicated way. It helps organize state transitions using specific actions (like 'INCREMENT', 'RESET').

Technically, a custom hook is just a JavaScript function that starts with 'use' and calls other hooks. No, it does not share state. It shares stateful logic. Each component that calls the custom hook gets its own isolated state instance.

The value prop must be set to the state variable, and the onChange prop must be set to a handler that updates that state.

You can add a name attribute to each input. Inside the handler, you access e.target.name and use Computed Property Names (ES6) to update the state: setState({ ...state, [e.target.name]: e.target.value }).

React will verify it as switching from an 'uncontrolled' to a 'controlled' component and will throw a warning in the console. You should always initialize state with an empty string '' rather than null/undefined for inputs.

POST is typically used to Create a new resource. PUT (or PATCH) is used to Update an existing resource.

useParams is used to get dynamic segments defined in the route path (like /users/:id). useSearchParams is used to read data from the query string after the '?' (like /search?q=react), which is not part of the route definition.

If you omit the array, the component will fetch data, update state, trigger a re-render, runs the effect again, fetch data again, and create an infinite loop that crashes the browser or spams the API.

The <Outlet /> component is used in parent route components to render their child route elements. It acts as a placeholder for where the child content should appear.

No, it does not. fetch only rejects the promise (enters .catch) on network failures (like DNS issues). A 404 is a valid HTTP response, so it enters .then(). You must manually check response.ok to handle HTTP errors.

The Store is an object that holds the entire application's state tree. It is the single source of truth for the data in a Redux app.

An Action is a plain JavaScript object that describes what happened in the application. It typically has a type property (a string constant describing the event) and an optional payload property (containing data needed for the update).

useSelector is used to read data (subscribe) from the store. useDispatch is used to get the dispatch function to trigger actions.

Reducers must be pure, synchronous functions. They take the old state and an action, and return new state immediately. Performing async logic (side effects) would break the predictable state flow. Async logic belongs in middleware (like Thunks) or the component.

React Developer Tools (or simply React DevTools).

This signals to libraries (including React) to enable optimizations. It removes development-only warnings, checks, and code blocks, making the application smaller and faster.

State is managed internally by the component itself (private), whereas Props are passed externally from a parent component (read-only).

It returns a new array containing only the elements that passed the test condition defined in the callback function.

You should use the useRef hook, assign it to the ref attribute of the element, and access the element via ref.current.