Zustand — Complete Guide

Zustand — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 7/8/2026

On this page

React.js Tutorial · Lesson 43 of 100

Error Handling

Beginner ✓ → Intermediate ✓ → Advanced → Professional

Advanced · 3 — Production skills · ~18 min read · Module 5: API & State Management

Introduction

This is advanced material: Error Handling. It is what teams use on live products. Read the example carefully and try changing one line at a time to see what happens. Error handling in React means catching failed API calls, showing friendly messages, and using Error Boundaries for unexpected render crashes. White screens and silent failures confuse users. Good apps explain what went wrong and offer retry.

State mistakes cause the most React bugs for beginners. Keep server data and UI state separate — this lesson shows how teams do that.

When will you use this?

Use these patterns when data is shared across pages or comes from a server.

Shopping carts, user sessions, and API data need clear state patterns.
Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

Real-world: friendly transaction error UI

When statement API fails, HDFC shows retry banner instead of blank white screen — error boundary + query error state.

Production-style code

function StatementPage() {
  const { data, error, refetch, isFetching } = useQuery({
    queryKey: ['statement'],
    queryFn: () => bankingApi.get('/statement').then(r => r.data)
  });

  if (error) {
    return (
      <div role="alert" className="error-panel">
        <p>Could not load transactions. Check your connection.</p>
        <button type="button" onClick={() => refetch()} disabled={isFetching}>
          {isFetching ? 'Retrying…' : 'Try again'}
        </button>
      </div>
    );
  }
  return <TransactionList rows={data} />;
}

What happens in production: Support tickets drop when users see actionable errors — professional apps never fail silently.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function ProductList() {
  const [error, setError] = useState(null);
  if (error) return (
    <div>
      <p>Something went wrong: {error}</p>
      <button onClick={() => window.location.reload()}>Retry</button>
    </div>
  );
  // ... fetch and render list
}

Line-by-line walkthrough

Code	What it means
`function ProductList() {`	Defines a function — often a component or event handler.
`const [error, setError] = useState(null);`	Creates state: a value that can change, plus a function to update it.
`if (error) return (`	Sends UI or a value back to whoever called this function.
`<div>`	JSX tag — a UI element or custom component on the page.
`<p>Something went wrong: {error}</p>`	JSX tag — a UI element or custom component on the page.
`<button onClick={() => window.location.reload()}>Retry</button>`	Defines a function — often a component or event handler.
`</div>`	Part of the Error Handling example — read it together with the lines before and after.
`);`	Closes a block started by { or ( above.
`// ... fetch and render list`	Comment — notes for humans; the computer ignores it.
`}`	Closes a block started by { or ( above.

How it works (big picture)

Store error message in state.
Render a fallback UI instead of crashing.
Error Boundaries catch errors in child component trees.

Do this on your computer

Add error state to data-fetching components.
Show message + retry button.
Learn Error Boundary for unexpected bugs.
Read the real-world section and name which part of the app uses this topic.
Run the example locally and confirm the same behavior in the browser.
Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.
Change the initial state value and see the starting UI change.
Open React DevTools (browser extension) while running Error Handling and inspect component props/state.

Remember

try/catch or .catch for async errors. User-friendly messages in UI. Error Boundaries for render failures.

Common questions

Error Boundary for hooks?

Error Boundaries catch render errors, not async errors inside useEffect — handle those with state.

How long should I spend on Error Handling?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.

What if I get stuck on Error Handling?

Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Error Handling used in real jobs?

See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.

Questions on this lesson 0

No questions yet — be the first to ask!