GuideBeginner
Frontend State And Data
Learn to manage a frontend app's state and data at scale: distinguish the four kinds of state — local, global client state, server state, and URL state — use Context without overusing it, choose a global store (Zustand pattern) when it's the right call, and, the guide's core focus, treat server state for what it is: a cache of remote data, handled with React Query (TanStack Query) for fetching, caching, revalidation, deduplication, and mutations. The core idea is that most "state management problems" are actually server state misclassified: it's not your state, it's a cached copy of the truth that lives on the backend. Each module runs a mini-version of the library in play in Node.js — a store with `getState`/`setState`, a query cache with stale-while-revalidate and deduplication, a mutation with invalidation and optimistic rollback — to verify the reasoning. The throughline is Mercado's storefront, already built in the React Fundamentals Guide: here its products come from the server via React Query, its cart is a global store, its search and filters live in the URL, and its theme is Context. It continues directly from the React Fundamentals Guide within NIEVA's Fullstack ecosystem.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Yes
- certificate
- Free
- access
Outcomes
What you'll be able to do
- Classify each piece of state into its correct box: local, global client state, server state, or URL state
- Use React Context for shared state (theme, user) without triggering unnecessary re-renders of the whole subtree
- Build and use a global store (Zustand pattern) with selectors, and know when a store beats Context
- Understand why server state is different: it goes stale, needs refetching, is shared across users, and can fail
- Fetch data with React Query: `queryKey`, caching, stale-while-revalidate, request deduplication, and loading/error states
- Write mutations with `useMutation`, invalidate queries after writing, and apply optimistic updates with rollback
- Use the URL as the source of truth for filters, search, and pagination: shareable state with browser back/forward
- Manage Mercado's entire storefront state in its correct box: URL, global store, Context, and React Query combined
Before you start
What you need to bring
It's for you if...
- React developers already comfortable with `useState`/`useEffect` who need to scale to an app with shared state and remote data
- Devs who dump everything into a global store or sync server data with `useEffect` by hand and want to stop
- Those building apps with frequently changing data who need caching, revalidation, and mutations handled well
- Teams evaluating Redux, Context, or a query library and looking for the judgment to choose correctly
Requirements and materials
- React fundamentals completed: `useState`, events, `useEffect`, lifting state, or having completed the React Fundamentals Guide
- Comfortable with JavaScript ES6+
- Node.js installed to run each module's logic
- Basic familiarity with `fetch`/HTTP and REST APIs
Content
The syllabus, module by module
Open any of them to see its lessons.
- Module introduction: the data that isn't yours
- Server state isn't your state
- The four properties of server state
- `useEffect` for fetching has no cache or dedup
- Race conditions and stale copies
- Loading and error, repeated in each component
- You need a cache layer
- Mini-project: audit Mercado's product fetching
- Module introduction: from orchestrating fetches to declaring data
- `useQuery`: you declare the data, the library manages the state
- The `queryKey` is the data's identity
- The cache and the dedup: N components, one fetch
- Stale-while-revalidate: `staleTime` and `gcTime`
- `isLoading`, `isError`, `data`, `isFetching`
- React Query in Mercado: catalog and search
- Mini-project: Mercado's products with React Query
- Module introduction: the state that travels in the link
- The URL is the source of truth
- Parse and serialize with URLSearchParams
- Shareable, bookmarkable and with back/forward
- What goes in the URL and what doesn't
- Parse, validate and defaults
- The router integrates this
- Mini-project: Mercado's search in the URL
- Module introduction: one method, four boxes, one app
- The classification table, complete
- Layer 1: the theme and the user in Context
- Layer 2: the cart in the global store
- Layer 3: the products with React Query
- Layer 4: a mutation with invalidation
- Layer 5: the filters and the search in the URL
- Project: manage all of Mercado's state
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Yes. It's issued automatically once you finish every lesson, with a verifiable code you can share on LinkedIn.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!