hub / github.com/coryhouse/react-state-demo

github.com/coryhouse/react-state-demo @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

36 symbols 77 edges 25 files 1 documented · 3%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

This app showcases eight ways to handle React state.

8 ways to handle React state

Each branch implements the same features using different approaches.

Branch	State examples
main	useState, useRef, web storage, lifted state, derived state
ref	useRef for uncontrolled components
context	context
immer	immer
useReducer	useReducer
class	Class-based state example
react-query	React query for remote state

Quick Start

Make sure you have these installed:

Node 10 or newer (To check your version: npm -v)
Git

Then, run these commands on the command line:

npm install
npm start

npm start starts the app and the mock API.

This project was bootstrapped with Create React App.

Extension points exported contracts — how you extend this code

Chainable (Interface)

(no doc)

cypress/support/index.d.ts

Core symbols most depended-on inside this repo

addToCart

called by 6

cypress/support/index.d.ts

useFetch

called by 2

src/services/useFetch.js

src/ErrorBoundary.jsx

Shape

Function 30

Method 3

Class 2

Interface 1

Languages

TypeScript100%

Modules by API surface

src/Checkout.jsx5 symbols

src/ErrorBoundary.jsx4 symbols

src/App.jsx4 symbols

cypress/integration/detail.spec.js3 symbols

src/useLocalStorage.js2 symbols

src/services/useFetchAll.js2 symbols

src/services/shippingService.js2 symbols

src/services/productService.js2 symbols

src/Products.jsx2 symbols

src/Cart.jsx2 symbols

cypress/support/index.d.ts2 symbols

src/services/useFetch.js1 symbols

For agents

$ claude mcp add react-state-demo \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact