> Markdown version of [/videos/13-state-management-in-a-world-of-hooks?t=832](https://www.wearedevelopers.com/videos/13-state-management-in-a-world-of-hooks?t=832). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# State management in a world of hooks

Tired of deeply nested React context providers and unnecessary re-renders? Discover how the Reusable library natively elevates standard hooks into high-performance, shared global state.

- **Speakers:** Adam Klein
- **Event:** WeAreDevelopers LIVE
- **Published:** June 17, 2020
- **Duration:** 28:10
- **URL:** https://www.wearedevelopers.com/videos/13-state-management-in-a-world-of-hooks

## Summary

React developers frequently encounter friction when bridging the gap between local component state managed by hooks and shared state controlled by external libraries like Redux or MobX. Transitioning local state into global state traditionally requires an abrupt shift in mental models—moving from flat, co-located hook architecture to deeply nested reducers or observable stores. While developers often lean on React Context as a native alternative, scaling it in large applications frequently results in heavily nested provider hierarchies that tightly couple state to componentry. Furthermore, Context currently suffers from severe performance limitations, as it lacks a native capability for render bailout, meaning any context update needlessly triggers re-renders across all consumer components.

To resolve this structural compromise, the open-source library Reusable introduces a novel architectural layer that natively manages shared global state using standard React hooks. By wrapping custom hooks within a `createStore` function, teams can easily elevate local logic into shared, singleton-like state objects without rewriting syntactic models. Under the hood, this implementation safely bypasses React's constraint that hooks must run inside components by dynamically assigning a hidden, dummy component to execute the hooks and propagate their values. This approach inherently accommodates decoupled application architecture, enabling lazy-loaded feature modules to autonomously register their own shared state without cluttering a top-level root configuration.

In practical implementation, using hook-based global stores provides profound flexibility, most notably through built-in selector functions that optimize performance by strictly limiting re-renders to explicit state changes. Additionally, these hook-centric stores can seamlessly consume other stores, completely eliminating the brittle dependency chains inherent to nested context providers. Because application architecture is notoriously susceptible to hype cycles, developers should approach these systemic shifts keeping in mind that "today's hardest trend is tomorrow's legacy code." The ultimate goal is to standardize around composable patterns that drastically lower the barrier to scaling up component logic while keeping a unified mental model across an entire codebase.

**Keywords:** react hooks code colocation, global state management, local component state, react context providers, deep provider hierarchies, render bailout performance, custom react hooks extraction, redux reducers, mobx observables, state selector functions, reusable state library, lazy-loaded state modules, react dynamic hook execution, mental model unification

## Chapters

1. **The challenge of managing local versus global state** (00:17) — Switching mental paradigms between local component hooks and external shared stores complicates state management.
1. **Applying global state patterns to local components** (02:58) — Unifying state approaches by using global patterns locally sacrifices the innate benefits of native hooks.
1. **How structural traits of hooks enable code modularity** (04:16) — Hook code's flat and keyless architecture allows developers to seamlessly extract and reuse functional logic.
1. **Leveraging React context for shared state management** (07:42) — Using context providers enables propagating native component state across the rendering tree without third-party tools.
1. **Performance and architectural drawbacks of React context** (09:50) — Deeply layered context providers couple application state to the component hierarchy while blocking selective render bailouts.
1. **Designing an ideal hook-based state management API** (13:52) — Prototyping custom hook implementations demonstrates the necessity of retaining native React developer tool compatibility.
1. **Core architecture of the reusable state management library** (17:40) — Hosting custom hooks in invisible components creates singleton stores that broadcast direct updates to subscribing components.
1. **Migrating local component state to a reusable store** (20:27) — Wrapping isolated hook logic within a global store seamlessly converts local component state into shared applications state.
1. **Implementing selectors and cross-store subscriptions for state optimization** (24:37) — Using selectors prevents excessive component re-renders while enabling direct value sharing between independent state stores.
1. **Choosing sustainable technology solutions over passing trends** (27:11) — Technical decisions should focus on team workflows and maintainable architectures instead of adopting the latest industry hype.

## Related Moments

- [Implementing global state natively using the Context API](https://www.wearedevelopers.com/videos/1019-rethinking-react-state-management-the-power-of-built-in-solutions) (from "Rethinking React State Management: The Power of Built-In Solutions")
- [Advantages of utilizing native React state management tools](https://www.wearedevelopers.com/videos/1019-rethinking-react-state-management-the-power-of-built-in-solutions) (from "Rethinking React State Management: The Power of Built-In Solutions")
- [Introduction to React hooks usage in large codebases](https://www.wearedevelopers.com/videos/957-dos-and-don-ts-with-react-hooks-an-opinionated-approach) (from "Dos and don'ts with react hooks. An opinionated approach")
- [Constructing basic UI components using React hooks](https://www.wearedevelopers.com/videos/1466-building-better-apps-with-react-native) (from "Building Better Apps with React Native")
- [Sharing reusable component logic with custom React hooks](https://www.wearedevelopers.com/videos/957-dos-and-don-ts-with-react-hooks-an-opinionated-approach) (from "Dos and don'ts with react hooks. An opinionated approach")
- [Introduction to react components, props, and state](https://www.wearedevelopers.com/videos/653-how-to-become-an-ai-toolsmith) (from "How to become an AI toolsmith")

## Related Articles

- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Top 5 React Form Libraries for Developers](https://www.wearedevelopers.com/magazine/399-top-5-react-form-libraries-for-developers)
- [Understanding the Popover API](https://www.wearedevelopers.com/magazine/555-understanding-the-popover-api)

## Related Jobs

- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Senior React Native Developer](https://www.wearedevelopers.com/jobs/ext/1518176-senior-react-native-developer) at **Almedia**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**