React Glossary
A comprehensive reference of React terms, concepts, and patterns. Perfect for beginners and as a quick reference for experienced developers.
C
Component
A reusable piece of UI that can contain its own logic, styling, and markup. Components are the building blocks of React applications.
Example:
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}Controlled Component
A form component whose value is controlled by React state. The component's value is always driven by the React state.
Example:
<input value={inputValue} onChange={e => setInputValue(e.target.value)} />Context
A way to pass data through the component tree without having to pass props down manually at every level.
Example:
const ThemeContext = React.createContext('light');Custom Hook
A JavaScript function that starts with "use" and may call other Hooks. Used to extract and share component logic.
Example:
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return [count, increment];
}F
H
Hook
Special functions that allow you to use React features (like state) in functional components. Hooks always start with "use".
Example:
useState, useEffect, useContext, useMemoJ
JSX
JavaScript XML - a syntax extension that allows you to write HTML-like code in JavaScript. JSX makes React components more readable and intuitive.
Example:
const element = <h1>Hello, {name}!</h1>;K
Key Prop
A special prop that helps React identify which items in a list have changed, been added, or removed. Must be unique among siblings.
Example:
items.map(item => <li key={item.id}>{item.name}</li>)L
Lifting State Up
Moving state to a common ancestor component when multiple components need to share the same changing data.
P
Props
Short for "properties", props are read-only values passed from a parent component to a child component. They allow components to be dynamic and reusable.
Example:
<UserCard name="John" age={25} />
// Inside UserCard: props.name and props.ageProps Drilling
The process of passing props through multiple component levels to reach a deeply nested component. Context API helps avoid this.
Pure Component
A component that always renders the same output for the same props and state. It has no side effects during rendering.
R
Reconciliation
The process React uses to update the DOM by comparing the new Virtual DOM tree with the previous Virtual DOM tree.
React.memo
A higher-order component that memoizes a component, preventing unnecessary re-renders if props haven't changed.
Example:
const MemoizedComponent = React.memo(MyComponent);S
State
A component's internal data that can change over time. When state changes, React re-renders the component to reflect the new state.
Example:
const [count, setCount] = useState(0);Side Effect
Any operation that affects something outside the scope of the function being executed. Examples: API calls, timers, DOM manipulation.
U
useState
A Hook that lets you add state to functional components. Returns an array with the current state value and a setter function.
Example:
const [value, setValue] = useState(initialValue);useEffect
A Hook that lets you perform side effects in functional components. Replaces lifecycle methods like componentDidMount and componentDidUpdate.
Example:
useEffect(() => {
// Effect code
return () => {
// Cleanup code
};
}, [dependencies]);Uncontrolled Component
A form component that maintains its own internal state. You access the value using a ref rather than controlling it with React state.
Example:
const inputRef = useRef();
<input ref={inputRef} />V
Virtual DOM
A JavaScript representation of the actual DOM. React uses the Virtual DOM to efficiently update only the parts of the UI that have changed.
Ready to Apply These Concepts?
Now that you understand the terminology, put it into practice with our hands-on lessons and tutorials.