Discord 前端面试指南

Discord frontend preparation should emphasize real-time UI: message lists, channel navigation, typing indicators, and connection recovery. Its engineering articles describe React on the web, Electron on desktop, and React Native on mobile. Use those articles to study implementation choices without assuming every interview tests the same stack.

Discord's interview guidance emphasizes practical work and collaboration. It allows reference materials such as API documentation, but that is separate from permission to use an AI assistant. Follow the instructions for your particular coding round.

Interview process

Discord's official "How to prepare for your Discord interview" post documents five stages:

• Resume review: Recruiting team screen.
• Recruiter screen: Phone conversation covering eligibility, compensation, and team preferences. Typically 30 minutes.
• Hiring manager screen: Background fit and role alignment.
• Skills test: A one-hour live coding interview with a Discord engineer. Discord explicitly says you can use Google, Stack Overflow, and API docs, and that you should treat the interviewer as a collaborator.
• Full-day interview: Roughly 5 to 6 hours including a lunch break, structured as several 45-minute sessions.

The published full-day format includes technical, values, and cross-functional discussions; senior candidates may also discuss a past project. Gaming experience is not required. Ask which coding and architecture sessions apply to your role.

Frontend candidates have also described a local development setup and final loops with different session counts. Prepare the requested environment in advance and use the recruiter's schedule for timing.

Coding rounds

Candidates have described different practical exercises for frontend and full-stack roles. Frontend examples include a chat interface, a design-system component, and an editable grid; a full-stack candidate encountered a chat-server task without a UI. Establish which side of the application your round covers.

What to practice for the coding screens:

• An event emitter or pub/sub primitive with subscribe, unsubscribe, and once semantics. Discord's gateway dispatches events to every store, so an emitter that scales to many listeners is a representative warm-up. See Event Emitter.
• Debounce and throttle applied to keystroke and pointer input. Typing indicators, search filters, and scroll handlers all rely on these. See Debounce.
• A chat-style component: an input box, a message list that handles new messages and edits, and reply or mention handling. Practice rendering markdown, mentions, and code blocks separately from the message data model. See Chat Application (Messenger) for the design framing.
• A spreadsheet-style component: editable cells, formula references, dependency recalculation, and error display. This has shown up in recent community discussion as a plausible onsite coding shape, so practice the data model even if your initial screen is chat-shaped.
• A virtualized or windowed list that stays at 60 fps with thousands of items. Discord's engineering articles describe virtualization in several large lists. Practice mount/unmount cost, scroll restoration, and dynamic row heights.
• An autocomplete or mention picker that filters a large list against a typed query with cancellable async fetches and keyboard navigation. See Autocomplete.
• A simple rate limiter or sliding-window counter for chat message sending, as a follow-up to chat exercises.

The interviewer often layers follow-ups: add edit-in-place, add a typing indicator, add a reaction popover, persist drafts across re-renders, handle a flaky connection, or add formula evaluation to a grid. Structure your initial code so the data model and rendering layers are independently extensible.

Keep your JavaScript, async, and DOM fundamentals sharp with GreatFrontEnd's user interface coding questions and quiz questions. Explain how promises and the event loop affect the behavior of the component you are building.

System design rounds

For system design, start with the requested user experience and establish the client/server boundary. Candidates have discussed chat delivery, presence, and moderation. Use Discord's architecture articles to compare design choices, rather than treating its production architecture as the required answer.

Front end concerns to walk through whenever the scenario involves a Discord-style client:

• Document model: how messages, channels, guilds (servers), members, and presence relate; the difference between cached, hydrated, and lazy data.
• Real-time transport: WebSocket gateway with heartbeat, sequence numbers, resume on reconnect, and zstandard-compressed payloads. Discord's own blog post on cutting WebSocket traffic by 40% is the reference for what they care about.
• Fan-out and ordering: how the client reconciles out-of-order events, deduplicates messages it already sent optimistically, and handles edits and deletes.
• Rendering: virtualized lists for sidebars and chat, recycling row instances, dynamic heights for variable-length messages, scroll anchoring when new messages arrive while the user is reading old ones.
• Rich content: markdown parsing (AST plus rules plus renderer), mentions that re-resolve to current usernames, embeds, code blocks with syntax highlighting, animated WebP custom emoji.
• Voice, video, screen share: WebRTC client architecture, codec negotiation, simulcast for screen share, mute/deafen state, output device switching, and graceful degradation when bandwidth drops.
• Presence and typing: per-channel typing indicators that expire, presence updates that respect privacy and rate limits, passive updates that batch low-priority changes.
• Reliability and offline: optimistic message sends with retry, draft persistence, queueing while disconnected, exponential reconnection backoff.
• Performance: code-splitting routes and feature modules so the initial bundle stays small , lazy-loading localization and animation assets, and avoiding memory leaks from detached DOM and stale store subscriptions.

A design walkthrough needs a clear progression from user actions to client state and failure handling. Follow the Front End System Design Playbook for that structure, and choose a related messenger or collaborative-editor scenario from the system design question set. The pagination, optimistic posts, and live updates in News Feed (Facebook) also apply to chat scrollback. Adapt the ordering and scroll behavior to a conversation.

Project and code deep dives

Senior and staff candidates should expect a retrospective on a project they owned end to end. Pick something with real-time, performance, or large-scale rendering concerns - a feature you shipped against an unreliable network, a virtualized surface you optimized, a state management refactor, a migration across a large codebase, or an incident you led the response on. Walk through the user problem, the data model, the architecture decisions, the alternatives you rejected, the rollout, and what changed after launch. Expect interviewers to push on the second-best alternative you considered.

If you have any production React Native, Electron, or WebRTC experience, lead with it. Discord ships all three.

Values and behavioral rounds

Discord publishes its values openly and the loop includes both a dedicated values session and an "attitude" session with a cross-functional partner. Their official prep guidance emphasizes mission alignment around helping people create belonging, the ability to give and receive feedback, and conflict resolution. Prepare stories that show you partnered well with product, design, customer experience, or trust and safety - the attitude session is specifically designed to surface that signal.

Explore channel permissions, threads, mentions, and voice joining before the interview. Pick a few interactions you can explain clearly, including what happens when a connection drops or access is denied.

Recommended preparation strategy

1. Read Discord's official prep guide first: How to prepare for your Discord interview sets the expectations for round structure, collaboration during coding, and the values and attitude sessions. Take your recruiter's exact round mix as the source of truth.
2. Explore the product: Try channel roles, threads, forums, and a voice session. Note how message state, permissions, and connection status appear to users.
3. Read the Discord engineering blog: At minimum, read the posts under "Company blog posts" below. They are the most direct evidence of how Discord thinks about messaging, virtualization, React performance, WebRTC, and gateway transport, and provide concrete tradeoffs to discuss in a design exercise.
4. Drill chat-shaped coding: Build a small React chat surface end to end - input, message list, virtualization, optimistic send, edit, reactions, typing indicator - and rebuild it from scratch a few times. Use this as a rehearsal for stateful UI work, then adapt to the actual exercise.
5. Practice real-time primitives: Implement an event emitter, debounce and throttle, a sliding-window rate limiter, and a virtualized list. These compose into most Discord coding follow-ups.
6. Practice Discord-shaped system design: Pick a real Discord surface (chat fan-out, presence, typing indicators, voice channel join, screen share) and design it end to end. Cover document model, gateway transport, optimistic state, virtualization, and reliability when the connection drops.
7. Prepare a project deep dive: Choose one system you personally shaped that involved real-time, performance, or a large UI surface. Rehearse a walkthrough that covers architecture, alternatives, metrics, and what you would change now.
8. Prepare values and attitude stories: Match real examples to Discord's mission and to working across functions. The attitude session is conducted by someone outside engineering, so generic "I work well with others" answers will be flagged.

Company blog posts

• How to prepare for your Discord interview: Discord's own walkthrough of the five-stage process, the full-day panel, what coding and architecture sessions test, and what they explicitly do not test.

• How Discord Maintains Performance While Adding Features: Code splitting, route-level lazy loading, custom makeLazy chunk loader, lazy stylesheets, animations, and localization. The reference for keeping a feature-rich client under ~700 KB on first load.

• How Discord Reduced Websocket Traffic by 40%: zstandard streaming compression and Passive Sessions V2. Essential context for the gateway transport layer of any system design answer.

• How Discord Achieves Native iOS Performance with React Native: Store dispatch costs, message-parsing regex tuning, FastList virtualization, PureComponent pitfalls with dynamic styles and children, and RAM bundles for lazy module loading.

• Supercharging Discord Mobile: Our Journey to a Faster App: Server-list virtualization, FastestList on Android RecyclerView, chat list recycling and pre-fill, animated WebP for emoji, and memory wins for power users.

• Why Discord is Sticking with React Native: How Discord shares Flux stores and business logic between web and iOS, and why the chat view is rendered natively rather than through the React Native bridge.

• Investigating Discord's React Memory Leak: Tracking React Fiber and detached DOM retention with the V8 inspector, the React 16.5-to-16.7 regression, and patterns to avoid (holding DOM nodes or React instances in props or state).

• How Discord Implemented App-Wide Keyboard Navigation: Custom FocusRing and FocusRingScope components, adaptive border radius and background detection, and why the native :focus outline did not meet their design system needs.

• How Discord Renders Rich Messages on the Android App: SimpleAST parser, rules-plus-renderer architecture, stack-based recursion handling, and how mentions and embeds re-resolve dynamically.

• How Discord Handles Two and a Half Million Concurrent Voice Users using WebRTC: Client-server WebRTC architecture, single C++ media engine across desktop and mobile, regional voice server fleet, and quality monitoring. Reference material for any voice or video design question.

• How It All Goes Live: An Overview of Discord's Streaming Technology: Capture, encode, transmission, and decode pipeline for Go Live screen share, hardware encoder use, and the tradeoff between latency and dropped frames.

Community resources

• techinterview.org Discord Interview Guide: Community guide to Discord's coding, system design, and product rounds, with sample design scenarios at Discord's actual scale.
• Glassdoor Discord software engineer interviews: Firsthand Discord software engineer interview questions and experiences.