Easy everything in Frontend Dev, page 14
Test Like a User: The React Testing Library Philosophy
React Testing Library's philosophy is to test components the way a user interacts with them, not by their internal implementation. This ensures refactors don't break tests. The footgun is querying by implementation details instead of what a user actually sees.
Redux: Actions are Events, Reducers are Event Handlers
Redux Actions are events describing *what* happened (e.g., 'task added'), while Reducers are functions that specify *how* state changes in response. This pattern is central to managing global state. The biggest footgun is mutating state directly in a reducer.
Single Source of Truth: Centralized App State
A Single Source of Truth consolidates all application state into one central object, or 'store.' This makes state predictable and easier to debug, especially in libraries like Redux, by creating one place to look for data.
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.
React.lazy: Load Components On Demand
React.lazy tells your app: "Don't download this component's code until it's needed." It's a core tool for code splitting. Use it for below-the-fold content or modals to speed up initial load. The footgun: forgetting <Suspense> will crash your app.
React.memo: Skip Unnecessary Component Renders
React.memo tells a component to skip re-rendering if its props are the same as last time. Use it to prevent costly renders when a parent updates. The footgun is passing new objects or functions as props, which breaks the default shallow comparison.
FormData: Package Form Data for HTTP Requests
The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with fetch() without manually setting headers.
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.
Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.
React's Controlled vs. Uncontrolled Components
A controlled component is a form input whose value is driven by React state; an uncontrolled component lets the DOM manage its own state. Use controlled for instant validation or conditional logic.
React Fragments: Group Elements Without a Wrapper
React Fragments let you group multiple elements without adding an extra <div> to the DOM. Use them when a component needs to return adjacent elements, like table cells (<td>).
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.
The `inert` Attribute: Making UI Sections Unreachable
The inert attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
Fix Ragged Text Lines with `text-wrap: balance`
Fix awkward text wrapping in headings. text-wrap: balance tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.
CSS Nesting: Grouping Related Styles
CSS nesting groups related styles like folders for files. Instead of repeating parent selectors, you write child rules inside the parent. This is great for component-based styling, but over-nesting creates specificity headaches that are hard to override.
Design System Adoption: A Product, Not a Project
Treat your design system like a product with users (your teams), not a one-off project. This is crucial when launching a new system to ensure teams actually use it. The biggest footgun is assuming 'if you build it, they will come.'
Design System Office Hours: Your Team's Live Support Channel
Design System Office Hours are a live support channel for your users. They're great for answering questions, unblocking teams, and gathering feedback as adoption grows. The main footgun is inconsistent promotion, which leads to empty, ineffective sessions.
Contribution Guidelines: The Rulebook for Your Design System
Contribution guidelines are the rulebook for evolving a shared design system, defining who can add what and how. They're essential when multiple teams need to contribute without chaos.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles