1. What is React and why would you use it?

React is a JavaScript library for building interactive user interfaces. Instead of dealing with the whole page, you break your UI into reusable components like. I use it because it keeps things organized, makes updates efficient, reduce code duplication and has a huge ecosystem and is supported by facebook.

2. What’s the difference between a class component and a functional component?

• Class components use ES6 class syntax while functional components use plain function syntax.
• Class component has it’s own state while functional component use useState hook for managing state
• Class component has error boundary to catch errors but for functional components we need use install and use external packages like “react-error-boundary”

3. What are hooks in React?

Hooks are functions that let allow us to use features that were only available in class components. before introducing hooks into react we were forced to use class components for lifecycle methods, side effects and state management. but since hooks introduced we can use state management by useState hook, side effects by useEffect hooks etc. a hook must start with “use” and it should not be used in loops or outside the components.

4. What is useState and how does it work?

useState hook is used to manage state in react functional components. its a function which returns the current state data and a setter function to update the data

• The current state (example:  count)
• A function to update it (example: setCount)

const [count, setCount] = useState(0);  

Every time you call setCount, React re-renders the component with the new value.

5. What is useEffect used for?

useEffect hook is used for managing side effects in our app. that is for example fetching some data from an API when page loads, show a confirmation modal when closing a form, to show a coundown timer etc. it is also used for manipulating dom and setting firebase/websocket subscriptions.

6. What is JSX?

JSX stands for Javascript XML. It is a syntax extension used in react applications to write HTML and CSS code inside Javascript (React). It uses React.createElement() in under the hood. JSX makes react code to read and write more easier.

return <h1>Hello, {name}!</h1>;  

7. What is the difference between controlled and uncontrolled components ?

• Controlled components: React manages the state of forms using useState.
• Uncontrolled components: The DOM manages the state using useRef hook or DOM methods (document.getElementById).

8. What are keys in React, and why are they important?

Keys help React track which items in a list have changed. Without them, React might re-render the entire list (slow!). Always use a unique key (like an id) to improve rendering performance. avoid array indexes unless you have no choice.

9. What is lifting state up?

When multiple components need the same state, you move the state up to their closest shared parent and pass it down via props to the child components. Keeps things DRY(Don’t Repeat Yourself) and avoids sync issues.

10. What is prop drilling and how do you avoid it?

Prop drilling is when you pass data through a numerous components just to reach a deeply nested child component. It works, but it’s make code more complex and messy. Solutions for prop drilling are below:

• Context API (useContext hook)
• External state management libraries (Redux, Zustand, etc.)

11. How does the Virtual DOM work?

Instead of updating the real DOM directly, React creates a lightweight copy of Virtual DOM and then it compares it with the previous virtual DOM copy using difing algorithm. this identifies changes and only those changes are updated in the real DOM

12. What is React Context API?

Context API also known as useContext hook lets you share data across components without passing props manually. Great for global state, but overkill for simple cases. In simple terms it is used for global state management for simple to medium react apps. it wraps the entire app with the context-provider to provide global state data to all components independently.

13. What is the difference between useEffect and useLayoutEffect hook?

• useEffect hook runs after the browser paints (good for most side effects).
• useLayoutEffect hook runs before painting (use for layout measurements/visual tweaks).

14. What is memoization in React?

Memoization is a performance optimization method skipping unnecessary re-renders by caching results. It reduce unnecessary re-renders of components. useMemo, useCallback hooks and React.memo higher order function are used for memoization.

• React.memo  memoizes a component.
• useMemo memoizes a calculated value.
• useCallback memoizes a function.

15.  What is the difference between useMemo and useCallback ?

useMemo is used to caches the result of an expensive/complex function.

const sortedList = useMemo(() => sortList(items), [items]))

useCallback hook is used to caches the function itself to avoid re-rendering/recalculation of the function

const handleClick = useCallback(() => {...}, [deps]))

Both useMemo and useCallback prevent unnecessary recalculations and improve performance if used wisely.

16. How do you handle forms in React?

In react for simple forms, I use controlled components by integrating useState with inputs. For complex forms, i use libraries like React Hook Form or Formik to save time to do advance validations and error management.

17. How do you handle error boundaries?

Error boundaries catch JavaScript errors in child components. In class components we use componentDidCatch to manage error boundary. but for functional components there is no error boundary, so we should install external packages like react-error-bhttps://www.npmjs.com/package/react-error-boundaryoundary to manage error boundary.

18. What are Higher-Order Components (HOC)?

A HOC is a function that takes a component and returns an enhanced version (like adding extra props or logic). It is used for reusing component logic. Example:

const withAuth = (Component) => (props) => {  
  if (!user.isLoggedIn) return <Login />;  
  return <Component {...props} />;  
};  

19. What are React Fragments?

React fragments let you group multiple elements without adding a DOM wrapper (no extra <div>s needed to wrap multiple child components): React fragments is used by arrow brackets (<> </>) or <React.Fragment> element.

<>  
  <h1>Title</h1>  
  <p>Content</p>  
</>  

20. What is the difference between Client-side vs server-side rendering?

• CSR: The browser builds the UI (slower initial load, but smoother after).
• SSR (Example: Next.js): The server sends pre-rendered HTML to client side (faster load, better SEO).