1.1 What is React? · 1.1.1 Building a UI from components · 1.1.2 Synchronizing state and UI · 1.1.3 Understanding component types · 1.2 What’s new in React? · 1.3 React Hooks can add state to function components · 1.3.1 Stateful function components: Less code, better organization · 1.3.2 Custom hooks: Easier code reuse · 1.3.3 Third-party hooks provide ready-made, well-tested functionality · 1.4 Better UX with Concurrent Mode and Suspense · 1.4.1 Concurrent Mode · 1.4.2 Suspense · 1.5 React’s new publication channels · 1.6 Whom is this book for? · 1.7 Getting started · 1.8 Summary
2.1 Setting up the bookings manager app · 2.1.1 Generating the app skeleton with create-react-app · 2.1.2 Editing the four key files · 2.1.3 Adding a database file for the application · 2.1.4 Creating page components and a UserPicker.js file · 2.2 Storing, using, and setting values with useState · 2.2.1 Assigning new values to variables doesn’t update the UI · 2.2.2 Calling useState returns a value and an updater function · 2.2.3 Calling the updater function replaces the previous state value · 2.2.4 Passing a function to useState as the initial value · 2.2.5 Using the previous state when setting the new state · 2.3 Calling useState multiple times to work with multiple values · 2.3.1 Using a drop-down list to set state · 2.3.2 Using a check box to set state · 2.4 Reviewing some function component concepts · 2.5 Summary
3.1 Updating multiple state values in response to a single event · 3.1.1 Taking users out of the movie with unpredictable state changes · 3.1.2 Keeping users in the movie with predictable state changes · 3.2 Managing more complicated state with useReducer · 3.2.1 Updating state using a reducer with a predefined set of actions · 3.2.2 Building a reducer for the BookablesList component · 3.2.3 Accessing component state and dispatching actions with useReducer · 3.3 Generating the initial state with a function · 3.3.1 Introducing the WeekPicker component · 3.3.2 Creating utility functions to work with dates and weeks · 3.3.3 Building the reducer to manage dates for the component · 3.3.4 Passing an initialization function to the useReducer hook · 3.3.5 Updating BookingsPage to use WeekPicker · 3.4 Reviewing some useReducer concepts · 3.5 Summary
4.1 Exploring the useEffect API with simple examples · 4.1.1 Running side effects after every render · 4.1.2 Running an effect only when a component mounts · 4.1.3 Cleaning up side effects by returning a function · 4.1.4 Controlling when an effect runs by specifying dependencies · 4.1.5 Summarizing the ways to call the useEffect hook · 4.1.6 Calling useLayoutEffect to run an effect before the browser repaints · 4.2 Fetching data · 4.2.1 Creating the new db.json file · 4.2.2 Setting up a JSON server · 4.2.3 Fetching data within a useEffect hook · 4.2.4 Working with async and await · 4.3 Fetching data for the BookablesList component · 4.3.1 Examining the data-loading process · 4.3.2 Updating the reducer to manage loading and error states · 4.3.3 Creating a helper function to load data · 4.3.4 Loading the bookables · 4.4 Summary
5.1 Updating state without causing a re-render · 5.1.1 Comparing useState and useRef when updating state values · 5.1.2 Calling useRef · 5.2 Storing timer IDs with a ref · 5.3 Keeping references to DOM elements · 5.3.1 Setting focus on an element in response to an event · 5.3.2 Managing a text box via a ref · 5.4 Summary
6.1 Passing shared state to child components · 6.1.1 Passing state from a parent by setting props on the children · 6.1.2 Receiving state from a parent as a prop · 6.1.3 Receiving an updater function from a parent as a prop · 6.2 Breaking components into smaller pieces · 6.2.1 Seeing components as part of a bigger app · 6.2.2 Organizing multiple components within a page’s UI · 6.2.3 Creating a BookableDetails component · 6.3 Sharing the state and dispatch function from useReducer · 6.3.1 Managing state in the BookablesView component · 6.3.2 Removing an action from the reducer · 6.3.3 Receiving state and dispatch in the BookablesList component · 6.4 Sharing the state value and updater function from useState · 6.4.1 Managing the selected bookable in the BookablesView component · 6.4.2 Receiving the bookable and updater function in BookablesList · 6.5 Passing functions to useCallback to avoid redefining them · 6.5.1 Depending on functions we pass in as props · 6.5.2 Maintaining function identity with the useCallback hook · 6.6 Summary
7.1 Breaking the cook’s heart by calling, “O, shortcake!” · 7.1.1 Generating anagrams with an expensive algorithm · 7.1.2 Avoiding redundant function calls · 7.2 Memoizing expensive function calls with useMemo · 7.3 Organizing the components on the Bookings page · 7.3.1 Managing the selected bookable with useState · 7.3.2 Managing the selected week and booking with useReducer and useState · 7.4 Efficiently building the bookings grid with useMemo · 7.4.1 Generating a grid of sessions and dates · 7.4.2 Generating a lookup for bookings · 7.4.3 Providing a getBookings data-loading function · 7.4.4 Creating the BookingsGrid component and calling useMemo · 7.4.5 Coping with racing responses when fetching data in useEffect · 7.5 Summary
8.1 Needing state from higher up the component tree · 8.1.1 Displaying a call-to-action message when the page first loads · 8.1.2 Displaying booking information when a visitor selects a booking · 8.1.3 Displaying an edit button for a user’s bookings: The problem · 8.1.4 Displaying an edit button for a user’s bookings: The solution · 8.2 Working with custom providers and multiple contexts · 8.2.1 Setting an object as the context provider’s value · 8.2.2 Moving the state to a custom provider · 8.2.3 Working with multiple contexts · 8.2.4 Specifying a default value for a context · 8.3 Summary
9.1 Extracting functionality into custom hooks · 9.1.1 Recognizing functionality that could be shared · 9.1.2 Defining custom hooks outside your components · 9.1.3 Calling custom hooks from custom hooks · 9.2 Following the Rules of Hooks · 9.2.1 Call hooks only at the top level · 9.2.2 Call hooks only from React functions · 9.2.3 Using an ESLint plugin for the rules of hooks · 9.3 Extracting further examples of custom hooks · 9.3.1 Accessing window dimensions with a useWindowSize hook · 9.3.2 Getting and setting values with a useLocalStorage hook · 9.4 Consuming a context value with a custom hook · 9.5 Encapsulating data fetching with a custom hook · 9.5.1 Creating the useFetch hook · 9.5.2 Using the data, status, and error values the useFetch hook returns · 9.5.3 Creating a more specialized data-fetching hook: useBookings · 9.6 Summary
10.1 Accessing state in the URL with React Router · 10.1.1 Setting up routes to enable nesting · 10.1.2 Adding nested routes to the Bookables page · 10.1.3 Accessing URL parameters with the useParams hook · 10.1.4 Navigating with the useNavigate hook · 10.2 Getting and setting query string search parameters · 10.2.1 Getting search parameters from the query string · 10.2.2 Setting the query string · 10.3 Streamlining data-fetching with React Query · 10.3.1 Introducing React Query · 10.3.2 Giving components access to a React Query client · 10.3.3 Fetching data with useQuery · 10.3.4 Accessing data in the query cache · 10.3.5 Updating server state with useMutation · 10.4 Summary
11.1 Importing code dynamically with the import function · 11.1.1 Setting up a web page to load JavaScript when a button is clicked · 11.1.2 Using default and named exports · 11.1.3 Using static imports to load JavaScript · 11.1.4 Calling the import function to dynamically load JavaScript · 11.2 Importing components dynamically with lazy and Suspense · 11.2.1 Converting a component to a lazy component with the lazy function · 11.2.2 Specifying fallback content with the Suspense component · 11.2.3 Understanding how lazy and Suspense work together · 11.2.4 Code splitting an app on its routes · 11.3 Catching errors with error boundaries · 11.3.1 Checking out the error boundary example in the React docs · 11.3.2 Creating our own error boundary · 11.3.3 Recovering from errors · 11.4 Summary
12.1 Data fetching with Suspense · 12.1.1 Upgrading promises to include their status · 12.1.2 Using the promise status to integrate with Suspense · 12.1.3 Fetching data as early as possible · 12.1.4 Fetching new data · 12.1.5 Recovering from errors · 12.1.6 Checking the React docs · 12.2 Using Suspense and error boundaries with React Query · 12.3 Loading images with Suspense · 12.3.1 Using React Query and Suspense to provide an image-loading fallback · 12.3.2 Prefetching images and data with React Query · 12.4 Summary
13.1 Making smoother transitions between states · 13.1.1 Avoiding receded states with useTransition · 13.1.2 Giving users feedback with isPending · 13.1.3 Integrating transitions with common components · 13.1.4 Holding on to old values with useDeferredValue · 13.2 Using SuspenseList to manage multiple fallbacks · 13.2.1 Showing data from multiple sources · 13.2.2 Controlling multiple fallbacks with SuspenseList · 13.3 Concurrent Mode and the future · 13.4 Summary
useStateuseState is a React Hook that adds a state value and its state-updating function to a function component.
React hookReact Hooks are functions that let React function components access state, lifecycle behavior, and other React capabilities.
custom hookA custom hook is a reusable function that encapsulates React hook logic and can be called by multiple function components.
useEffectThe useEffect Hook is a React API function for declaring and managing side effects in function components.
dependency arrayA dependency array is an array passed to useEffect that determines when the effect is run again based on dependency changes.
useQueryuseQuery is a React Query hook that fetches asynchronous data and returns its data, status, and error state while managing cached results.
useSearchParamsuseSearchParams is a React Router hook that provides the current URL search parameters and a function for updating them.
React contextA context object is a React object that identifies a shared value and provides the associated provider and default-value configuration.
concurrent renderingConcurrent Mode is a React rendering mode that allows rendering work to be interrupted, prioritized, and resumed to keep interfaces responsive.
useReduceruseReducer is a built-in React Hook that manages component state through a reducer function and dispatched actions.
refA React ref is a persistent mutable object that provides access to a value, commonly a rendered DOM element, through its current property.
redux actionAn action object is a JavaScript object representing a state-change request through properties such as type and payload.
useRefuseRef is a React Hook that returns a persistent mutable reference object whose current value can hold a DOM element or other value without causing re-rendering when changed.
cachingA cache is temporary storage of previously retrieved data kept for faster access and synchronization with its source.
useTransitionuseTransition is a React Hook that marks state updates as non-urgent transitions so urgent interactions can remain responsive.
error boundaryErrorBoundary is a reusable React component from react-error-boundary that catches descendant rendering errors and renders a configured fallback component.
lazylazy is a React API for defining a component whose code is loaded on demand.
dispatchA dispatch function is the function returned by useReducer that sends an action to the reducer for state transition.
useMutationuseMutation is a React Query hook that coordinates an operation for changing server-side data and exposes its execution state.
ReactReact is a JavaScript library for building user interfaces from declarative, composable components.
side effectA side effect is an operation performed by code that changes state outside the value it directly computes or interacts with external systems.
fallbackA fallback is alternate user-interface content displayed while the intended content is unavailable or an error has occurred.
query keyA query key is a structured identifier that uniquely describes a React Query data query for caching and lookup.
useContextuseContext is a React Hook that reads the current value from a React context.
useNavigateuseNavigate is a React Router hook that returns a function for programmatically changing the current URL and navigating to another route.
useMemouseMemo is a React Hook that memoizes a calculated value and recomputes it when specified dependencies change.
loadingA loading state is component data indicating that required code, assets, or data are not yet ready for rendering.
component re-renderingRe-rendering is the process of producing an updated user-interface description after relevant application data changes.
dynamic importA dynamic import is a JavaScript import expression that asynchronously loads a module at runtime and returns a promise for its module namespace.
React QueryReact Query is a library for fetching, caching, synchronizing, and updating asynchronous server state in React applications.
useDeferredValueuseDeferredValue is a React Hook that returns a deferred version of a value so rendering based on it can lag behind more urgent updates.
fetch on renderFetch on render is a data-fetching technique in which a component renders before initiating its request for data.
usefetchuseFetch is a custom React Hook that fetches a resource and exposes its data, status, and error state.
data-access functionA function that retrieves asynchronous data and exposes pending, error, or loaded outcomes for integration with Suspense.
race conditionA race condition is a correctness problem in which the result depends on the timing or ordering of concurrent operations.
code splittingCode splitting is a technique that divides an application's code into separately loadable bundles.
class componentA class component is a React component defined as a JavaScript class extending React's component base or compatible class behavior.
JSXJSX is a JavaScript syntax extension for describing user-interface elements with an HTML-like notation.
query clientA React Query client is an object that manages query and mutation behavior, including access to the query cache.
SuspenseListSuspenseList is a React component that coordinates the reveal order and fallback display of multiple Suspense boundaries.
initial stateInitial state is the state value supplied when a stateful component or state-management mechanism is first initialized.
useReducer initialization functionA useReducer initialization function is an optional function that computes the initial reducer state from an initialization argument.
lifting state upLifting state up is the technique of moving shared state from a child component to a common ancestor so multiple components can access it.
multiple contextContext separation is the practice of representing independently consumed shared values with distinct React contexts.
rules of hooksThe Rules of Hooks are React conventions requiring Hooks to be called only from function components or custom Hooks and only at the top level of those functions.
identityFunction identity is the property by which a function value is distinguished from other function values, including whether it remains the same value across renders.
uncontrolled formAn uncontrolled component is a React component whose state is read from and managed through the DOM rather than being fully held in React state.
default exportA default export is the single primary value that a JavaScript module can export for import without requiring a matching exported name.
React RouterReact Router is a library of React components and APIs for managing client-side navigation and route matching.
useParamsuseParams is a React Router hook that returns parameters matched from the current route URL.
current propertyA ref current property is the mutable property on a React ref object that contains its current referenced value or DOM element.
useCallbackuseCallback is a React Hook that memoizes a function so its identity can remain stable across renders until specified dependencies change.
local storageLocal storage is a browser-provided key-value storage mechanism that persists string data across page visits.
remote dataServer state is application data whose authoritative value is maintained by a remote server and synchronized to clients.
getQueryDatagetQueryData is a React Query query-client method that returns previously cached data for a query key.
initialization argumentAn initialization argument is the value passed to useReducer for an initialization function to use when computing initial state.
createContextcreateContext is a React API function that creates a context object for sharing a value with descendant components.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.
