Blinkit interviews are highly referral-driven, so ensure your resume is aligned with the role you’re targeting (Frontend or Backend).Since Blinkit rarely posts open positions, reaching out to SDE1/SDE2 employees for referrals can significantly improve your chances.🚀

Interview Structure :

• 📌Round 1 —Tests core JavaScript and React fundamentals, sometimes including a small feature implementation task.
• 📌Round 2 — One-hour task emphasizing clean React code, proper state management, and event handling.
• 📌Round 3 — Assesses cultural fit, exploring your alignment with Blinkit’s values.

💡R1: Web Basics (JS / React Fundamentals + Machine Coding)

• Part 1: Core JavaScript & React fundamentals questions.
• Part 2: Machine coding implementation on CodeSandbox, focusing on React components, state management, and clean code practices.

⏳Questions Asked (Part 1)

What is Hoisting in JavaScript?

What are Closures? Give examples.

Which React hooks have you used? (Special emphasis on useRef)

How does the Event Loop work in JavaScript?

Explain difference in Macro and Micro Task queues.

Is fetch part of the microtask queue?

Output-based question on Promises and setTimeout.

Different storage options in browsers.

Difference between WebSockets and normal HTTP connections.

Follow-up: Why polling every 10ms is bad for a chat app instead of using WebSockets?

10. Difference between Flexbox and Grid.

11. CSS case-based: Centering a div inside another div (multiple approaches).

12.What is the Box Model?

13.How does JavaScript compilation work?

💡Problem Statement : Grid Color Toggle (Part 2)

Imagine a grid of cells (like a chessboard) where each cell is initially white. The user click behavior has the following rules:

1. The clicked cell becomes the selected color (e.g., blue).
2. Its four direct neighbors (up, down, left, right):

• If currently white → change to the selected color
• If already colored → revert to white

This behavior applies on every click and can be repeated indefinitely.

Press enter or click to view image in full size

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

export default function App() {
  const [grid, setGrid] = useState(
    Array(4)
      .fill(null)
      .map(() => Array(4).fill('white')),
  )

  const getNeighbors = (row, col, n) => {
    const directions = [[0, 1],[0, -1],[1, 0],[-1, 0]]
    return directions.map(([dx, dy]) => [row + dx, col + dy]
.filter(([r, c]) => r >= 0 && r < n && c >= 0 && c < n)
  }

  const toggleCell = (newGrid, row, col) => {
    newGrid[row][col] = newGrid[row][col] === 'white' ? 'lightblue' : 'white'
  }

  const handleClick = (row, col) => {
    setGrid((prevGrid) => {
      const newGrid = prevGrid.map((r) => [...r])
      toggleCell(newGrid, row, col)

      const neighbours = getNeighbors(row, col, prevGrid.length)
      neighbours.forEach(([r, c]) => toggleCell(newGrid, r, c))

      return newGrid
    })
  }

  return (
    <div>
      {grid.map((row, rowIndex) => (
        <div className="row" key={rowIndex} style={{display: 'flex'}}>
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              onClick={() => handleClick(rowIndex, colIndex)}
              style={{
                width: 40,
                height: 40,
                backgroundColor: color,
                border: '1px solid black',
              }}
            />
          ))}
        </div>
      ))}
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

📌 Solution : The challenge is to make a grid where clicking a cell changes its color and that of its neighbors (up, down, left, right) between white and light blue. We solve it by storing the grid in state, finding neighbors with getNeighbors, toggling colors with toggleCell, and updating the grid on click. The grid is rendered dynamically so each cell is clickable.

• Maintain a 2D array in state, storing "white" or "lightblue" for each cell. On click leads to the following :
• Toggle the clicked cell → white ↔ light blue
• Find its neighbors (up, down, left, right) within grid bounds
• Toggle each neighbor using the same rule
• Re-render the grid dynamically using nested .map(), coloring <div>s according to their state.
• Users can click any cell repeatedly, and the rules apply consistently.

📌 Javascript Fundamentals (Quick Revision)

1. What is Hoisting in JavaScript?

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope.

2. What are Closures? Give Examples.

A closure is when a function “remembers” variables from its lexical scope even after the outer function has finished execution.

3. Which React Hooks Have You Used? (Special Emphasis on useRef)

Some commonly used hooks:

• useState → To manage local state inside any component. Example: toggling a modal, handling form inputs.
• useEffect → Performs side effects such as API calls, subscriptions, or updating the DOM. Dependency array determines when the effect runs.[] → runs once on mount and [value] → runs whenever value changes.
• useMemo→ Memoizes expensive calculations so they don’t recompute unnecessarily.
  Example: filtering/sorting large lists.
• useCallback → Returns a memoized version of a function, preventing re-creation on every render.
  Example: passing stable callbacks to child components (avoids unnecessary re-renders).
• useContext → Provides access to shared global data via Context API.
  Example: Theme, Authentication, or Language context across components.

Special emphasis on useRef:
It stores mutable values that persist across renders without causing re-renders. So it gives direct access to Dom nodes and any changes in ref’s value does not render the component again. Use cases:

• Accessing a DOM node (focus on input, scroll into view).
• Storing previous values without re-rendering.
• Keeping a stable reference to setInterval/clearInterval IDs.

4. How Does the Event Loop Work? Is fetch Part of the Microtask Queue?

The Event Loop lets JavaScript handle async code on a single thread. Sync code runs first in the call stack, while async tasks go to browser Web APIs. Once done, their callbacks move into queues: micro-task queue (Promises, fetch.then) and macro-task queue (setTimeout, DOM events).

The Event Loop checks the call stack and, if it’s empty, it always clears the micro-task queue first before moving on to the macro-task queue.

The event loop decides execution order in JavaScript:

• Call stack → runs synchronously.
• Microtask queue → Promise.then, async/await, MutationObserver.
• Macrotask queue → setTimeout, setInterval.

fetch: once the response is ready, the callback (.then) is put into the microtask queue.

5. What Storage Options Are Available in Browsers?

• localStorage → Stores key–value data with no expiry. Data stays even after closing the browser. (Good for user preferences, theme, etc.)
• sessionStorage → Similar to localStorage but clears when the tab/window is closed. (Good for temporary session data.)
• cookies → Small pieces of data (around 4KB), can have an expiry time, and are automatically sent with every HTTP request. (Commonly used for authentication/session IDs.)
• IndexedDB → A NoSQL database inside the browser for storing large, structured data (like JSON, images, or offline app data).

6. Difference Between WebSockets and HTTP (Chat App Example)

HTTP is request/response based and stateless. If you poll the server every 10 milliseconds, it may look real-time but is inefficient because:

• Too many unnecessary requests.
• Increased server load and wasted bandwidth.
• Latency still exists.

WebSocket is a persistent, duplex connection designed for real-time use cases like chat. It is far more efficient than aggressive HTTP polling.

7. Difference Between Flexbox and Grid

• Flexbox → one-dimensional layout (row or column). Items align and distribute space along a single axis. Example: navbars, toolbars, or aligning items inside a card.
• Grid → two-dimensional layout (rows and columns).Provides precise control over both axes at once. Example: full-page layouts, dashboards, or image galleries.

8. Multiple Ways to Center a Div Inside Another

1. Flexbox — Makes the parent a flex container and centers the child horizontally and vertically.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Grid — Makes the parent a grid and centers the child with place-items: center.

.parent {
  display: grid;
  place-items: center;
}

3. Absolute + Transform — Moves the child to 50% top and left, then shifts it back by half its own size to center.

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

9. Output-based question on Promises and setTimeout.

console.log("a");

setTimeout(() => {
  console.log("b");
}, 0);

Promise.resolve().then(() => {
  console.log("c");
  Promise.resolve().then(() => {
    console.log("d");
  });
});

// OUTPUT : a c d b

Key Rule to Remember 🚀

• Synchronous code runs first. => a
• Then microtasks (Promises, queueMicrotask, MutationObserver). => c d
• Then macrotasks (setTimeout, setInterval, setImmediate, I/O). => b

10. How does JavaScript compilation work?

JavaScript uses Just-In-Time (JIT) compilation, meaning it is compiled while it runs, not beforehand.

1. The JS engine reads and parses the code.
2. It converts it into an internal structure (AST).
3. The engine compiles and executes the code on the fly.
4. Frequently used code is optimized, and can be de-optimized if assumptions change (because JS is dynamic).

👉 How is this different from other languages?
Languages like C/C++ are compiled before execution (AOT), producing machine code in advance. JavaScript, being dynamic, is compiled and optimized during execution, so it doesn’t require a separate build step.

11. What is the Box Model?

The CSS Box Model explains how elements are sized and spaced on a webpage.
Each element is made of four layers:

1. Content — text or image inside the element
2. Padding — space around the content
3. Border — outline around the padding
4. Margin — space outside the border (separates elements)

So, total space = content + padding + border + margin.

Written by Shhreyyyaa