Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
React Suspense: Manage Loading States Declaratively
React Suspense lets you declare a loading UI instead of manually toggling `isLoading` state. You wrap a component that fetches data and provide a fallback, letting React handle the switch. The footgun is that re-fetching can jarringly show the fallback again.
Handling File Uploads in React
Treat a file input like a remote control for the browser's file picker. React can't hold the file data directly in state, but it can grab a reference to the selected file and send it to a server using a `FormData` object.
Nested Routes: Composing UI with <Outlet>
Nested routes build layouts with shared UI, like a sidebar. The <Outlet> component is a placeholder for changing content, perfect for dashboards. The footgun is forgetting the <Outlet> in the parent route; child routes will match the URL but won't render.
Emotion: Component-Scoped Styles in JavaScript
Emotion lets you write CSS directly in your JavaScript, keeping styles and logic colocated. It's ideal for dynamic, component-scoped styles in React that avoid global conflicts.
Global vs. Component CSS in React/Next.js
Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.
useDeferredValue: Keep UI Responsive During Renders
useDeferredValue keeps your UI responsive by showing a stale value while a new, expensive-to-render value is prepared in the background. Use it for search inputs filtering large lists.
Compound Components: Build Flexible APIs via Shared State
Think of HTML's `<select>` and `<option>`. The Compound Component pattern lets a parent manage state while children act as declarative configuration. It's used for flexible UI like tabs or accordions.
The useReducer Hook: Predictable State Updates
useReducer is a state machine for your components, managing complex state changes predictably. Use it when state logic is complex or the next state depends on the previous one, like in a shopping cart.
Custom Hooks: Package Component Logic for Reuse
A custom hook packages stateful logic (like useState and useEffect) into a reusable function. Use one when multiple components need the same logic, like tracking online status for a status bar and a save button. Footgun: Names must start with `use`.
Thinking in React: Decomposing UIs into Components
Think of UIs not as one big page, but as a tree of reusable components. Start by breaking a design mockup into a hierarchy of pieces. The footgun is creating 'god components' that do too much; each component should have a single responsibility.
Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: `count && <Component />` will render a "0" if `count` is 0, not nothing.
useState: Giving Components Memory
useState gives a component its own memory, letting it track information that changes over time. It's used for everything from handling form input to toggling UI. The biggest footgun: state updates are asynchronous and only apply on the next render.
React Props: Arguments for Your Components
Think of props as arguments for your UI components, letting you pass data from a parent down to a child. You use them to customize a component's appearance or behavior, like passing a user object to a `ProfileCard`.
JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
React Components: Your UI Building Blocks
Think of React Components as custom, reusable HTML tags you create with JavaScript functions. Use them to build everything from buttons to page layouts, speeding up development.
React Redux: Connecting Components to a Global Store
React Redux connects your React UI to a global Redux state store, letting components read data and dispatch updates. It's used to avoid "prop drilling" shared state across the app.
Performance Budgets: Set Limits to Stay Fast
A performance budget is a hard limit on metrics like bundle size or load time, acting as a guardrail against regressions. It's used in CI/CD to fail builds that exceed size limits or in monitoring to alert when load times degrade.
Component Naming: A Shared Language for UI
Think of naming conventions as a shared dictionary for your team. A name like `ButtonPrimary` should mean the same thing in Figma and in code, ensuring consistency.
Measuring Design System Adoption: From Vanity to Value
Measuring design system adoption means tracking real usage in code, not just documentation views. It's key for justifying budget and prioritizing work. The main footgun is mistaking site traffic for actual implementation in production.
Design System Adoption: Treat It Like a Product
Treat your design system like a product you're selling to internal teams, not just a library. Without an adoption strategy focused on real workflows, even a perfect system will be ignored, leading teams to build from scratch or create their own mini-systems.
Design System Governance: A Process for Evolution
Design system governance is a process for when components don't meet a team's needs. It guides teams on whether to create a one-off "snowflake" or contribute a new component back to the system. The footgun is letting teams "find a way," leading to chaos.
Using Component Libraries in React Native
A component library is a pre-fab UI kit for your app. Instead of building every button from scratch, you get polished, ready-to-use pieces that handle platform-specific animations and accessibility.
Dynamic Theme Switching with CSS
Let your app's theme automatically follow the user's OS setting. CSS's `prefers-color-scheme` media query lets you define styles for light and dark modes. The footgun is forgetting the 'no-preference' state, which can result in an unstyled default.
Theme Object: Your Design System's Single Source of Truth
A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.