Interview Q&A / React

1. Can a child component modify the props it receives?

   No. Props are read-only; React treats them as immutable snapshots from the parent. To change a value, the parent passes down a callback, and the child calls it so the parent updates its own state.

   BeginnerQuick answer1 min read
2. How do createContext, Provider and useContext work together?

   createContext makes a context object with a default value. A Provider higher in the tree supplies the real value. Any component below it calls useContext(MyContext) to read the nearest provider's value, with no props passed through the middle layers.

   BeginnerQuick answer1 min read
3. How do you focus an input automatically when a component mounts?

   Attach a ref to the input with ref={inputRef}, then call inputRef.current.focus() inside a useEffect with an empty dependency array. The ref is filled only after the element is in the DOM.

   BeginnerQuick answer1 min read
4. How do you give a prop a default value in a modern function component?

   Use default values in the destructured parameters, such as function Badge({ color = 'blue' }). The default applies only when the prop is undefined, not when it is null or an empty string.

   BeginnerQuick answer1 min read
5. How do you manage several form fields with a single state object?

   Store the fields in one object and give each input a name attribute. One onChange handler reads e.target.name and e.target.value and updates that key with computed property syntax, copying the rest with spread.

   BeginnerQuick answer1 min read
6. How do you render a list in React and handle the empty case?

   Use array.map inside JSX to turn data into elements with keys. Check the array length first and show an empty-state message when there is nothing to display, instead of rendering a blank area.

   BeginnerQuick answer1 min read
7. How do you use JavaScript expressions inside JSX, and what cannot go inside the braces?

   Curly braces accept any JavaScript expression: a variable, a function call, a ternary. Statements such as if, for or switch are not expressions, so they must live outside the JSX.

   BeginnerQuick answer1 min read
8. Is it fine to use the array index as a key in a React list?

   Only when the list is static: never reordered, filtered, or inserted into. If items can move or be removed, index keys make React reuse the wrong component state and DOM, so use a stable ID from the data.

   BeginnerQuick answer1 min read
9. What are the rules of hooks, and why do they exist?

   Call hooks only at the top level of a component or custom hook, never inside loops, conditions or nested functions, and only from React functions. React tracks hooks by call order, so the order must be the same every render.

   BeginnerQuick answer1 min read
10. What causes a React component to re-render?

    A component re-renders when its own state changes, when its parent re-renders, or when a context it reads changes. Changing a prop value does not itself trigger it; the parent re-rendering does. Plain variables and refs never cause a render.

    BeginnerQuick answer1 min read
11. What does lifting state up mean in React?

    When two sibling components need the same data, you move the state to their closest common parent and pass it down as props, along with callbacks to change it. This keeps one source of truth.

    BeginnerQuick answer1 min read
12. What does React.StrictMode do?

    StrictMode is a development-only wrapper that helps find bugs. It renders components twice, re-runs effects once after mount and warns about deprecated APIs. It has no effect and no cost in production builds.

    BeginnerQuick answer1 min read
13. What does the dependency array do in useEffect?

    It tells React when to re-run the effect. No array means after every render, an empty array means once after mount, and a list of values means after renders where one of them changed, compared with Object.is.

    BeginnerQuick answer1 min read
14. What does useRef return, and does changing ref.current cause a re-render?

    It returns a mutable object { current } that stays the same across renders. Changing ref.current does not trigger a re-render, so refs suit values React does not need to display, such as timer IDs or DOM nodes.

    BeginnerQuick answer1 min read
15. What is a custom hook, and why would you write one?

    A custom hook is a function whose name starts with use and that calls other hooks. It lets you reuse stateful logic across components. Each component that calls it gets its own separate state.

    BeginnerQuick answer1 min read
16. What is code splitting and how does it make a React app load faster?

    Code splitting breaks the JavaScript bundle into smaller chunks that load on demand, for example per route. Users download only what the first screen needs, so the page becomes interactive sooner.

    BeginnerQuick answer1 min read
17. What is JSX, and how does the browser run it?

    JSX is a syntax that lets you write markup inside JavaScript. A build tool such as Babel, SWC or esbuild compiles each tag into a plain function call that returns a description of the UI. Browsers never see JSX.

    BeginnerQuick answer1 min read
18. What is the children prop in React, and when is it useful?

    children is the content placed between a component's opening and closing tags. It lets a component wrap whatever the caller supplies, which is how layouts, cards and modals stay reusable.

    BeginnerQuick answer1 min read
19. What is the difference between function components and class components, and which should you use today?

    Function components are plain functions that use hooks for state and lifecycle behaviour. Class components use this.state and lifecycle methods. New code should use function components; classes still work, and error boundaries still need a class.

    BeginnerQuick answer1 min read
20. What warning do you get if you forget the key prop in a list, and what does it cost?

    React logs a warning that each child in a list needs a unique key. It falls back to using index, so the list still renders, but reordering can cause wrong state reuse and unnecessary DOM updates.

    BeginnerQuick answer1 min read
21. When does the cleanup function returned from useEffect run?

    React runs it before the effect runs again and when the component unmounts. Use it to undo what the effect set up: clear timers, remove listeners, close connections or cancel requests.

    BeginnerQuick answer1 min read
22. Why can a React component not return two sibling elements without a wrapper?

    A function can return only one value, and JSX tags compile to one call each. Wrap siblings in a parent element or a Fragment (<>...</>), which groups them without adding an extra DOM node.

    BeginnerQuick answer1 min read
23. Why does {count && <Badge />} show 0 on the screen when count is zero?

    The && operator returns the left side when it is falsy, and React renders the number 0. Convert to a boolean first: {count > 0 && <Badge />}, or use a ternary.

    BeginnerQuick answer1 min read
24. Why does a controlled input stop accepting typing in React?

    A controlled input shows exactly what its value prop says. If you set value without an onChange that updates state, React keeps resetting it to the old value, so the field looks frozen and also warns in the console.

    BeginnerQuick answer1 min read
25. Why does JSX use className and htmlFor instead of class and for?

    JSX compiles to JavaScript, where class and for are reserved words. React therefore uses the DOM property names className and htmlFor. Most other attributes are written in camelCase too, such as onClick and tabIndex.

    BeginnerQuick answer1 min read
26. Why does my useEffect run twice in development?

    In Strict Mode, React 18 and later deliberately mounts, unmounts and remounts each component once in development to check that effects clean up properly. It does not happen in production.

    BeginnerQuick answer1 min read
27. Why must React component names start with a capital letter?

    JSX treats lowercase tags like div as built-in DOM elements and capitalised names like Card as variables that refer to components. A lowercase component name gets rendered as an unknown HTML tag instead.

    BeginnerQuick answer1 min read
28. For a simple contact form, would you use controlled or uncontrolled inputs?

    For a few fields that are only read on submit, uncontrolled inputs with FormData are enough and re-render less. Use controlled inputs when you need live validation, dependent fields, formatting as the user types or to disable the button.

    IntermediateQuick answer1 min read
29. How do you read a file from an input type file in React?

    File inputs are always uncontrolled. Read e.target.files in onChange, take the File object, and either upload it with FormData or preview it with URL.createObjectURL. You cannot set a file input's value from state.

    IntermediateQuick answer1 min read
30. How would you validate a React form without a library?

    Keep values and an errors object in state. Write a validate function that returns errors from the values, run it on submit (and optionally on blur), call preventDefault, and submit only when the errors object is empty.

    IntermediateQuick answer1 min read