Implement Promise.all.

Compare Promise.all, allSettled, race and any. How do you run async calls in parallel with async/await?

- Promise.all: fulfils with every value, rejects on the first rejection. - Promise.allSettled: never rejects. It reports the outcome of each promise. - Promise.race: settles with whichever promise settles first, fulfilled or rejected. - Promise.any: fulfils with the first success, and rejects with an AggregateError only if all fail. A common mistake is awaiting inside a loop, which runs the calls one after another. Start them first, then await them together: // Sequential: the second call waits for the first const user = await getUser(id); const orders = await getOrders(id); // Parallel: both start immediately const [user, orders] = await Promise.all([getUser(id), getOrders(id)]); Wrap awaited calls in try/catch. Use allSettled when one failure should not throw away the other results.

Implement a memoize function.

What are generics, and how do you constrain one?

A generic is a type parameter. It lets a function or type work with many types while keeping the link between its inputs and its output, which any throws away. function first (items: T[]): T | undefined { return items[0]; } first([1, 2, 3]); // number | undefined first(['a', 'b']); // string | undefined A constraint with extends limits what the parameter can be, and lets you use the properties that the constraint guarantees: function pluck (items: T[], key: K): T[K][] { return items.map((item) => item[key]); } pluck([{ id: 1, name: 'Asha' }], 'name'); // string[] pluck([{ id: 1, name: 'Asha' }], 'age'); // compile error Good to mention: type arguments are usually inferred, generics can have defaults ( ), and one that is used only once in a signature is usually not needed.

Walmart Global Tech Frontend Interview Questions

Q: How do you type React components, props, events and hooks?

type ButtonProps = React.ComponentProps & { variant?: 'primary' | 'ghost'; }; function Button({ variant = 'primary', children, ...rest }: ButtonProps) { return ( {children} ); } function Search() { const [query, setQuery] = useState(''); // inferred as string const [user, setUser] = useState (null); const inputRef = useRef (null); const onChange = (event: React.ChangeEvent ) => { setQuery(event.target.value); }; return ; } Points worth saying out loud: - React.ComponentProps gives you every native button prop, so you do not retype onClick and disabled. - children is React.ReactNode. - Let useState infer simple types, and pass a type argument when the initial value is null or an empty array. - Components can be generic: function List ({ items, renderItem }: ListProps ) keeps the item type through to renderItem.

React and Next.js at retail scale.

Walmart Global Tech is the technology arm of Walmart, with large engineering centres in India. Walmart's e-commerce sites run on React and Node at very large scale, and the company has open-sourced React tooling such as Electrode. Modern React, server rendering and performance are central to its frontend interviews.

Candidates commonly describe a coding round, one or two frontend rounds on JavaScript and React, a design round for experienced roles and a hiring manager round.

Questions: 15, 5 with free answers
Interview rounds: 5
Last reviewed: October 2026

Walmart Global Tech frontend interview process

The usual shape of the loop. A guide to what to prepare, not a promise of what you will get.

1
Coding round
Data structures and algorithms, sometimes as an online assessment.
2
JavaScript round
Language fundamentals, async patterns and utilities written by hand.
3
React round
Rendering, hooks, state management, server rendering and testing, often with a small component to build.
4
Frontend system design
For experienced roles: design a page such as a product listing or a cart.
5
Hiring manager
Past projects, ownership and collaboration.

What interviewers tend to look for

Current React: Server Components, the React 19 form APIs and hydration.
Next.js rendering and caching choices, with reasons.
Core Web Vitals and accessibility on high-traffic retail pages.
Testing as part of the work, not an afterthought.

Your Walmart Global Tech mock interview

15 questions. Type an answer under each one and an AI reviewer scores it and tells you what you missed. Stuck on one? Ask for a hint. A free account gets 3 AI replies a day.

Your mock interview

0 of 15 answered

Answer a question and your score shows up here.

JavaScript

3 questions

Question 1 of 15JavaScript
Walmart Global Tech interviewer
Implement Promise.all.
Your answer to question 1
Model answer
```
function promiseAll(iterable) {
  return new Promise((resolve, reject) => {
    const items = Array.from(iterable);
    const results = new Array(items.length);
    let pending = items.length;

    if (pending === 0) return resolve(results);

    items.forEach((item, index) => {
      Promise.resolve(item).then((value) => {
        results[index] = value; // by index, not by finish order
        pending -= 1;
        if (pending === 0) resolve(results);
      }, reject);
    });
  });
}
```
What the interviewer checks:
- Results keep the input order, whichever promise finishes first.
- Plain values are accepted, which is what Promise.resolve(item) handles.
- The first rejection rejects the whole thing.
- An empty input resolves straight away with an empty array.
Expect a follow-up asking for Promise.allSettled, Promise.any or Promise.race.
Practise this in the editor: Implement Promise.all
Question 2 of 15JavaScript
Walmart Global Tech interviewer
Compare Promise.all, allSettled, race and any. How do you run async calls in parallel with async/await?
Your answer to question 2
Model answer
- Promise.all: fulfils with every value, rejects on the first rejection.
- Promise.allSettled: never rejects. It reports the outcome of each promise.
- Promise.race: settles with whichever promise settles first, fulfilled or rejected.
- Promise.any: fulfils with the first success, and rejects with an AggregateError only if all fail.
A common mistake is awaiting inside a loop, which runs the calls one after another. Start them first, then await them together:
```
// Sequential: the second call waits for the first
const user = await getUser(id);
const orders = await getOrders(id);

// Parallel: both start immediately
const [user, orders] = await Promise.all([getUser(id), getOrders(id)]);
```
Wrap awaited calls in try/catch. Use allSettled when one failure should not throw away the other results.
Question 3 of 15JavaScript
Walmart Global Tech interviewer
Implement a memoize function.
Your answer to question 3
Model answer
```
function memoize(fn, resolver = (...args) => JSON.stringify(args)) {
  const cache = new Map();
  return function (...args) {
    const key = resolver(...args);
    if (!cache.has(key)) {
      cache.set(key, fn.apply(this, args));
    }
    return cache.get(key);
  };
}
```
The discussion is about the cache key and the cache size:
- JSON.stringify fails on functions and circular objects, and treats {a:1,b:2} and {b:2,a:1} as different. That is why the resolver is a parameter.
- The cache grows without limit. Cap it with an LRU policy for long-running pages.
- For a single object argument, a WeakMap lets the entry be garbage collected with the object.
- Only memoize pure functions. Memoizing an async function caches the promise, including a rejected one.
Practise this in the editor: Implement Memoization

TypeScript

2 questions

Question 4 of 15TypeScript
Walmart Global Tech interviewer
What are generics, and how do you constrain one?
Your answer to question 4
Model answer
A generic is a type parameter. It lets a function or type work with many types while keeping the link between its inputs and its output, which any throws away.
```
function first<T>(items: T[]): T | undefined {
  return items[0];
}

first([1, 2, 3]); // number | undefined
first(['a', 'b']); // string | undefined
```
A constraint with extends limits what the parameter can be, and lets you use the properties that the constraint guarantees:
```
function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

pluck([{ id: 1, name: 'Asha' }], 'name'); // string[]
pluck([{ id: 1, name: 'Asha' }], 'age'); // compile error
```
Good to mention: type arguments are usually inferred, generics can have defaults (<T = string>), and one that is used only once in a signature is usually not needed.

Question 5 of 15TypeScript

Walmart Global Tech interviewer

How do you type React components, props, events and hooks?

Model answer

type ButtonProps = React.ComponentProps<'button'> & {
  variant?: 'primary' | 'ghost';
};

function Button({ variant = 'primary', children, ...rest }: ButtonProps) {
  return (
    <button data-variant={variant} {...rest}>
      {children}
    </button>
  );
}

function Search() {
  const [query, setQuery] = useState(''); // inferred as string
  const [user, setUser] = useState<User | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };

  return <input ref={inputRef} value={query} onChange={onChange} />;
}

Points worth saying out loud:

React.ComponentProps<'button'> gives you every native button prop, so you do not retype onClick and disabled.
children is React.ReactNode.
Let useState infer simple types, and pass a type argument when the initial value is null or an empty array.
Components can be generic: function List<T>({ items, renderItem }: ListProps<T>) keeps the item type through to renderItem.

React

5 questions

Question 6 of 15React
Walmart Global Tech interviewer
When should you use useMemo and useCallback?
Your answer to question 6
Model answer
useMemo caches a computed value and useCallback caches a function, both until their dependencies change. They only pay off in three cases:
- The calculation is slow enough to notice, such as filtering or sorting a large list.
- The value is passed to a child wrapped in React.memo, which needs the same reference to skip rendering.
- The value is a dependency of an effect or of another memoised value.
```
const visible = useMemo(
  () => products.filter((p) => p.name.includes(query)),
  [products, query]
);

const handleSelect = useCallback((id) => setSelected(id), []);

return <ProductList items={visible} onSelect={handleSelect} />; // ProductList is memo()
```
Everywhere else they add code and a dependency comparison for nothing. An inline arrow function passed to a plain button costs almost nothing.
The React Compiler adds this memoisation at build time, so codebases that use it need far fewer of these hooks written by hand. Knowing why they exist still matters for the interview.
Question 7 of 15React
Walmart Global Tech interviewer
How do you decide where state should live, and when would you add a state management library?
Your answer to question 7
Model answer
Sort the state by kind first, because each kind has a natural home:
- Local UI state (is this menu open): useState or useReducer in the component.
- State shared by a few siblings: lift it to their nearest common parent.
- App-wide client state that changes rarely (theme, auth): Context.
- Server state, meaning data fetched from an API: a cache library such as TanStack Query, SWR or RTK Query, or the framework's own data layer. It handles caching, deduplication, retries and refetching.
- State that should survive a refresh or be shareable (filters, page number, selected tab): the URL.
Most of what teams once put in a global store was server state. With that handled by a cache, the remaining shared client state is often small.
Reach for Redux Toolkit or Zustand when many distant components read and write the same client state, when updates need to be traceable, or when Context re-renders become a measured problem.
Question 8 of 15React
Walmart Global Tech interviewer
What are React Server Components, and how are they different from server-side rendering?
Your answer to question 8
Model answer
A Server Component runs only on the server. Its code is never sent to the browser. It can be async, read a database or a secret directly, and import a heavy library at no cost to the bundle. It cannot use state, effects, event handlers or browser APIs.
A Client Component, marked with 'use client', is the kind React has always had. It is included in the bundle and hydrated so that it can be interactive.
- A Server Component can render Client Components and pass them serialisable props.
- A Client Component cannot import a Server Component, but it can receive one as children.
Server-side rendering is a different thing. SSR turns a component tree into HTML for the first load, and then the browser downloads and hydrates all of it. Server Components reduce what has to be downloaded and hydrated at all. A framework such as Next.js uses both: Server Components and Client Components are rendered to HTML on the server, and only the Client Components hydrate.
Question 9 of 15React
Walmart Global Tech interviewer
What changed in React 19?
Your answer to question 9
Model answer
The main additions deal with forms and async updates:
- Actions: pass an async function to a form's action prop or to startTransition. React tracks the pending state and errors for you.
- useActionState returns the result of the last submission and a pending flag. useFormStatus reads the pending state of the parent form from inside a child such as a submit button.
- useOptimistic shows the expected result immediately and goes back to the real state when the action finishes.
- use reads a promise or a context during render. Unlike other hooks it can be called inside conditions and loops.
- ref is a normal prop on function components, so forwardRef is no longer needed.
- <title>, <meta> and <link> rendered anywhere in the tree are moved into the document head.
- A context can be rendered directly as a provider: <ThemeContext value={theme}>.
```
function Signup() {
  const [error, submit, isPending] = useActionState(async (previous, formData) => {
    const result = await createUser(formData.get('email'));
    return result.ok ? null : result.message;
  }, null);

  return (
    <form action={submit}>
      <input name="email" type="email" required />
      <button disabled={isPending}>Sign up</button>
      {error && <p role="alert">{error}</p>}
    </form>
  );
}
```
Question 10 of 15React
Walmart Global Tech interviewer
What is hydration, and what causes a hydration mismatch?
Your answer to question 10
Model answer
With server rendering, the browser receives finished HTML. Hydration is React running your components in the browser and attaching event handlers and state to that existing HTML instead of creating it again. Until it finishes, the page is visible but not interactive.
A mismatch happens when the first render in the browser produces something different from the server's HTML. Causes:
- Date.now(), Math.random() or a locale-dependent format used during render.
- Reading window, localStorage or the screen size during render.
- Invalid nesting, such as a div inside a p, which the browser repairs before React sees it.
- Browser extensions that edit the page.
Fixes: render the same output in both places, move browser-only values into useEffect so that they appear after hydration, or render that part on the client only. suppressHydrationWarning is for a single value that cannot match, such as a timestamp.
Hydration cost grows with the amount of JavaScript. Streaming with Suspense lets React hydrate parts of the page independently, and Server Components reduce how much there is to hydrate.

Next.js

3 questions

Question 11 of 15Next.js
Walmart Global Tech interviewer
How is the App Router different from the Pages Router?
Your answer to question 11
Model answer
The App Router (the app directory) is built on React Server Components. The Pages Router (the pages directory) renders every page as a client component that is hydrated in full. Both are still supported.
- Components are Server Components by default. You add 'use client' only where you need interactivity.
- Data fetching happens inside async components, close to where the data is used. getServerSideProps and getStaticProps are gone.
- Layouts nest and keep their state while you navigate between the pages under them.
- Special files map to React features: loading.tsx is a Suspense fallback, error.tsx is an error boundary, not-found.tsx handles 404s.
- Pages stream: the server sends the shell first and fills in slower parts as they finish.
- Server Actions handle mutations, and route handlers (route.ts) replace API routes.
- SEO fields come from a metadata export or generateMetadata, not from a Head component.
The practical result is less JavaScript sent to the browser, in exchange for having to think about which side each component runs on.
Question 12 of 15Next.js
Walmart Global Tech interviewer
How does caching work in the Next.js App Router, and how do you invalidate it?
Your answer to question 12
Model answer
There are several layers, and naming them is most of the answer:
- Request memoisation: the same fetch made twice during one render is sent once.
- Data cache: results of fetch calls stored on the server across requests and deployments.
- Full route cache: the rendered output of static routes.
- Client router cache: pages the browser has already visited or prefetched.
```
// Refetch at most once an hour, and tag it for manual invalidation
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 3600, tags: ['products'] },
});

// Inside a Server Action or route handler, after a change:
revalidateTag('products');
revalidatePath('/products');
```
Be careful with defaults, because they changed. In Next.js 14 a fetch was cached unless you opted out. From Next.js 15 it is not cached unless you opt in, and newer releases add an explicit use cache directive. Say which version you are describing, and check the docs for the one you use.
Question 13 of 15Next.js
Walmart Global Tech interviewer
What are Server Actions, and what do you have to be careful about?
Your answer to question 13
Model answer
A Server Action is an async function marked with 'use server'. It runs on the server but can be passed to a form's action or called from a client event handler. Next.js creates the HTTP endpoint and makes the call for you.
```
'use server';

export async function addToCart(formData: FormData) {
  const session = await getSession();
  if (!session) throw new Error('Not signed in');

  const productId = String(formData.get('productId'));
  await db.cart.add(session.userId, productId);
  revalidatePath('/cart');
}
```
They suit mutations: there is no API route to write, a form can work before JavaScript loads, and they connect to revalidatePath, useActionState and useOptimistic.
What to be careful about:
- Every action is a public endpoint. Check authentication and authorisation inside each one, and validate the input. Hiding the button is not security.
- Arguments and return values must be serialisable.
- They are meant for writes. Read data in Server Components instead.

Browser, performance and system design

1 question

Question 14 of 15Browser, performance and system design
Walmart Global Tech interviewer
What are the Core Web Vitals, and how do you improve each one?
Your answer to question 14
Model answer
- LCP (Largest Contentful Paint): when the largest image or text block in the first screen is drawn. Good is 2.5 seconds or less. Improve it with a faster server response, a correctly sized and prioritised hero image, fewer render-blocking files, and server-rendered content.
- INP (Interaction to Next Paint): how long the page takes to visibly respond to a click, tap or key press. It replaced FID in 2024. Good is 200 ms or less. Improve it by breaking up long tasks, shipping less JavaScript, avoiding large re-renders on input, and moving heavy work off the main thread.
- CLS (Cumulative Layout Shift): how much content moves unexpectedly. Good is 0.1 or less. Improve it by giving images, ads and embeds a reserved size, by not inserting content above what the user is reading, and by loading fonts with matching fallbacks.
Each is judged at the 75th percentile of real visits, not the average.
Know the two kinds of data. Lab data from Lighthouse is one run on one simulated device, useful for debugging. Field data from real users, collected with the web-vitals library or from the Chrome UX Report, is what counts. INP in particular can only be measured properly in the field.

Machine coding

1 question

Question 15 of 15Machine coding
Walmart Global Tech interviewer
Build a product list with a shopping cart.
Your answer to question 15
Model answer
Store the cart as a map from product id to quantity. Totals, item counts and line prices are derived from that and the product list; they are not stored.
```
function cartReducer(cart, action) {
  switch (action.type) {
    case 'add':
      return { ...cart, [action.id]: (cart[action.id] ?? 0) + 1 };
    case 'setQuantity': {
      if (action.quantity <= 0) {
        const { [action.id]: removed, ...rest } = cart;
        return rest;
      }
      return { ...cart, [action.id]: action.quantity };
    }
    case 'clear':
      return {};
    default:
      return cart;
  }
}

const totalPaise = Object.entries(cart).reduce(
  (sum, [id, quantity]) => sum + productsById[id].pricePaise * quantity,
  0
);
```
- Adding a product that is already in the cart raises its quantity. It does not add a second line.
- A quantity stepper with a minimum of 1, or removal at 0, and a maximum from stock.
- Keep money as whole paise (or cents) and format only for display, so that floating point errors never reach a price.
- An empty cart state.
- Save the cart to localStorage.
Follow-ups: coupon codes and tax, sharing the cart across pages with context or a store, and syncing with a server optimistically.
Practise this in the editor: Shopping Cart

Practise for Walmart Global Tech

Reading answers is the easy half. These problems run in the browser against real tests.

What interviewers tend to look for

Your Walmart Global Tech mock interview

Your mock interview

JavaScript

Implement Promise.all.

Compare Promise.all, allSettled, race and any. How do you run async calls in parallel with async/await?

Implement a memoize function.

TypeScript

What are generics, and how do you constrain one?

How do you type React components, props, events and hooks?

React

When should you use useMemo and useCallback?

How do you decide where state should live, and when would you add a state management library?

What are React Server Components, and how are they different from server-side rendering?

What changed in React 19?

What is hydration, and what causes a hydration mismatch?

Next.js

How is the App Router different from the Pages Router?

How does caching work in the Next.js App Router, and how do you invalidate it?

What are Server Actions, and what do you have to be careful about?

Browser, performance and system design

What are the Core Web Vitals, and how do you improve each one?

Machine coding

Build a product list with a shopping cart.

Practise for Walmart Global Tech

Other company guides