Making State Management Intelligent

Rate this content
Bookmark

Managing state in React is complicated. Humans are even more complicated. As developers, it's our job to deliver seamless and intuitive user experiences, but the sheer complexity of human behavior and the real world can make this harder than it should be. In this talk, we'll explore a radical new approach to app development where language models (LLMs) and reinforcement learning (RL) can be used to handle app logic in a more intelligent and human-centric way. We're bringing artificial intelligence to state management in ways that go much, much further than "call the OpenAI API and hope for the best". You will learn how you can leverage AI in your existing React apps to create the best UX possible, and peer into the future of AI agents.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

The three common concepts are states, events, and transitions.

One of the oldest representations of AI mentioned is state machines.

David recommends using the Vercel AI SDK for integrating AI into applications.

David plans to use state machines, reinforcement learning, and large language models (LLMs) together to create intelligent agents.

The main topic is making state management intelligent by using state machines and AI.

The speaker is David Korsheid, also known as David K. Piano.

David Korsheid works for stately.ai.

The new state management library mentioned is Xdate's store, a tiny library for managing state.

The purpose of StatelyAI-Agent is to combine state management and AI to create intelligent agents that perform tasks to achieve goals.

Combining LLMs with state machines provides guardrails and predictability, making the AI more reliable and easier to manage.

David Khourshid
David Khourshid
31 min
14 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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.

1. Intelligent State Management in React

Short description:

Today we're going to talk about making state management intelligent. We'll explore the limitations of traditional state management in React and the need for innovation. Using AI, we can push the boundaries of UI and UX. Let's start with states and the use state hook in React. The code for managing state without a library can become complex and hard to understand. That's why there are various state management libraries available like Xdate, Redux, Jyoti, Recoil, and MobX. For modern projects, Zustan or Redux are popular choices.

Hello, everyone. So today we are going to be talking about making state management intelligent, whatever that means. So honestly, the title of this should have been why David likes state machines so much because that's literally all I'm going to talk about today.

It's so exciting to see all of you here. It's my second time at React Summit, my first time speaking, so this is extremely exciting. A little bit about me. My name is David Korsheid. I'm at David K. Piano. I don't play the piano, sorry, my name is not piano, I do play the piano, that's why piano is there. Sorry to confuse you. I work at a company called stately.ai, which happens to be the two things we're talking about today, state and AI. And the reason is because we've all done state management in React and our applications, and honestly, there's not much room for innovation, at least until now, now that we have AI everywhere. And so I honestly just want to spend the next few minutes with you just innovating on how we can make state management intelligent.

Now when I mean innovation, I'm not talking about this kind of innovation. This is not the kind we want. I mean, I'm sure there's a reason for this, but the American mind cannot comprehend this. I'm talking about innovation like this. I don't know if you've seen T.L. draw really, really exciting examples of just doing super cool things with an infinite canvas, and really using AI and stretching the limits of what UI and UX can really be for our users.

So let's start with states. We probably use state in React, the use state hook, and we're going to make a simple to-do app. So you probably, if you're not using a state management library, you would start like this. You would have to-dos, set to-dos, like a whole bunch of use dates, and honestly, this code makes me a little bit sad. We have a use effect in there, just making sure that our to-do is updated. We have all of these use dates all over the place. And then we have the dreaded dependency array from hell. So honestly, I think that we could do better than this, and I will say that when you manage state like this, does it work? Yes, it's going to work. But it becomes a lot harder to understand your actual application logic, and so that's why a bunch of state management libraries have showed up, such as Xdate, Redux, which Mark talked about earlier today, and other ones like Jyoti, Recoil, MobX, and some other ones that I didn't list here, but there's only so much space on the screen. So if you were to do it today, you would probably use something like Zustan or Redux.

2. Xdate's Store for State Management

Short description:

Xdate's store is a new library that simplifies state management. It provides an easy way to update data and retrieve it using the use selector hook. The library follows the core concepts of states, events, and transitions.

This is actually Xdate's store. It's a new library that I released. It's a tiny library where all you do is you give the data for your store, and then you give in the second argument a way to actually update that data, such as add to-do, update to-do, select to-do, et cetera. And then you could use it inside your app by just grabbing the use selector hook and selecting from that store, and then you just send events. The API is extremely simple, and this is really meant to be a stepping stone for Xdate, but also a really simple way to manage your state.

Because no matter which state management library you use, you're essentially using three concepts — states, events, and transitions. It's the same for all libraries. Some may blur the lines between what is an event, what is an action or a method, but yeah, that's state management in a nutshell.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

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.
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.
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.
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.
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.
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.

Workshops on related topic

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.
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.