liminfo

React Reference

Free reference guide: React Reference

27 results

About React Reference

The React Reference is a structured, searchable cheat sheet for the React library with TypeScript. It covers six core categories — Component, Hooks, State Management, Events, JSX, and Optimization — giving frontend developers a single place to look up any React API or pattern. Each entry includes a TypeScript-typed code example, making it directly applicable to modern React projects that use TypeScript. The reference is organized to serve developers who need a quick reminder of hook signatures, prop patterns, or performance optimization techniques.

The Hooks section is the most comprehensive part of the reference, covering all seven built-in hooks: `useState` for local state with functional update pattern, `useEffect` for side effects with cleanup and dependency arrays, `useRef` for DOM references and mutable values that do not trigger re-renders, `useMemo` for expensive computations that should only recompute when dependencies change, `useCallback` for stable function references to prevent unnecessary child re-renders, `useContext` for consuming React context without prop drilling, and `useReducer` for complex state logic with discriminated union action types. It also covers building custom hooks to encapsulate reusable stateful logic.

The State Management section covers three complementary approaches: the Context API for sharing state across a component tree without external libraries, the state lifting pattern for sharing state between sibling components through a common parent, and Zustand as a lightweight external state manager for global state. The Optimization section covers `React.memo` for preventing unnecessary re-renders of pure components, `React.lazy` with `Suspense` for code splitting and lazy loading, `useTransition` for deferring low-priority state updates to keep the UI responsive, and stable `key` prop usage for efficient list reconciliation.

Key Features

  • Covers 6 categories: Component, Hooks, State Management, Events, JSX, Optimization
  • All built-in hooks: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer
  • Custom hook pattern with TypeScript generics (useLocalStorage example)
  • State management: Context API (AuthProvider), state lifting, Zustand (create store)
  • Event handling: onClick/onChange/onSubmit, typed event handlers (ChangeEvent, FormEvent, KeyboardEvent)
  • JSX: Fragments (<>), spread props, conditional rendering, list rendering with key, dangerouslySetInnerHTML
  • Optimization: React.memo, lazy/Suspense code splitting, useTransition, stable key prop patterns
  • 100% client-side — no sign-up, no download, no data sent to any server

Frequently Asked Questions

What is the difference between useState and useReducer?

`useState` is simpler and best for independent pieces of state — a boolean toggle, a string input value, or a single number. `useReducer` is better when state transitions are complex, when the next state depends on the previous state in multiple ways, or when you have multiple related state values that change together. `useReducer` with a typed `Action` union makes state transitions explicit and testable, similar to Redux but without the boilerplate. When you find yourself writing many `setState` calls that are related, consider consolidating them with `useReducer`.

When should I use useCallback and useMemo?

Use `useCallback` to memoize a function so that it maintains the same reference between renders. This matters when passing a callback to a child component wrapped in `React.memo` — without `useCallback`, the function reference changes on every render, causing the child to re-render even if its props are otherwise unchanged. Use `useMemo` to memoize the result of an expensive computation (like filtering and sorting a large array) so it only recomputes when its dependencies change. Avoid premature optimization — only add these hooks when you can measure a performance problem.

How does the useEffect cleanup function work?

The function returned from `useEffect` is the cleanup function. It runs before the effect runs again (on dependency changes) and when the component unmounts. Use it to cancel subscriptions, clear timers, abort fetch requests, or remove event listeners. Without cleanup, you risk memory leaks and bugs where effects from unmounted components try to update state. For example, if you subscribe to a data source in the effect, return `() => subscription.unsubscribe()` as the cleanup.

What is the difference between useRef and useState for storing values?

Both can store values across renders, but they behave differently: updating a `useState` value triggers a re-render; updating a `useRef` value (via `.current`) does NOT trigger a re-render. Use `useRef` for values that the component needs to remember but that should not cause a visual update when they change — render counts, previous prop values, timer IDs, and DOM node references. Use `useState` for values that the UI needs to reflect.

How does React Context API work and when should I use it?

Context provides a way to share a value through the component tree without manually passing props at every level. Create a context with `createContext(defaultValue)`, wrap the tree in a `<Context.Provider value={...}>`, and consume it with `useContext(Context)` in any child. Context is ideal for genuinely global data: the current user, theme, locale, or authentication state. Avoid using it for frequently changing state (like form inputs) as it will cause all consumers to re-render on every change. For complex global state with actions, consider Zustand or Redux.

What is React.memo and when does it help?

`React.memo` is a higher-order component that wraps a component and memoizes its rendered output. If the component receives the same props as the previous render, React skips re-rendering it and reuses the cached result. It helps when a parent component re-renders frequently but a child component's props rarely change — for example, a list item component in a large list. It does not help if props change on every render, and it adds a small overhead for the comparison, so only use it when you can profile and confirm a benefit.

How does lazy loading with React.lazy and Suspense work?

`React.lazy(() => import("./Component"))` creates a lazily loaded component that is only fetched from the server when it is first rendered. Wrap it in `<Suspense fallback={<Loading />}>` to show a fallback while the component is loading. This splits your bundle so users only download the code for components they actually visit, improving initial load time. Use it for route-level components, modals, or any large component that is not visible on the initial render. The lazy component must be a default export.

What is the forwardRef pattern and when is it needed?

`forwardRef` allows a parent component to pass a `ref` to a child component's DOM element. Normally, `ref` is not a regular prop and cannot be forwarded. Wrap the child component with `React.forwardRef((props, ref) => <input ref={ref} {...props} />)` to accept and forward the ref. This is needed when building reusable form components (custom Input, Select, TextArea) that the parent needs to focus programmatically, measure the size of, or integrate with external libraries that require direct DOM access.