Interview Q&A / React

1. What is the difference between controlled and uncontrolled components in React?

   In a controlled component, React state holds the input's value and every change goes through an onChange handler. In an uncontrolled component, the browser DOM keeps the value and you read it when needed, for example with a ref or from the form data on submit.

   BeginnerIn-depth3 min read
2. What is the difference between state and props in React?

   Props are inputs passed into a component by its parent and are read-only inside it. State is data a component owns and can change over time, and changing it makes the component re-render.

   BeginnerIn-depth3 min read
3. What is the virtual DOM, and how does reconciliation work in React?

   The virtual DOM is React's lightweight description of what the UI should look like, made of plain JavaScript objects. On each update React compares the new description with the previous one (reconciliation) and changes only the parts of the real DOM that differ.

   BeginnerIn-depth4 min read
4. Why do keys matter when rendering lists in React?

   Keys tell React which list item is which between renders, so it can keep the right state with the right item when the list changes order, grows or shrinks.

   BeginnerIn-depth2 min read
5. What is the difference between useMemo and useCallback, and when should you not use them?

   useMemo caches the result of a calculation, and useCallback caches a function itself, both until their dependencies change. Use them for expensive calculations or to keep values stable for memoized children or effect dependencies; skip them for cheap work, where they only add complexity.

   IntermediateIn-depth3 min read
6. When should you use Context instead of prop drilling or a state management library?

   Pass props when only a few levels need the data. Use Context for values many components read but that change rarely, such as theme, language or the logged-in user. Reach for a state library when shared state is large, updates often, or needs tools like selectors and devtools.

   IntermediateIn-depth3 min read
7. When should you use useEffect, and when should you avoid it?

   Use useEffect to sync your component with something outside React, such as a network request, a subscription or a browser API. Avoid it for work you can do during rendering or inside an event handler.

   IntermediateIn-depth2 min read
8. What is the difference between React Server Components and Client Components?

   Server Components run only on the server, can read data directly and send no JavaScript for themselves to the browser. Client Components, marked with "use client", are also rendered to HTML first but then run in the browser, so they can use state, effects and event handlers.

   AdvancedIn-depth3 min read