This content originally appeared on DEV Community and was authored by LAKSHMI G
13)Explain controlled vs uncontrolled components with useRef and useState.
Controlled Components:
- A controlled component is one where the form data is handled by React state.
- The input value is linked to a state variable using useState, and whenever the user types, we update the state using onChange.
- This means React is in full control of the form element.
Controlled components are React-driven — the input value comes from state.
example:
const [name, setName] = useState("");
<input value={name} onChange={(e) => setName(e.target.value)} />
Uncontrolled Components
- An uncontrolled component is one where the form data is handled by the DOM itself, not React.
- We use a ref (useRef) to directly access the input’s current value when needed.
- Uncontrolled components are DOM-driven — the input value comes from the actual HTML element.
Example:
const nameRef = useRef();
<input ref={nameRef} />
console.log(nameRef.current.value);
14)If a React component is re-rendering too many times, how would you optimize it?
- If a React component is re-rendering too many times, I would first find out what’s causing the re-render, and then use optimization techniques to reduce unnecessary updates. (To be discussed)
15)You have a form with multiple inputs. How would you manage state for each field efficiently?
- In React, when a form has many input fields, instead of using a separate useState for each input,
- I use one single state object to store all field values together
- Each input uses a name attribute, and I update the state dynamically using onChange and the field name.
- This makes the code cleaner, shorter, and more efficient, especially when there are many fields.
example :
const [formData, setFormData] = useState({
name: "",
email: "",
age: ""
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value
}));
};
Each input
<input name="name" value={formData.name} onChange={handleChange} />
<input name="email" value={formData.email} onChange={handleChange} />
<input name="age" value={formData.age} onChange={handleChange} />
16)How would you clean up a timer or subscription inside useEffect? Give an example.
We clean up timers or subscriptions inside useEffect() by returning a cleanup function.
For example, if I start a timer with setInterval, I clear it using clearInterval inside the cleanup function to avoid memory leaks.
Example:
import React, { useEffect, useState } from "react";
function TimerExample() {
const [count, setCount] = useState(0);
useEffect(() => {
// set up the timer
const timer = setInterval(() => {
setCount((prev) => prev + 1);
}, 1000);
// 🔹 cleanup function
return () => {
clearInterval(timer); // stop the timer when component unmounts
console.log("Timer cleared!");
};
}, []); // run once when component mounts
return <h2>Count: {count}</h2>;
}
export default TimerExample;
17)Suppose you call an API in useEffect. Why is it bad practice to add the function itself in the dependency array?
What will happen in this code?
useEffect(() => {
console.log("Effect ran");
}, [someObj]);
If someObj is a new object each render ({}), what’s the result? How to fix it?
- If we add a function or object directly to the dependency array, React treats it as a new value every render, causing the effect to run repeatedly.
- To fix this, we memoize the object or function using useMemo or useCallback so the reference stays the same.
** Example:**
import React, { useEffect, useMemo } from "react";
function Example() {
const someObj = useMemo(() => ({}), []); // same reference every render
useEffect(() => {
console.log("Effect ran");
}, [someObj]); // now runs only once
}
This content originally appeared on DEV Community and was authored by LAKSHMI G
LAKSHMI G | Sciencx (2025-10-09T02:48:59+00:00) React Question & Answer. Retrieved from https://www.scien.cx/2025/10/09/react-question-answer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.