Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Design a Real-Time Analytics Pipeline for Mobile Events
Tests your grasp of low-latency, high-throughput design. A strong answer outlines ingestion (Kafka), stream processing (Flink), and a real-time OLAP database (Druid/ClickHouse). A red flag is proposing a slow, batch-only architecture.
How would you design a product management dashboard?
Tests your ability to structure data into a decision-making narrative. A good answer moves from a high-level summary (DAU) to trends (retention) and then actionable details (feature adoption). A red flag is simply listing charts without a narrative connection.
How do you track page views in a Single Page Application?
This tests your grasp of SPA routing mechanics. A great answer covers both programmatic navigation (using router hooks) and browser history events (popstate), explaining why both are necessary.
How would you A/B test a redesigned dashboard?
This tests your ability to translate a product goal into a technical plan. A good answer defines "engagement" with metrics, outlines the bucketing and instrumentation strategy, and discusses statistical significance.
What do you do when only frontend work remains in a sprint?
This tests your commitment to team ownership over role specialization. A great answer prioritizes the Sprint Goal, offers to help the frontend devs directly (pairing, testing), and finds other ways to unblock them.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
The Testing Trophy: Prioritize Integration Tests
The Testing Trophy flips the classic pyramid, arguing for "mostly integration tests" to maximize your return on investment. It's for UI apps where testing component interactions gives more confidence than isolated unit tests.
Vue's v-once: Render Once, Then Ignore
Use v-once to render a part of your template exactly once. After the initial render, Vue treats it as static content, ignoring future data updates for that element and its children. This is a performance optimization for content that never needs to change.
Headless Components: Separate Logic from UI
A Headless Component separates a component's logic from its UI, providing the 'brain' without the 'looks'. Use it for complex elements like dropdowns that need consistent behavior but different visual styles. The footgun is assuming it's a drop-in UI.
Svelte Actions: Reusable DOM Logic
Svelte Actions let you run code when an element is mounted for direct DOM access. Use them to integrate third-party libraries or add custom events like swipe gestures.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a User page for /users/johnny and /users/jolyne. Define a path with a param like /users/:id and access its value via $route.params.id.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
XState: Predictable UI State with State Machines
XState treats UI logic as a formal state machine, making impossible states impossible. It's ideal for complex components like multi-step forms or data fetching UIs. The footgun is overusing it for simple boolean toggles, which adds needless boilerplate.
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
Zod: TypeScript-First Schema Validation
Zod creates a single source of truth for your data's shape, providing both runtime validation and static TypeScript type inference from one definition. Use it to parse API inputs or form data, ensuring data is correct and typed.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Vue Custom Events: Child-to-Parent Communication
Think of $emit as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.