codez.guru

Become a member
Home » Basic Guide to Zustand » Reading and Updating State in React Components

Reading and Updating State in React Components

Basic Guide to Zustandzustand

On this Page

  • Reading State with Selectors
  • Updating State from Events
  • Destructuring vs Selecting
  • Render Optimization Tips

On this Guide

  • Lesson 01: Introduction to Zustand and Store Basics
  • Lesson 02: Creating Your First Store with TypeScript
  • Lesson 03: Reading and Updating State in React Components
  • Lesson 04: Selectors and Optimizing Renders
  • Lesson 05: Handling Booleans, Counters, and Simple Objects
  • Lesson 06: Derived State and Computed Values
  • Lesson 07: Type Inference and store typing best practices
  • Lesson 08: Custom Hooks and Reusable State Accessors

Reading State with Selectors

Zustand uses a hook-based API to access store values:

const bears = useBearStore((state) => state.bears);

You can safely use this in your JSX:

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h2>Bears: {bears}</h2>;
}

Each call to useBearStore subscribes your component to that part of the state.

Updating State from Events

Actions in your store (like increase()) are just functions:

function IncreaseButton() {
  const increase = useBearStore((state) =&gt; state.increase);
  return <button onclick="{increase}">+1 Bear</button>;
}

Zustand gives you full freedom to use store logic anywhere in your component tree — no need for context providers.

Destructuring vs Selecting

❌ Avoid this:

const { bears, increase } = useBearStore(); // BAD

✅ Instead, select exactly what you need:

const bears = useBearStore((state) =&gt; state.bears);
const increase = useBearStore((state) =&gt; state.increase);

This reduces unnecessary re-renders.

Render Optimization Tips

  • ✅ Use one selector per value to avoid re-renders
  • ✅ Don’t destructure the entire state — only subscribe to what you use
  • ✅ Use shallow comparison (shallow) when selecting multiple values
import { shallow } from 'zustand/shallow';

const { bears, increase } = useBearStore(
  (state) =&gt; ({ bears: state.bears, increase: state.increase }),
  shallow
);

Summary

  • Read store values in React using useStore((state) =&gt; state.key)
  • Trigger updates by calling actions
  • Optimize renders by selecting only what’s needed
  • Zustand makes state access feel just like React hooks — because it is

Next: Lesson 04 – Selectors and Optimizing Renders