React State & Context in React Native

Core concepts

1. useState and useReducer: Use useState for simple values and useReducer when updates follow rules, such as a multi-step form or a game state. — React docs
2. Lifting state up: When two siblings need the same value, move it to their nearest common parent and pass it down. — React docs
3. Context: Context shares a value with a whole subtree without prop drilling. Split contexts by purpose so a change in one does not re-render unrelated consumers. — React docs
4. Derived state: Compute values from existing state during render instead of storing duplicates, for example const total = items.length. — React docs

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

• React state basics — YouTube search: React useState useReducer context explained

Explanation

When Context becomes a problem

A context value that changes often re-renders every consumer. If you see unrelated screens re-rendering, move that data to a store with selectors.

Keep effects honest

Effects synchronise with outside systems. Do not use effects to copy one state into another; derive it instead.

What Is It?

These are React's built-in ways to hold and share data in components.

Why Should I Care?

Using the simplest tool keeps code small and easy for an agent to modify.

Real World Analogy

State is a notebook each component carries, and Context is a notice board on the wall for everyone in the room.

Visual Mental Model

useState (one component) -> lift up (siblings) -> Context (subtree) -> store (app)

Smallest Possible Example

const ThemeContext = React.createContext<'light' | 'dark'>('light');

export function useTheme() {
  return React.useContext(ThemeContext);
}

Common Mistakes

❌ Storing derived values in state.

They go out of sync with their source; compute them during render.

❌ One giant context.

Split by concern so updates stay local.

Build This Mini Project

Build a settings screen with theme and notification toggles using Context for theme and local state for the form.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Remove derived state

Review components in [folder] for state that duplicates other state or props. Replace it with values derived during render and explain each change.

Split a context

This context holds unrelated values: [paste]. Split it into focused contexts with custom hooks and update consumers without behaviour changes.

Rules, databases & blogs to use

• TypeScript React rule: React TypeScript conventions

Resources

• React: managing state