State Architecture Patterns in React: A Review

State Dependencies & Application Architecture

  • What manages (fetches/stores/updates/etc.) this data?
  • How is it initially distributed to the components that depend on it?
  • How are updates to this data published to components?

React’s UI Component Hierarchy

React and State Distribution

The Naive Hierarchical Architectural Pattern

Hierarchy vs. Architecture in the Naive Approach

The nearest common ancestor is forced to deal with a shared state dependency that cuts across the hierarchy
Layout changes can force state to migrate upward

Links To All Chapters

  1. Information Architecture in React and the Naive Hierarchical Pattern
  2. The Top-Heavy Architecture, Flux and Performance
  3. Articulation Points, react-zine, An Overall Strategy and Flux-duality

--

--

--

I’m a cognitive science nerd with a graduate degree in philosophy of physics who makes user interfaces for an A.I. company, for some reason.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unit Testing with Jest

State and Props in React

PWA on Windows: Tools to Develop and Debug Windows-Specific Features

JavaScript Algorithm: Title Case a Sentence

Building a GraphQL Server in Nestjs

How to build a CLI with Node JS, TypeScript and Postgres

Cross-Origin Resource Sharing (CORS) In Simplified Way

Practical Use Cases of Sets in Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Skyler Nelson

Skyler Nelson

I’m a cognitive science nerd with a graduate degree in philosophy of physics who makes user interfaces for an A.I. company, for some reason.

More from Medium

Handle window resizing with a React context

evoach Chatbot Builder

Controlling State

the feeling of being lost in the network

How we use Typescript with React

Building a Custom React Hook in TypeScript