#state management

Subscribe
Managing the state of a browser-based JS application is tough — but it doesn’t have to. With tips and workarounds from our speakers’ tutorials and courses on JavaScript state management, you’ll find that even the most tedious tasks can be easy if you follow a few simple principles to avoid the most common pitfalls.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Rendering Data That Disagree
React Advanced 2024React Advanced 2024
11 min
Rendering Data That Disagree
Hi, I'm Tom and I want to talk about rendering data that may disagree when using SQL queries. It's important to consider whether these queries are in the same transaction or separate transactions, as this affects data rendering. Implementing transactions can ensure atomic data queries and avoid inconsistencies. Managing data consistency in React can be challenging, especially with rich clients and live updates. React Query offers ways to handle data invalidation logic. Asynchronous data fetching in React can lead to inconsistent data between requests.
Turning It up to Eleven
React Advanced 2024React Advanced 2024
21 min
Turning It up to Eleven
Welcome to Turning It Up to 11 at React Advanced. Hydrogen, an eCommerce framework built on top of Remix, focuses on efficient data loading. Loading data in parallel using promise.all is four times faster than loading in a waterfall manner. Split promise.all into two when handling data dependencies. Caching static data can significantly improve page load time. Optimize product pages by reducing awaits and prioritizing essential content. Use suspense boundaries and skeleton UI for optimal data loading. Place non-blocking requests before primary data request for better performance. Remix client cache handles caching automatically. Consider data dependencies and prioritize critical content.
Making State Management Intelligent
React Summit 2024React Summit 2024
31 min
Making State Management Intelligent
Today's Talk explores intelligent state management in React, highlighting the limitations of traditional state management and the need for innovation. Xdate's store simplifies state management by providing an easy way to update and retrieve data. The integration of AI and state machines enables the creation of intelligent apps that enhance user experience. The combination of state management and AI is achieved through packages like StatelyAI-Agent and the Vercel AI SDK. State machines, reinforcement learning, and large language models play a key role in creating intelligent agents. Graph algorithms can be used to traverse state machines and improve user experience. State agents store knowledge in short-term and long-term memory, while state machines provide guardrails and automation in multi-step processes. The impact of Language Models (LLMs) on UI performance and the future experimentation of building AI models to identify state machines are also discussed.
Local-first Apps with ElectricSQL and React
React Day Berlin 2023React Day Berlin 2023
12 min
Local-first Apps with ElectricSQL and React
Watch video: Local-first Apps with ElectricSQL and React
Electric SQL is a local-first sync layer that allows you to build applications directly on top of Postgres using React. It provides instant results, offline functionality, and built-in multi-user collaboration. The system ensures transactional causal plus consistency and supports real-time multi-user sync and cross-platform usage. Electric SQL eliminates boilerplate code, provides a high-quality user experience, and allows for cost savings and operational simplicity.
What's New in Redux Toolkit 2.0
React Day Berlin 2023React Day Berlin 2023
8 min
What's New in Redux Toolkit 2.0
Watch video: What's New in Redux Toolkit 2.0
Mark Erickson discusses the new features in Redux Toolkit 2.0, including the simplification of Redux logic and the addition of RTK query for data fetching. He mentions the challenges of achieving ESM common JS compatibility and refers to a blog post he wrote about it. The plan to ship major versions of RTK, Redux core, Reselect, and React Redux together is discussed, with a focus on the conversion of Redux core to TypeScript and the need for packaging updates and TypeScript type upgrades.
Taming the State Management Dragon
React Summit US 2023React Summit US 2023
23 min
Taming the State Management Dragon
Watch video: Taming the State Management Dragon
This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.
React State Management with Valtio
React Summit US 2023React Summit US 2023
10 min
React State Management with Valtio
Watch video: React State Management with Valtio
This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.
Suspense for Data Fetching: How to Fetch During Render
React Summit US 2023React Summit US 2023
5 min
Suspense for Data Fetching: How to Fetch During Render
Watch video: Suspense for Data Fetching: How to Fetch During Render
This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.
Modern Redux With Redux Toolkit
React Summit US 2023React Summit US 2023
7 min
Modern Redux With Redux Toolkit
Watch video: Modern Redux With Redux Toolkit
Mark Erickson discusses the changes and challenges in Redux Toolkit 2.0, including addressing ES Module Common JS Compatibility and shipping new features. The release includes modernized build output, smaller bundle sizes, and new features like combined Slices API and dev mode checks in Reselect. The current test version is beta4, with plans to ship by the first week of December. RTK 3.0, focusing on RTK query updates, is expected to be released next year.
Simplifying Data Management in React With React Query
React Advanced 2023React Advanced 2023
16 min
Simplifying Data Management in React With React Query
Watch video: Simplifying Data Management in React With React Query
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.
Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
React Advanced 2023React Advanced 2023
29 min
Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
Watch video: Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
JAS is a new framework for building apps around sync and secure collaborative data, promising to simplify app development by eliminating unnecessary complexity. CoJson is an abstraction that simplifies app development by implementing multi-device co-editing, user identities, permissions, sync, caching, and persistence. Jazz is an open source framework that provides idiomatic bindings for CoJSON, specifically in the browser. JAS provides powerful sync and storage capabilities, eliminating the need for external blob storage. Jazz React allows developers to use React and provides automatic subscriptions for reactive updates to core values. JAS offers instant interaction, offline sync, and the ability to rebuild Twitter with Jazz.
The State of The State In The App Router
React Advanced 2023React Advanced 2023
32 min
The State of The State In The App Router
Watch video: The State of The State In The App Router
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
Stop Abusing Client State Management
React Summit 2022React Summit 2022
21 min
Stop Abusing Client State Management
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.
Becoming a Form Wizard: Intuitive Multi-Step Workflows
React Summit 2022React Summit 2022
26 min
Becoming a Form Wizard: Intuitive Multi-Step Workflows
This Talk explores the concept of form wizards and their role in creating intuitive, multi-step workflows. It discusses the use of state machines and various implementation options, including Formic and the Dream API. The process of building a form wizard using React context, reducers, and custom hooks is explained. Integrating state machines and the introduction of the Robo Wizard library are also covered, highlighting its flexibility and compatibility with different UI frameworks.
Efficient State Management With Hookstate
React Advanced 2021React Advanced 2021
10 min
Efficient State Management With Hookstate
This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.
Reusing App State in React Native with Recoil
React Advanced 2021React Advanced 2021
24 min
Reusing App State in React Native with Recoil
Recoil is a minimal and easy-to-learn state management library for React and React Native. It supports distributed and incremental state definition, React suspense, and provides hooks like useRecoilValue and useRecoilState. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.
setState, We Need to Talk!
React Advanced 2021React Advanced 2021
20 min
setState, We Need to Talk!
In this Talk, the speaker discusses the importance of planning and maintaining UIs in React using state machines. They highlight the need to consider user experience and plan for performance and maintainability. The challenges of handling multiple UI states are addressed, and the benefits of using finite state machines are explained. The speaker demonstrates how to implement transitions and update the UI using a React state machine. They emphasize the benefits of state machines in handling errors, avoiding state explosions, and improving collaboration between designers and developers.
Modern State Management with Vue 3
Vue.js London Live 2021Vue.js London Live 2021
22 min
Modern State Management with Vue 3
Top Content
Vanessa introduces Vue Free and discusses the benefits of using the Composition API. The order of execution and grouping logical units using the Composition API is explained. The Composition API is used for state management and refactoring components. The speaker shares their initial experience with state management using Vuex. Composables are explored as an alternative for state management in Vue 3.
Introducing state machines and statecharts
React Finland 2021React Finland 2021
18 min
Introducing state machines and statecharts
State machines and statecharts can seem intimidating. Especially if you (like me!) didn’t study computer science, aren’t big into maths, or just haven’t come across state machines and statecharts before.
In this session, you’ll get a whirlwind introduction to state machines and statecharts, no prior knowledge and no coding experience required. Are you already familiar with state machines and statecharts but want to get a better understanding of the benefits and how to convince your team to get onboard? That’ll be covered too.
You could be a developer, designer, project manager, multi-disciplinarian or fancy specialist, I believe everyone can get something out of this talk, so join me!
Make legacy code delightful with statecharts
React Finland 2021React Finland 2021
22 min
Make legacy code delightful with statecharts
If you must have legacy code, you want it written in statecharts. We'll break down the mental models required for understanding unfamiliar UI code, and compare the maintenance costs with and without statecharts.
The State of XState
React Finland 2021React Finland 2021
18 min
The State of XState
Over the past few years, state machines, statecharts, and the actor model have proven to be viable concepts for building complex application logic in a clear, visual way with XState. In this talk, we'll take a peek into the future of XState, including new features in the next version, and new tools and services that will make it even easier to create and collaborate on state machines.
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Using the Proxy API for State Management
JSNation Live 2021JSNation Live 2021
27 min
Using the Proxy API for State Management
This Talk introduces the concept of using proxies in JavaScript for state management. It explores the implementation of proxies, observing properties and creating caches, building the proxy, and observing changes with proxies. The Talk also discusses using the Taits library for state management and the performance implications of proxies. TypeScript and JavaScript are compared, and the results of a poll on their usage are shared.
The Visual Future of State Management
JSNation Live 2021JSNation Live 2021
32 min
The Visual Future of State Management
This talk discusses the visual future of state management and the use of state machines and state charts. XState is introduced as a state machine and state chart library for JavaScript, providing a clean and visualizable way to represent state machines. The talk highlights the features of XState, such as its state-first approach and utilities for interpreting the machine as a service. It also mentions the future goals of XState, including visualization, testing, analytics, and the development of a visual software modeling suite called Stately.
Fire-side chat on Recoil
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Fire-side chat on Recoil
Recoil.js is a state management library developed by Facebook that allows for separate atoms to be updated independently. It provides performance analysis tools based on multiple measurements taken from production and aggregated into statistical distributions. Recoil 0.2 introduced improvements in selectors and performance, as well as a data structure that improves copying efficiency. Recoil supports server-side rendering and can be used in React Native. It is recommended to start with React alone and consider adding Recoil if needed for handling updates in distant parts of the tree.
XState: the Visual Future of State Management
React Summit Remote Edition 2021React Summit Remote Edition 2021
35 min
XState: the Visual Future of State Management
Top Content
This Talk introduces the visual future of state management and how XState is bringing it to reality. It explains the role of reducers in containing application logic and how state machines and state charts provide a visual and mathematically rigorous way to represent behaviors. XState is easily integrable with React and other frameworks, allowing for the management of local, global, and semi-local state. The Talk also highlights new features in XState, such as the use of TypeScript for stronger typing and the introduction of the useSelector hook for improved performance. The future vision includes the combination of diagrams and code, with tools like Stately.ai, and the importance of explicit modeling of application logic using state machines.