Common Patterns

Overview

Almost every interactive web app written in React eventually has to do the same four things: fetch data from a server, keep that data in component state as the UI grows, decide who is allowed to see what, and remember a few pieces of information between page loads. This section groups guides for each of those concerns. Each linked page below dives into one pattern with worked examples; this page is the index.

The patterns themselves are not React-specific — authentication and cookies are web-platform features, and state management is a general UI problem — but the example code on each sub-page shows the React-idiomatic version of the pattern, building on the foundations covered in React.

Topics in this section

• React Data Fetching From an API — calling REST APIs from React components using fetch, async/await, and axios; handling loading and error states; and choosing between hand-rolled effects and a caching library. The React team recommends a client-side cache such as TanStack Query, SWR, or a framework-provided loader over manual useEffect fetching once an app outgrows the simplest case, and this guide shows both approaches so you can pick.
• React Expanded State Management — choosing between local useState, lifting state up to a common parent, useReducer for complex update logic, and Context to avoid prop drilling. The progression mirrors the official “Managing State” learning track and ends with the reducer-plus-context combination that scales to deeply nested trees.
• React Authentication Flows — the distinction between authentication (“who are you?”) and authorization (“what are you allowed to do?”); login/logout flows; protecting routes from unauthenticated access; storing and refreshing tokens; and implementing role-based access control.
• React Caching Data With Cookies — using cookies to persist small pieces of data across page loads and requests, when to reach for cookies versus localStorage or sessionStorage, and the security flags (HttpOnly, Secure, SameSite) that control how a cookie is exposed to JavaScript and sent on cross-site requests.

Where to go next

If you are new to React itself, start with React for the foundational topics (components, props, JSX, and the core hooks) before working through the patterns above. When you hit bugs while applying any of these patterns, see Debugging and React DevTools for debugging for tools and tactics.