React Reference

Last updated: 2026-11-02

React Reference

Alphabetical list of 80 React entries: core concepts, rendering & state, component patterns, effects & performance, routing & state management, data & engineering, ecosystem — each with syntax, a live example and an online editor.

A
AbortController	AbortController is a native browser API: pass its signal to fetch and call abort() to canc...
Action Design	An action is a plain object describing what happened: its type is the identity, usually an...
B
BrowserRouter	BrowserRouter is the routing container of react-router-dom: it watches the address and pro...
C
Callback Props	Props can carry functions as well as data. A child calls the callback the parent passed in...
children	children is a special prop: whatever sits between a component's opening and closing tags a...
Cleanup Function	The cleanup function is the teardown returned by an effect: it runs once before the next r...
Component	A component is the smallest reusable unit of a React application: a function that receives...
Component Tree	A React application is a tree of nested components: the root component sits at the top and...
Composition	React recommends composition rather than inheritance for reusing components: the parent pa...
Conditional Rendering	React has no if tag: conditional rendering means writing ordinary JavaScript logic — if st...
Controlled Components	A controlled component is one whose value is driven by React state: the value is bound to ...
createContext	createContext creates a Context object that lets data travel across levels of the tree wit...
CSS Modules	CSS Modules turn an ordinary CSS file into locally scoped styles: at build time every clas...
Custom Hooks	A custom hook is an ordinary function whose name starts with use, which may call other hoo...
D
Declarative UI	Declarative UI means you only describe what the interface should look like in a given stat...
Default Props	When a parent does not pass a prop, its value is undefined and the interface may end up bl...
Dependency Array	The dependency array tells an effect who it runs for: an empty array runs it once, and lis...
Dynamic Forms	When the number of fields is not fixed, drive the rendering from an array kept in state: e...
E
Effect Pitfalls	The pitfalls of useEffect cluster around the dependency array: a missing dependency reads ...
Entry File	The entry file — usually src/main.jsx — is where a React application starts: it mounts the...
ErrorBoundary	An ErrorBoundary is a component-level safety net: it catches errors in the child tree and ...
Event Handling	React binds events with lower camel case onXxx props such as onClick and onChange, and the...
Event Parameters	An event handler receives the event object e and can read values such as target.value or k...
Event Types	Event types come from @types/react: onClick is typed as MouseEvent<HTMLButtonElement> and ...
F
Filter & Sort Lists	Filtering and sorting a list does not mutate the original array; instead you derive a new ...
Form Inputs	Text inputs, checkboxes, selects and textareas all follow the same value-or-checked plus o...
Form Validation	The essence of validation is deriving errors from state: a validation function computes an...
forwardRef	Function components do not receive a ref by default. forwardRef forwards the ref passed in...
Framer Motion	Framer Motion (published today as the motion package) is the most popular animation librar...
Functional Updates	Passing a function to setState, such as setCount(c => c + 1), means computing the next sta...
G
Generic Components	Generic components let the type follow the data: a function List<T> renders an array of st...
J
JSX	JSX is a syntax extension for JavaScript that lets you write interface markup directly ins...
JSX vs HTML	JSX looks like HTML, but a few rules differ: attributes use lower camel case, class become...
K
key	A key is the identity of an element inside a rendered list. React relies on it to recogniz...
L
List Rendering	React renders lists by mapping an array through map() into a set of JSX elements: prepare ...
M
Multi-Step Forms	A multi-step form equals one step state, conditional rendering of the current step and a s...
N
NavLink	NavLink is a Link that knows about the active state: when the current address matches its ...
Nested Lists	When the data has a multi-level structure such as categories containing entries, you rende...
Nested Routes	Nested routes express a layout plus its child pages as parent and child Route elements: a ...
Next.js App Router	The App Router is the file-convention router introduced in Next.js 13+: every folder under...
Next.js Data Fetching	In a Next.js server component you can await fetch directly, and next.revalidate controls t...
Next.js Deploy	Vercel is the first choice for deploying Next.js — zero configuration, with support for IS...
O
Object & Array State	State must be replaced with a new object or a new array before React notices an update: us...
P
preventDefault	e.preventDefault() stops the browser's default action for an event, most famously the full...
Props	Props are the data a parent component hands down to a child, and they behave like function...
ProtectedRoute	A route guard checks permissions before the page opens: wrap a route in ProtectedRoute, an...
Provider Pattern	The Provider pattern packages the data and the methods that change it into a stateful Prov...
R
React DevTools	React DevTools is the official browser extension that lets you inspect the component tree ...
React.lazy	React.lazy(() => import('./Page')) turns a component into a chunk that is only downloaded ...
React.memo	Wrapping a component in React.memo lets it skip a re-render when its props stay equal in a...
Reducer Patterns	A few idiomatic patterns keep reducers tidy: lazy initialization through the third argumen...
Redux Toolkit	Redux Toolkit (RTK) is the officially recommended way to write Redux: createSlice generate...
Render Props	Render props means passing the JSX you want rendered to a component as a function prop: th...
Rendering Model	React updates in two steps: it first runs your component function to produce new JSX (rend...
Rules of Hooks	Hooks obey two iron rules: call them only at the top level of a function component or a cu...
S
styled-components	styled-components is the flagship CSS-in-JS library: you write CSS inside JavaScript with ...
T
Tailwind in React	Tailwind CSS is an atomic CSS framework: it splits styles into single-purpose utility clas...
Three-State Fetching	Every data request has three states: loading while it is in flight, success once the data ...
Typed Props	In TypeScript you use interface or type to build a contract for props: wrong names, missin...
U
UI Libraries	React component libraries come in two flavours: full libraries such as Ant Design, MUI and...
useCallback	useCallback caches a function reference: while the dependencies stay the same it returns t...
useContext	useContext takes a Context object created by createContext and returns the value of the ne...
useDebounce	useDebounce takes a value that changes rapidly, such as the text of a search box, and retu...
useEffect	useEffect is the declarative home for side effects — data fetching, subscriptions, timers,...
useFetch Pattern	Extract the three-state request logic into a useFetch(url) custom Hook: a component calls ...
useLocalStorage	useLocalStorage keeps the reads and writes of useState in sync with localStorage: it reads...
useMemo	useMemo caches the result of a computation: while the dependencies stay the same it return...
useMutation	useMutation manages the async state of write operations (POST, PUT, DELETE): mutate trigge...
useNavigate	useNavigate returns a navigate function: go to the home page after signing in, return to t...
useParams	useParams returns an object with the dynamic segments of the currently matched route: when...
useQuery	useQuery from TanStack Query manages the whole request lifecycle plus the cache: it dedupl...
useReducer	useReducer concentrates the question "how does the state change?" into one pure reducer fu...
useRef	useRef returns a container with a current property: it keeps any value alive across render...
useRef as Container	A ref is not only for the DOM: it is a sticky-note box that survives renders and suits dat...
useState	useState adds a state variable to a function component: it returns the current value and a...
V
Virtual DOM	The virtual DOM is a lightweight tree of plain JavaScript objects that React keeps in memo...
Vite Setup	Vite is today's mainstream scaffolder for React projects: one command generates a developm...
Vitest + RTL	Vitest is a very fast test runner that shares its configuration with Vite, and React Testi...
W
When Not to Memo	memo, useMemo and useCallback are not free: comparing and caching cost something and the c...
Z
Zustand	Zustand is a minimal global state library: create defines a store, components call it like...

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

React Reference

React Reference

🙏 帮我们做得更好