Junior Frontend Developer Interview Preparation Guide for Spotify

// simplified React pseudo-code
function Grid({rows, cols}) {
  const [active, setActive] = useState({r:1,c:1});
  const [editing, setEditing] = useState(null);
  const liveRef = useRef();

  function focusCell(r,c){
    setActive({r,c});
    // update live region
    liveRef.current.textContent = `Cell ${colLabel(c)}${r} selected`;
  }

  function onKey(e,r,c){
    if (editing) return;
    if (e.key === 'ArrowRight') focusCell(r, Math.min(cols,c+1));
    if (e.key === 'ArrowLeft') focusCell(r, Math.max(1,c-1));
    if (e.key === 'ArrowDown') focusCell(Math.min(rows,r+1), c);
    if (e.key === 'ArrowUp') focusCell(Math.max(1,r-1), c);
    if (e.key === 'Enter' || e.key === 'F2') setEditing({r,c});
  }

  return (
    <div role="grid" aria-rowcount={rows} aria-colcount={cols}>
      <div aria-live="polite" style={{position:'absolute',left:-9999}} ref={liveRef}/>
      {data.map((row,rIdx)=>(
        <div role="row" key={rIdx}>
          {row.map((cell,cIdx)=>(
            <div
              role="gridcell"
              key={cIdx}
              aria-rowindex={rIdx+1}
              aria-colindex={cIdx+1}
              aria-selected={active.r===rIdx+1 && active.c===cIdx+1}
              tabIndex={active.r===rIdx+1 && active.c===cIdx+1 ? 0 : -1}
              onKeyDown={(e)=>onKey(e,rIdx+1,cIdx+1)}
              onFocus={()=>focusCell(rIdx+1,cIdx+1)}
            >
              {editing && editing.r===rIdx+1 && editing.c===cIdx+1
                ? <input autoFocus onBlur={commit} onKeyDown={editKeyHandler}/>
                : cell}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// test/searchHook.test.jsx
import React from 'react';
import { renderHook, act } from '@testing-library/react-hooks';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import useSearch from '../useSearch'; // your hook
jest.useFakeTimers();

const server = setupServer(
  rest.get('/search', (req, res, ctx) => {
    const q = req.url.searchParams.get('q');
    // simulate variable latency
    const delay = q === 'fast' ? 50 : 300;
    return res(ctx.delay(delay), ctx.json({ query: q, items: [q + '-1'] }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('only applies latest response when queries happen rapidly', async () => {
  const { result, waitForNextUpdate, rerender, unmount } = renderHook(
    ({ q }) => useSearch(q),
    { initialProps: { q: '' } }
  );

  // trigger first rapid query
  rerender({ q: 'slow' });
  // shortly after, trigger a newer query
  jest.advanceTimersByTime(10);
  rerender({ q: 'fast' });

  // advance timers so 'fast' response arrives first
  await act(async () => {
    jest.advanceTimersByTime(60); // fast completes
    await waitForNextUpdate();
  });

  expect(result.current.loading).toBe(false);
  expect(result.current.results).toEqual([{ query: 'fast', items: ['fast-1'] }]);

  // advance to allow slow response to arrive; should be ignored
  await act(async () => {
    jest.advanceTimersByTime(300);
  });

  // result must remain from 'fast'
  expect(result.current.results).toEqual([{ query: 'fast', items: ['fast-1'] }]);

  unmount();
});

import PropTypes from 'prop-types';

function MyComponent({ title }) {
  return <h1>{title}</h1>;
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired, // runtime check, warns if missing or wrong type
};

type MyProps = {
  title: string; // required at compile time
};

function MyComponent({ title }: MyProps) {
  return <h1>{title}</h1>;
}

const initial = { history: [{ snapshot: initialState }], index: 0, present: initialState };

function reducer(state, action) {
  switch(action.type){
    case 'APPLY_CHANGE': {
      const { patch, snapshot, meta } = action.payload;
      const nextPresent = snapshot ?? applyPatch(state.present, patch);
      const nextHistory = state.history.slice(0, state.index+1).concat({ snapshot, patches: patch ? [patch] : undefined, meta });
      return { history: nextHistory, index: state.index+1, present: nextPresent };
    }
    case 'UNDO': {
      if (state.index === 0) return state;
      const prev = state.history[state.index-1].snapshot ?? reconstruct(state.history, state.index-1);
      return { ...state, index: state.index-1, present: prev };
    }
    case 'REDO': {
      if (state.index === state.history.length-1) return state;
      const next = state.history[state.index+1].snapshot ?? reconstruct(state.history, state.index+1);
      return { ...state, index: state.index+1, present: next };
    }
    case 'SELECTIVE_UNDO': {
      // find last history entry with meta.branch === action.payload.branch and revert only that branch
      const targetIndex = findLastIndex(state.history, state.index, e => e.meta?.branch === action.payload.branch);
      if (targetIndex < 0) return state;
      const branchPrev = extractBranch(reconstruct(state.history, targetIndex), action.payload.branch);
      const newPresent = { ...state.present, [action.payload.branch]: branchPrev };
      // Append a new history entry representing this selective change
      const nextHistory = state.history.slice(0, state.index+1).concat({ snapshot: newPresent, meta: { selective: true, branch: action.payload.branch } });
      return { history: nextHistory, index: state.index+1, present: newPresent };
    }
  }
}

import { startTransition, useTransition } from "react";

const [isPending, start] = useTransition();

function onSearch(q){
  setQuery(q); // urgent: reflect user input immediately
  startTransition(() => { setResults(fetchSearch(q)); }); // low priority
}

import React, { useMemo } from "react";

function ExpensiveList({ items, filter }) {
  // Simulate expensive computation: filtering + heavy transform
  const filtered = useMemo(() => {
    // heavy CPU work (e.g., large data transform)
    return items
      .filter(i => i.category === filter)
      .map(i => ({ ...i, score: expensiveScoreCalc(i) }));
  }, [items, filter]); // recompute only when items or filter change

  return (
    <ul>
      {filtered.map(i => <li key={i.id}>{i.name} — {i.score}</li>)}
    </ul>
  );
}

function expensiveScoreCalc(item) {
  // placeholder for CPU work
  let s = 0;
  for (let i = 0; i < 200000; i++) s += (item.value * i) % 100;
  return s;
}