What Interviewers Actually Look for in a Fresher React Developer

// Q1: closures and scope
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var", i), 0);
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let", j), 0);
}
// var 3, var 3, var 3, let 0, let 1, let 2
// var is function-scoped: one shared i, already 3.
// let creates a new binding for each iteration.

// Q2: event loop order
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// A, D, C, B
// Sync code first, then microtasks (promises),
// then macrotasks (timers).

const user = {
  name: "Asha",
  address: { city: "Noida", pin: "201301" },
  skills: ["JS", "React"],
};

// Change city and add a skill without mutating user
const updated = {
  ...user,
  address: { ...user.address, city: "Delhi" },
  skills: [...user.skills, "TypeScript"],
};

console.log(user.address.city);    // Noida (unchanged)
console.log(updated.address.city); // Delhi
console.log(user.skills.length);   // 2

// This is exactly how you update nested React state.

ProductPage            state: variant, adding
|-- ImageGallery       state: activeIndex
|-- ProductInfo        props: title, price
|-- VariantPicker      props: variants, value, onChange
|-- AddToCartButton    props: disabled, onAdd
`-- ReviewsList        props: productId
    `-- ReviewCard     props: review

Why variant lives in ProductPage:
- VariantPicker changes it
- ProductInfo shows the price for that variant
- AddToCartButton needs it to add the right item
So the closest common parent owns it.

import { useState } from "react";
import VariantPicker from "./VariantPicker";
import ProductInfo from "./ProductInfo";
import AddToCartButton from "./AddToCartButton";

export default function ProductPage({ product, onAdd }) {
  const [variantId, setVariantId] = useState(product.variants[0].id);
  const variant = product.variants.find((v) => v.id === variantId);

  // An array of keyed elements works like a fragment
  return [
      <ProductInfo key="info" title={product.title} price={variant.price} />,
      <VariantPicker
        key="picker"
        variants={product.variants}
        value={variantId}
        onChange={setVariantId}
      />,
      <AddToCartButton
        key="add"
        disabled={variant.stock === 0}
        onAdd={() => onAdd(product.id, variantId)}
      />
  ];
}

// BUG 1: hook inside a condition
function Profile({ user }) {
  if (!user) return null;
  const [tab, setTab] = useState("posts"); // runs only sometimes
  // ...
}
// Fix: call useState first, then return early.

// BUG 2: effect loop from a new object each render
function Orders({ userId }) {
  const [orders, setOrders] = useState([]);
  const filters = { userId, status: "open" }; // new object every render
  useEffect(() => {
    fetchOrders(filters).then(setOrders);
  }, [filters]); // always 'changed' -> runs after every render
}
// Fix: depend on primitives instead
//   useEffect(() => {
//     fetchOrders({ userId, status: "open" }).then(setOrders);
//   }, [userId]);

/* Responsive card grid without media queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Centre anything inside a box */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Card with footer pinned to the bottom */
.card {
  display: flex;
  flex-direction: column;
}
.card .footer {
  margin-top: auto;
}

JAVASCRIPT

[ ] var, let, const and block scope
[ ] Closures: explain with a counter example
[ ] this in regular vs arrow functions
[ ] Promises, async/await, try/catch
[ ] Event loop: sync, microtasks, macrotasks
[ ] map, filter, reduce, find, some, every
[ ] Spread, rest, destructuring
[ ] == vs ===, truthy and falsy values
[ ] Shallow vs deep copy of objects

REACT

[ ] Components, props, state
[ ] Lists and keys (and the index key bug)
[ ] Controlled forms
[ ] useState with functional updates
[ ] useEffect: dependencies and cleanup
[ ] Rules of hooks and why they exist
[ ] Lifting state up
[ ] Custom hook: write one from scratch
[ ] Context for shared values
[ ] Basic routing with React Router

LAYOUT
[ ] Flexbox: direction, align, justify, gap
[ ] Grid: auto-fill and minmax
[ ] Responsive units: rem, %, vw
[ ] Box model and box-sizing

HABITS
[ ] Git: branch, commit, push, pull request
[ ] Read MDN and React docs for one new API weekly
[ ] Use browser DevTools: elements, console, network
[ ] One deployed project you can explain fully