React Interview Questions

Your brief

A useful technical discussion asks why a design behaves as it does. Consider an item note that jumps to another row after filtering. Ask which value identifies the item, which component owns the draft and whether a row index was used as a key. Then consider a search result replaced by an older request: ask about lifetime and cancellation. The worked fixture demonstrates one explicit ownership policy rather than offering memorized interview slogans.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs

Worked solution

import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const [draft, setDraft] = useState('');
  const [item, setItem] = useState('basket');
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <label>
        Item
        <select value={item} onChange={(event) => setItem(event.target.value)}>
          <option value="basket">Basket</option>
          <option value="stool">Stool</option>
        </select>
      </label>
      <label>
        Shared draft note
        <input value={draft} onChange={(event) => setDraft(event.target.value)} />
      </label>
      <output>
        {item}: {draft || 'no note'}
      </output>
      <p>This design deliberately keeps one shared draft when the item changes.</p>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Extend and test

Redesign the fixture to keep a different draft per item. Explain how your data shape and tests preserve each draft while switching.