React Question & Answer – DEV Community

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:

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:

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




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 
Count: {count}
;
}

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
}