Technical Interview Preparation

Types of Technical Interviews

Not all technical interviews are the same. Knowing what to expect lets you prepare appropriately.

Take-Home Assignment

A project you complete in your own time (usually 24-72 hours). Common format for junior roles.

• Build a small app from a brief (e.g., "Fetch from this API and display the results")
• Code quality, structure, and documentation matter as much as functionality
• Write a README explaining your decisions
• Deploy it — do not just submit code

Live Coding

You write code in real time while the interviewer watches. This can be on a shared editor like CodeSandbox, or in a video call with screen sharing.

• Talk through your thought process out loud — silence is uncomfortable for interviewers
• Start with a plan before writing code
• It is acceptable to say "I would normally look this up but let me work through the logic"

System Design / Architecture Discussion

More common at senior level but sometimes appears for experienced juniors.

• You discuss how you would structure a frontend application
• Focus on component breakdown, state management, data fetching patterns, and performance

Common JavaScript Interview Questions

Prepare for these by being able to explain them clearly:

Closures

function outer() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const increment = outer();
increment(); // 1
increment(); // 2
// "count is kept alive in memory because the inner function closes over it"

The Event Loop

JavaScript is single-threaded. The event loop handles asynchronous code:

Call Stack → Web APIs (setTimeout, fetch) → Task Queue → Call Stack

• Synchronous code runs first
• Promises (microtask queue) run before setTimeout callbacks

var vs let vs const

• var: function-scoped, hoisted, can be redeclared — avoid
• let: block-scoped, not hoisted usably, can be reassigned
• const: block-scoped, must be initialised, cannot be reassigned

== vs ===

• == performs type coercion: "1" == 1 is true
• === checks type and value: "1" === 1 is false
• Always use ===

Common React Interview Questions

Q: What is the virtual DOM and why does React use it? React maintains an in-memory copy of the DOM. When state changes, React creates a new virtual DOM, diffs it against the previous one, and applies only the changed nodes to the real DOM. This batching and minimal update strategy makes React fast for complex UIs.

Q: What is the difference between props and state? Props are passed from parent to child — read-only within the receiving component. State is owned by the component and can be updated via the setter function. Both trigger re-renders when they change.

Q: Why does React need a key prop on list items? Keys help React identify which items in a list changed, were added, or removed. Without stable keys, React may re-render the wrong items or lose input focus during list updates.

Q: What does useEffect do and what is the dependency array? useEffect runs side effects after rendering. The dependency array controls when it re-runs: empty array = once on mount, specific deps = when those values change, no array = every render.

Q: What is the difference between useMemo and useCallback? useMemo caches the return value of a function. useCallback caches the function itself. Both are optimisations to avoid expensive recalculations or unnecessary re-renders in child components.

The Whiteboard Approach

For any coding problem, use this structured approach:

1. Clarify — ask questions about edge cases and constraints
   "Should I handle empty arrays? What if the input is null?"

2. Plan — talk through your approach before writing code
   "I'll iterate through the array, check each item, and..."

3. Code — write clean, readable code with good variable names

4. Test — walk through your solution with an example input
   "If I pass [1, 2, 3], the first iteration gives us..."

5. Reflect — discuss trade-offs and what you would improve
   "The time complexity here is O(n). I could optimise by..."

Behavioural Questions — The STAR Method

Behavioural questions ask you to describe past situations. Use the STAR method (Situation, Task, Action, Result):

"Tell me about a time you were stuck on a problem."

Situation: I was building a custom hook and the state was updating but the UI wasn't re-rendering.

Task: I needed to debug it quickly because it was blocking other work.

Action: I used React DevTools to inspect the state, added console logs to track when the hook ran, and searched the docs. I realised I was mutating state directly instead of using the setter, which bypassed React's change detection.

Result: Once I used the setter correctly, the UI updated as expected. I added a note in the code explaining why direct mutation causes this issue, so future collaborators wouldn't hit the same bug.

Questions to Ask the Interviewer

Asking good questions signals genuine interest and intelligence:

• "How does the team manage code reviews and collaboration?"
• "What does a typical first month look like for a new junior developer?"
• "What are the biggest technical challenges the team is currently facing?"
• "How much autonomy do junior developers have in choosing how to implement features?"

Avoid asking about salary in the first interview (it typically comes later), and never ask "What does your company do?" — research the company beforehand.

Following Up

Send a follow-up email within 24 hours of an interview:

• Thank the interviewer for their time
• Reference something specific from the conversation
• Restate your enthusiasm for the role
• Keep it brief (3-5 sentences)

This is uncommon enough to be memorable, and it demonstrates professionalism.

Key Takeaways

• The three main interview formats are take-home assignments, live coding, and architecture discussions — each requires different preparation
• Always talk through your thought process during live coding — silence is uncomfortable and gives the interviewer no information
• Prepare to explain closures, the event loop, var/let/const, and == vs === in JavaScript
• For React: know props vs state, virtual DOM, keys, useEffect dependency array, and useMemo vs useCallback
• Use the STAR method (Situation, Task, Action, Result) to answer behavioural questions with structured, compelling stories
• Send a brief thank-you email within 24 hours of every interview

Practice Exercise

1. Answer the following out loud (say it, do not just think it):
   • Explain what a closure is to someone who knows basic JavaScript
   • Explain the difference between props and state to a non-technical person
   • Walk through the STAR method with a real story from your learning or life
2. Solve this coding challenge: Write a function groupBy(array, key) that takes an array of objects and a key name, and returns an object where each value is an array of items sharing that key value
3. Write a README for a take-home assignment you have completed (or will complete)