React interview questions and answers

// Option A:
{hasError && <Alert />}

// Option B:
{hasError ? <Alert /> : null}

// Option C:
{hasError ? <Alert /> : undefined}

// Option D: All of the above

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus(); // (A)
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus</button>
    </>
  );
}

function CartSummary({ items }) {
  // Is this state or derived?
  const [total, setTotal] = useState(0);

  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price * item.quantity, 0));
  }, [items]);

  return <p>Total: ${total}</p>;
}

const CounterContext = createContext(0); // default: 0

function CounterDisplay() {
  const count = useContext(CounterContext);
  return <p>Count: {count}</p>;
}

// Scenario A: Wrapped in Provider:
<CounterContext.Provider value={42}>
  <CounterDisplay /> {/* count = ? */}
</CounterContext.Provider>

// Scenario B: Not wrapped:
<CounterDisplay /> {/* count = ? */}

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={`btn-${theme}`}>Click</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

// ❌ Unoptimized:
<img src="/hero.png" />  {/* 2MB PNG */}

// ✅ Better (Next.js Image component):
import Image from "next/image";
<Image src="/hero.png" width={800} height={600} alt="Hero" priority />

// ✅ Without Next.js:
<img
  src="/hero-800.webp"
  srcSet="/hero-400.webp 400w, /hero-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="Hero"
/>

function App() {
  const [theme, setTheme] = useState("light");
  const [user, setUser] = useState(null);
  const [locale, setLocale] = useState("en");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        <LocaleContext.Provider value={{ locale, setLocale }}>
          <AppContent />
        </LocaleContext.Provider>
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

// Option A:
<button onClick={handleClick()}>Click</button>

// Option B:
<button onClick={handleClick}>Click</button>

// Option C:
<button onClick={() => handleClick()}>Click</button>

// Option D: B and C are both correct

// Option A:
function Component({ isAdmin }) {
  if (isAdmin) {
    const [role, setRole] = useState("admin"); // ❌?
  }
  return <div />;
}

// Option B:
function Component({ isAdmin }) {
  const [role, setRole] = useState(isAdmin ? "admin" : "user"); // ✅?
  return <div />;
}

function UserProfile({ user }) {
  // ❌ Anti-pattern: copying props into state
  const [displayName, setDisplayName] = useState(user.firstName + " " + user.lastName);

  return <h2>{displayName}</h2>;
}

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => { setData(data); setLoading(false); });
  }, [url]);

  return { data, loading };
}

// Usage:
const { data, loading } = useFetch("/api/users");

// Scenario: Shopping cart
// - Cart icon in Header shows item count
// - Cart page shows all items
// - Checkout page reads cart total
// - Product cards have "Add to cart" button

// useState in each component? Or Zustand?

function App() {
  const [user, setUser] = useState({ name: "Alice", role: "admin" });
  return <Dashboard user={user} />;
}

function Dashboard({ user }) {
  return <Sidebar user={user} />;  // passes user but doesn't use it
}

function Sidebar({ user }) {
  return <UserBadge user={user} />; // passes user but doesn't use it
}

function UserBadge({ user }) {
  return <span>{user.name}</span>; // finally uses user
}

function Timer({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1); // ← bug?
    }, 1000);
    return () => clearInterval(interval);
  }, []); // empty deps

  return <p>{count}</p>;
}

// Option A — controlled with useState:
const [name, setName] = useState("");
const [email, setEmail] = useState("");
<input value={name} onChange={e => setName(e.target.value)} />

// Option B — uncontrolled with useRef:
const nameRef = useRef();
// <input ref={nameRef} defaultValue="" />

// Option C — react-hook-form:
const { register, handleSubmit } = useForm();
// <input {...register("name")} />

function App() {
  const [userId, setUserId] = useState(1);

  return (
    <>
      <UserProfile key={userId} userId={userId} />
      <button onClick={() => setUserId(2)}>Switch User</button>
    </>
  );
}

function UserProfile({ userId }) {
  const [bio, setBio] = useState("");
  // fetches and displays user bio
}

function Tooltip({ position }) {
  const tooltipRef = useRef(null);
  const [adjustedTop, setAdjustedTop] = useState(position.top);

  useLayoutEffect(() => {
    const height = tooltipRef.current.getBoundingClientRect().height;
    if (position.top + height > window.innerHeight) {
      setAdjustedTop(position.top - height); // flip tooltip
    }
  }, [position]);

  return <div ref={tooltipRef} style={{ top: adjustedTop }}>...</div>;
}

import { atom, useAtom } from "jotai";

const countAtom = atom(0);
const doubleAtom = atom(get => get(countAtom) * 2); // derived atom

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

function DoubleCount() {
  const [double] = useAtom(doubleAtom);
  return <p>Double: {double}</p>; // automatically updates
}

const user = { name: "Alice", age: 30 };

function App() {
  return <div>{user}</div>;  // ?
}

function App() {
  console.log("App rendered"); // appears twice in console

  return <div>Hello</div>;
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

const reducer = (state, action) => {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return { ...state, data: action.payload, loading: false, error: null };
    case "FETCH_ERROR":
      return { ...state, error: action.payload, loading: false };
    case "RETRY":
      return { ...state, loading: true, error: null, retries: state.retries + 1 };
    default:
      return state;
  }
};

dispatch({ type: "FETCH_SUCCESS", payload: data });
dispatch({ type: "FETCH_ERROR", payload: new Error("Network failed") });

import { produce } from "immer";

const reducer = (state, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case "ADD_COMMENT":
        // Nested update — looks like mutation, produces new state:
        draft.posts[action.postId].comments.push(action.comment);
        break;
      case "MARK_READ":
        draft.notifications.forEach(n => { n.read = true; });
        break;
    }
  });
};

import { createPortal } from "react-dom";

function Modal({ isOpen, children }) {
  if (!isOpen) return null;
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById("modal-root")
  );
}

function Component() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const processed = items.map(item => ({ ...item, processed: true }));
    setItems(processed); // ← triggers re-render → effect runs again → infinite!
  }, [items]); // items is a dependency
}

// Server state examples:
const { data: users } = useQuery({ queryKey: ["users"], queryFn: fetchUsers });
const { data: profile } = useQuery({ queryKey: ["profile"], queryFn: fetchProfile });

// Client state examples:
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedTab, setSelectedTab] = useState("overview");

useEffect(() => {
  const subscription = eventBus.subscribe("update", handler);

  return () => {
    subscription.unsubscribe(); // cleanup
  };
}, []);

function useEventCallback(callback) {
  const callbackRef = useRef(callback);

  useLayoutEffect(() => {
    callbackRef.current = callback;
  });

  return useCallback(() => {
    callbackRef.current();
  }, []); // stable reference!
}

const mutation = useMutation({
  mutationFn: (newTodo) => api.createTodo(newTodo),
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ["todos"] });
    const previousTodos = queryClient.getQueryData(["todos"]);
    queryClient.setQueryData(["todos"], old => [...old, { ...newTodo, id: "temp" }]);
    return { previousTodos }; // context for rollback
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(["todos"], context.previousTodos); // rollback!
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["todos"] }); // refetch
  },
});

const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState("light");
  const [user, setUser] = useState({ name: "Alice" });

  return (
    <ThemeContext.Provider value={{ theme, setTheme, user, setUser }}>
      <DeepTree />
    </ThemeContext.Provider>
  );
}