React Glossary
## B
### Batching
The process of grouping multiple state updates into a single re-render for better performance. React 18 introduced Automatic Batching, which batches updates inside promises, timeouts, and event handlers.
## C
### Code Splitting
A technique where the code is split into smaller chunks which can be loaded on demand, rather than downloading the entire application bundle at once.
### Commit Phase
The synchronous phase in the React rendering lifecycle where changes are applied to the DOM and layout effects are executed.
### Component
Independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.
### Context API
A way to pass data through the component tree without having to pass props down manually at every level.
### Custom Hook
A JavaScript function whose name starts with "use" and may call other Hooks.
### Cypress
A frontend testing tool built for the modern web, primarily used for End-to-End (E2E) testing. It runs directly in the browser and provides a real-time reloading and debugging experience.
## D
### DOM (Document Object Model)
A programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
## E
### E2E Test (End-to-End)
A testing methodology that validates the entire software from start to finish. It simulates real user scenarios to ensure the application works as intended from the user's perspective.
## F
### Fiber
React's internal reconciliation engine (introduced in v16) that enables advanced features like time-slicing, pausing work, and concurrency.
## H
### Higher-Order Component (HOC)
A function that takes a component and returns a new component.
### Hook
A special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components.
## I
### Integration Test
A level of software testing where individual units are combined and tested as a group. In React, this often involves testing a parent component and its interactions with child components.
## J
### Jest
A delightful JavaScript Testing Framework with a focus on simplicity. It is commonly used with React for unit and integration testing, providing features like snapshot testing and mocking.
### JSX
A syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript.
## L
### Lazy Loading
A design pattern that defers the initialization of an object until the point at which it is needed. In React, this is often used with `React.lazy` to load components only when they are rendered.
### Lifecycle Methods
Special methods in class components that automatically run at specific points in a component's life (mounting, updating, unmounting).
## M
### Memoization
An optimization technique used primarily to speed up computer programs by storing the results of expensive function calls. In React, `useMemo` and `React.memo` are used for this.
### Mock
A simulated object or function that mimics the behavior of real components in controlled ways. Used in testing to isolate the code under test from external dependencies.
### Mount
The lifecycle event when a component is first added to the DOM.
### MSW (Mock Service Worker)
A library for API mocking that intercepts requests at the network level. It allows you to mock REST and GraphQL APIs by intercepting requests in the browser (via Service Worker) or Node.js.
## P
### Playwright
A framework for Web Testing and Automation. It enables reliable end-to-end testing for modern web apps across all modern browsers (Chromium, Firefox, WebKit).
### Props (Properties)
Inputs to a React component. They are data passed down from a parent component to a child component.
### Prop Drilling
The process of passing data from a parent component down to a deep child component through several layers of intermediate components.
## R
### React Query
A library for fetching, caching, synchronizing and updating server state in React applications.
### React Testing Library
A light-weight solution for testing React components. It provides utilities to query the DOM in a way that resembles how users find elements (e.g., by text, label, or role).
### Reconciliation
The process through which React updates the DOM. When a component's state changes, React calculates the difference between the previous state and the new state and updates only the changed nodes in the DOM.
### Reducer
A pure function that takes the previous state and an action, and returns the next state.
### Redux
A predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
### Referential Equality
The concept that two variables are equal only if they point to the exact same location in memory. In JavaScript, objects and arrays are compared by reference, not by value (e.g., `[] === []` is false).
### Render Phase
The phase in the React rendering lifecycle where React calls your component functions, creates the Virtual DOM, and calculates differences. This phase is pure and has no side effects.
### Re-render
The process of React calling your component function again to update the UI based on new state or props.
## S
### Server-Side Rendering (SSR)
The ability of an application to contribute by converting HTML files on the server into a fully rendered HTML page for the client.
### Spy
A test double that records information about how it is called (arguments, return value, context) without necessarily replacing the functionality.
### State
An object that determines how that component renders and behaves. "State" is what allows you to create components that are dynamic and interactive.
### Stub
A test double that replaces a real component or function with a simplified version that provides canned answers to calls.
### Suspense
A component that lets you "wait" for some code to load and declaratively specify a loading state (like a spinner) while we're waiting.
## U
### Unit Test
A level of software testing where individual units/components of a software are tested. In React, this typically means testing a single function or component in isolation.
### Unmount
The lifecycle event when a component is removed from the DOM.
## V
### Virtual DOM
A lightweight copy of the actual DOM. React uses it to improve performance by calculating the most efficient way to update the real DOM.
## W
### Windowing
A technique where only the items currently visible in the viewport are rendered to the DOM. Also known as Virtualization.
## Z
### Zustand
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.