A comprehensive guide to frontend development terms, architecture patterns, and concepts. Whether you're learning or need a quick reference, find clear definitions for the terminology used in modern web development.
Data that exists only in the browser and is not persisted to a server. Examples include form input values, UI toggle states, selected tabs, and modal open/closed status. Client state is synchronous, immediately available, and typically managed with useState, useReducer, or simple state management libraries.
A technique for breaking up JavaScript bundles into smaller chunks that can be loaded on demand. This reduces initial page load time by only loading the code needed for the current view. In React, this is typically done with dynamic imports and React.lazy().
The practice of building user interfaces from reusable, self-contained pieces called components. Each component encapsulates its own structure (HTML), style (CSS), and behavior (JavaScript). Good component architecture involves decisions about component boundaries, composition patterns, and prop design.
The principle of building complex functionality by combining simpler pieces. In React, this means building UIs by nesting components rather than through inheritance. Composition is preferred because it's more flexible, easier to understand, and avoids the problems of deep inheritance hierarchies.
A React pattern where multiple components work together to form a complete UI element, sharing implicit state through context. The parent component manages state while child components consume it. Examples include tabs, accordions, and select dropdowns. This pattern provides flexible, composable APIs.
Functions that start with 'use' and can call other hooks. Custom hooks let you extract and reuse stateful logic between components. Unlike HOCs or render props, hooks don't add components to the tree—they just share logic. Examples include useForm, useFetch, useLocalStorage.
Reusable solutions to commonly occurring problems in software design. In frontend development, patterns include Container/Presentational, Compound Components, Render Props, Higher-Order Components, and Custom Hooks. Patterns provide a shared vocabulary and proven approaches to solving architectural challenges.
Learn more →Named entities that store visual design attributes like colors, spacing, typography, and shadows. Design tokens create a shared language between design and development, enable theming, and ensure consistency across an application. They're typically implemented as CSS custom properties or JavaScript objects.
A technique for enabling or disabling features at runtime without deploying new code. Feature flags allow gradual rollouts, A/B testing, and quick rollbacks. They're essential for continuous delivery and can be used for user-specific features, beta testing, or operational controls.
The high-level structure and organization of a web application's client-side code. It encompasses how files and folders are organized, how data flows through the application, how components communicate, and how state is managed. Good frontend architecture makes code maintainable, scalable, and easier to understand as applications grow.
Learn more →A function that takes a component and returns a new component with additional props or behavior. HOCs were a common pattern for cross-cutting concerns like authentication, logging, or data fetching. They've been largely replaced by custom hooks, but understanding them is important for working with older codebases.
The process of attaching JavaScript event handlers and state to server-rendered HTML. When a page is server-rendered, the browser receives static HTML. Hydration makes this static content interactive by reconciling it with the React component tree and attaching event listeners.
The process of designing an application so it can be adapted to different languages and regions without engineering changes. This includes extracting text strings, handling right-to-left layouts, formatting dates/numbers/currencies, and managing pluralization rules.
A software architecture where a single instance of an application serves multiple customers (tenants). Each tenant's data is isolated, but they share the same codebase and infrastructure. Frontend considerations include tenant-specific theming, feature flags, permissions, and data isolation.
A pattern where the user interface updates immediately to reflect the expected result of an action, before the server confirms the change. If the server request fails, the UI rolls back to the previous state. This makes applications feel faster and more responsive, especially on slow networks.
A mechanism for controlling what actions users can perform in an application. Frontend implementations often involve role-based access control (RBAC) or attribute-based access control (ABAC). This affects which UI elements are shown, which routes are accessible, and which API calls are allowed.
A strategy for web development that starts with a baseline of essential content and functionality that works for all users, then adds enhanced features for users with more capable browsers. This ensures accessibility and reliability while still providing rich experiences where possible.
The practice of passing props through multiple levels of components to reach a deeply nested component that needs the data. While sometimes appropriate, excessive prop drilling makes code harder to maintain. Solutions include Context API, state management libraries, or component composition.
The capability to keep data synchronized across multiple clients in real-time. When one user makes a change, other users see it immediately without refreshing. Technologies include WebSockets, Server-Sent Events, and services like Firebase or Supabase. Challenges include conflict resolution and offline support.
A React pattern where a component receives a function as a prop that returns React elements. This allows sharing behavior between components without using inheritance. While largely replaced by hooks for logic sharing, render props remain useful for components that need control over what they render.
Data that originates from and is persisted on a server. Unlike client state (UI state), server state is asynchronous, can become stale, and may be shared across multiple clients. Libraries like React Query, SWR, and Apollo Client specialize in managing server state, handling caching, revalidation, and synchronization.
A mathematical model that defines a finite number of states and the transitions between them. In frontend development, state machines help manage complex UI states by making all possible states explicit and defining exactly which transitions are valid. This prevents impossible states and makes debugging easier.
The practice of managing and sharing data (state) across different parts of an application. State can be local (within a single component), shared (between components), or global (accessible anywhere). Common approaches include React's useState/useReducer, Context API, and external libraries like Redux, Zustand, or Jotai.
The practice of making an application's visual appearance customizable. This includes colors, typography, spacing, and other design tokens. Modern approaches use CSS custom properties (variables) or CSS-in-JS solutions. In multi-tenant applications, theming allows each customer to have their own branded experience.