React Question

1)What is the difference between a functional component and a class component in React?

• A functional component in React is a simple JavaScript function that returns JSX and uses Hooks like useState or useEffect for state and lifecycle management. It’s easy to read and faster to write.
• A class component is the older way of building components using the ‘class’ keyword. It uses a render method and the ‘this’ keyword to show data.
• Functional components are now preferred because they make the code cleaner, simpler, and more efficient.

2)How does JSX work internally? Why do we need it instead of plain JavaScript?

• JSX stands for JavaScript XML. It allows us to write HTML-like code inside JavaScript, which makes the code easier to read and write. Internally, JSX doesn’t run directly in the browser — it’s converted by tools like Babel into normal JavaScript code using React’s createElement() function.
• We use JSX instead of plain JavaScript because it makes code easier to read, write, and maintain. Without JSX, we’d have to write long and complex JavaScript code for every element, which is harder to manage. So, JSX helps developers build user interfaces faster and more clearly.

3)What is Virtual DOM and how does React use it for rendering?

The Virtual DOM is a lightweight copy of the real DOM. When something changes in a component, React updates the Virtual DOM first, compares it with the previous version, and then updates only the parts that actually changed in the real DOM. This makes rendering faster and more efficient.

4)Explain props vs state with an example.

• Props are used to pass data from a parent component to a child component and are read-only, meaning the child can’t change them.
• State is data that is managed inside a component and can change over time, causing the component to re-render.

5)What is lifting state up in React? Give an example.
//(To Be Disscussed)
Lifting state up means moving a shared state to the closest common parent component so that multiple child components can access and update it through props.

6)If you need to store a previous state value before update, how would you handle that?

To store a previous state value before it updates, I use the useRef() hook. It keeps a mutable value that doesn’t re-render the component. I update the ref inside a useEffect after each render, and then I can access the previous state value from ref.current.

7)What is the difference between useRef and useState? When would you choose one over the other?

useState is used when we want to store data that affects the UI — updating it triggers a re-render. useRef, on the other hand, stores a mutable value that persists across renders but does not cause re-rendering. I’d use useState for things like counters or input values, and useRef for storing previous state, DOM elements, or values I don’t want to trigger a re-render.

8)How can you use useRef to focus an input field when a button is clicked?

We can use useRef to get direct access to a DOM element. By attaching the ref to an input and calling inputRef.current.focus() inside a button click handler, we can focus the input field programmatically without re-rendering the component.

9)Does changing the value of a useRef variable cause re-render? Why?

In React, useRef is a hook used to store a mutable value or directly access a DOM element without causing a re-render. When we update a useRef variable, React doesn’t re-render the component because it doesn’t track changes to the .current property. It’s mainly used to keep data between renders or to reference elements in the DOM efficiently.

12)What is the difference between using useEffect with:
no dependency array [],empty dependency array [],specific dependency [count]

• No dependency array: runs after every render.
• Empty dependency array []: runs only once after the initial render.
• Specific dependency [count]: runs on initial render and whenever the specified variable (count) changes.

15)You have a form with multiple inputs. How would you manage state for each field efficiently?
//(To Be Discussed)
When you have a form with multiple inputs, the most efficient way is to use a single state object to store all field values instead of using separate useState hooks for each input. This keeps your code scalable and easy to manage.

16)If a React component is re-rendering too many times, how would you optimize it?
//(To Be Discussed)
React component optimization means reducing unnecessary re-renders to improve performance, using techniques like React.memo, useMemo, useCallback, and splitting components.

17)Explain controlled vs uncontrolled components with useRef and useState.
//(To Be Discussed)

• Controlled components use React state (useState) to manage input values, so React is the single source of truth and can validate or manipulate input dynamically.
• Uncontrolled components use refs (useRef) to access values directly from the DOM, without updating state on every change.

Controlled → dynamic forms, validation.
Uncontrolled → simple forms, access on submit only.