React Day Berlin

React Day Berlin 2022

Jotai Atoms Are Just Functions

you are Hello, everyone Thanks for an opportunity to give this talk. I hope you find it useful. As many of you may know State Management in react is one of the most discussed Topic in the community. There are many libraries and solutions. Use statehood is one of primitive Solutions. Some of popular libraries include Redux mobics ex State and Justin. They provide different functionalities for different goals. The good thing is that developers have many options to develop their apps. The bad thing is that there are too many options. But I think having many options is still good for ecosystem. If there are only one solution we would miss many new ideas. Jota is a new library in this field. Hi, my name is daishkato. I'm author of jotai library. I am half open source developer and half freelancer. My open source software is with JavaScript and react. And my work is also related with JavaScript and react. There are quite a few open source projects that I'm working on including experimental ones. Jota is one of my open source projects, but we develop it as a team. While I'm the main developer of the code. There are many contributors not only for coding but also for documentation and other stuff. This talk is about jotai Library, which is one solution for State Management in react. Jotai is a library based on atoms which represent pieces of State. Atoms are popularized by a library called recoil. But the concept is not very new. The concept is basically to form a dependency graph or pieces of state and propagate updates. For example suppose we have three atoms a b and c. A depends on b b depends on C. If we update C both b and a are updated. This pattern is already done for example with observables for async data flow. Atoms are a little different from observables. Usually an observable object would hold the value or maybe its initially empty. Atoms would never hold values. They are just definitions and values exist somewhere else. We will get into it in this talk. But let's first see how the usage of jotyle looks like. This is a simple example using jotay atoms. We have three atoms text atom text link item. And uppercase atom. Text atom has an initial value. Hello. Text link Adam has a function returning the length of text atom. Uppercase atom has a function similarly returning the uppercase string of text atom. Text link button and uppercase atom both depend on text atom. So if you change text atom the other two atoms will also be changed. As you see if we either text I mean if we enter a text in the text field. All three values are updated accordingly. If you look closely. We use use ATM hook which takes an atom we defined. Use admin hook works like use State hook. It returns a value and an update function. If the value is changed it will trigger re-render. You can change the value with the update function. There's one important note which isn't shown in this example. If we use the same atom use Aden Returns the same value. So we can use atoms for Global state. Jotai library is often considered as a global State solution. We can use it for Global state, but it's not true Global and we can use it for semi Global or local States. This may sound an intuitive but if you think atoms as functions, it should make more sense. Let's try to make an analogy. We all know react components are just functions. This is one of the simplest components. It returns a string. We usually define components that return jsx elements. but returning string is also very we don't exactly know. When this function is invoked. React will invoke this function whenever necessary. It's declarative. Components can be said to be declarative functions. Let's move on. Components are functions likewise atoms are functions. This is a similar example and it's a very atom definition. We have a wrapping function named atom. But it's not very important. It's just a helper function to build an atom config object. Which helps especially in typescript? In this case, we will create an object with the read property which contains the function. Function is exactly the same as what we saw in the text component in the previous slide. This is an atom whose value is the return value of the function, which is a string Arrow. It's so to say a static atom whose value never changes. A static atom is not very useful. So how do we add a dependency? Let's see how a component looks like. With react components there are roughly three patterns to Define dependencies. props states and contexts Let's take context as an example. Because it's good for analogy. In this example, we create count context and Define double component. Double component will use the context value double it and return it. Whenever the context value is changed, we expect double component will return and update it. Sorry. But we don't know when the component function will be invoked. Because it's declarative. What we declare is that double components depends on count context how the function is invoked is not determined at this point. Are you okay with this example? So, how does an atom look like? a simple example with Adams We Define count atom and double atom. The definition of the count button is a special syntax which corresponds to create context in the previously example. We will learn about this syntax a little bit later so far. It's an atom definition that we can use from other atoms. The following is double item definition. notice a function named get we don't Define it. It will be injected from somewhere. The get function will return the value of an atom. It's like use context Returns the context value. double atom depends on count button And when counting changes double what should be really evaluated? When we Define atoms, we all know what are other values or even where other values are stored? What we know is when the function is invoked it will receive the get function. and using the get function you can get the value of the atom. This is pretty similar to how use contextric works. the difference is that in atoms the get function is injected from the function parameter. Whereas use context is exported from the react Library. There's another difference we can change at independencies. We Define a Newton called quadruple atom. The internal function returns double overview of double atom. Which is the quadruple value of the original count atom? Quadruple atom depends on double atom and double atom depends on count atom. So the dependencies are chained. In practice, it will form a tree or even graph over dependencies. Now we learn the basic pattern of how items form a simple dependency graph. Some more patterns are possible. For example single atom can depend on multiple atoms. Another example is atom dependency can be conditional. Using those patterns we can really Define atoms and make a complex dependency graph. We basically covered how to define atoms in terms of reading the values. Let's see how we can date the values. We change the definition of default double atom. by adding a second parameter The first parameter is called read function and the second parameter is called right function. Those functions are just put in the read and write properties of the resulting in object. The right function has three parameters get set and new value. In this case, it divides a new value by 2 and set it to the original count atom. Providing the right function makes the atom writable. The read and write functions of double atom are symmetric. But they don't have to be symmetric. We can define those functions freely this opens up a pattern called right only atoms but it's out of the scope of this talk. Now the final missing piece is the definition of count atom at the fast line. We call such atoms primitive atoms. From the prospective of the dependency graph. They are the sources of data. Primitive atoms are defined by the atom function with a single initial value. In this case of discount atom 0 is the initial value. This is a special syntax to create a writable atom with an initial value. The resulting atom config object has three properties in it read and write. The init property has the initial value. The read and write functions do simply read from and write to the self button. We have learned a normal read-only button are writable atom and A Primitive button. Read only items atoms that compute from other atoms. Right about read only items plus right back capability. Primitive atoms are special writable atoms that can write to themselves. They form a dependency graph and primitive atoms are the source of the graph. At the beginning of this talk I introduce jotay is a state management solution for react. As we saw how to build atoms. They have nothing to do with react. Patterns a pure definitions of state that depends only on JavaScript. The atom function may seem like magic, but it's just a helpful function to make a config object. Technically you could Define the atom object without using the help of function. So if atoms are not things of react, how can we use them with react? to use atoms in react with functions one is provider component. The other is use atom hook. As I keep saying atoms atom objects are just definitions and they don't hold values. So we need a place to store adding values. That's the provider component. It has values of all atoms under the under the component tree. to use an atom value in the provider component we use use and hook in child components. It takes an atom object and Returns the current value in the provider component. And the update function to change the value in provider. Use atoms usage is similar to youth State and user reducer. So learning you that is almost nothing for developers who are already familiar with youth state. Let's look at the same example. We looked all your again. Text atom is a primitive button and the other two atoms are read only admins. They depend on text atoms. So when text atom value changes, all three atom values change and updates can be seen on screen. The code in the slide doesn't show the provider component, but it's there at the bottom. However, in some cases we can actually omit provider. For many use cases. We would have one provider close to the root of component tree. If it is just one provider in the memory, we can omit it. Then uses a global state for admin values. It's a very handy feature and often used. provider component theoretically atoms can hold values So what's the point of separating atoms and values? I just said if there is one provider in the memory we can omit it. That means for other cases having multiple providers is Meaningful and it's possible if we are if atoms only have if atoms don't hold various. This is an example with two providers. Notice we have one atom defined which is Count other. the counter component is also defined once now we use the counter component in two properties. Because those two providers have different adding values. We see two different values on screen. Let's see how it works. The counts are separated clicking buttons affects. Only one only the count on in one provider. This is what I mean. I think definition is reusable. It's just like a function. There is another case where atoms shouldn't hold values. In server context there are multiple requests and each request starts a new render. We need a provider component for each render to isolate States between requests. Adam definitions can be shared between requests but other values are not. Actually hypothetical because at the moment there's basically no way to update other values on server. That being said, it feels nice to separate definition and values. If we if we handle multiple things in a single memory space. And we could do more things on server in the future. So if atoms are just definitions and independent from react, can we use them without react? To answer that question. I made an experimental Library called jotay jsx. It's a library that technically replaces react and react Dom libraries. Adds, the syntax is exactly the same as normal jota usage with react. We can run a jotai up with only changing the import lines. It is not feature complete and may contain bugs, but it shows a proof of concept. Other two experimental libraries are called jottai signal and jota uncontrolled. They basically walk with react. But the syntax is different. The one is a signal style and the other is for uncontrolled components. There are implementations come with hacks, but they should also show the proof of adding concept. In the future the jotai library will eventually expose vanilla functions that are not tied to react. And we would be able to build more libraries in our ecosystem. Three libraries are hosted under the GitHub organization named jotyl labs. There we hope to improve libraries for practical use and add more libraries for experiments. In summary the takeaway is the following. Jota Adams are just like functions and they are framework agnostic State definitions. If you are already jot, I users. Please try to keep that in mind which may help designing atoms. If you are new to jotylibrary, please give me that try. We have a website at jottai.org and there are some documentation. We look forward to communicating with users and contributors. My talk. Thank you.

Daishi Kato

React Advanced

React Advanced Conference 2022

Using useEffect Effectively

David Khourshid

JS Nation

JSNation 2022

Announcing Starbeam: Universal Reactivity

Yehuda Katz

Vue.js Live Conference

Vue.js London Live 2021

Everything Beyond State Management in Stores with Pinia

Eduardo San Martin Morote

React Summit Remote Edition

React Summit Remote Edition 2020

React Query: It’s Time to Break up with your "Global State”!

Tanner Linsley

React Summit

React Summit 2022

Stop Abusing Client State Management

 Hi everyone. My name is Neil. I'm 44 years old from Israel married to a fraud and father to free little wonderful girls, but organadas I've built web sensor was a kid. My first website was the biggest Israeli Pokemon fans website. It was a great project. Since then I had my BSC in computer science at the Hebrew University of Jerusalem. I walked as a full stack at Intel for couple of years afterward. I was a front-end team leader at curve a blockchain startup which acquired by PayPal currently around the company in web of development both in the world of Web 2.0 which are all familiar with and also in the web 3.0 World enough about me. Let's talk about State Management common abuse. so we've all been there starting an act application choosing our favorite State Management tool like Redux or mobics or many others out there and connecting our components using these tools to our backend API functionality and start using statement awesomeness. Let's say it in action. I created a simple react application using Code sandbox and I'll start by declaring an API function called Fetch Pokemon. Which will get in the parameters the Pokemon name. And we will use a Pokemon API service to fetch the relevant Pokemon data. I wrapped it with a promise to make sure we get some delay in the response to mock a common behavior of API functions. So There's a set timeout. And I study later to two seconds of delay. Now I'll do the fetching. with the Pokemon name handle the response. Which is in a Json format, so I'll use the Json. and return to that cool Great. Let's add the two seconds delay. I talked about. And now I click on the endpoint in the UI declaring the state Pokemon data and set Pokemon data using the use State hook. and creating a fetch random Pokemon function So the app won't be boring. So I'll be using or I'll be choosing out of three common Pokemons Pikachu charges out and Squirtle. And we'll use some random logic. Using the math Library so multiplying math random with the array lengths minus one. And round it up. and now I can use it. I'm calling the fetch Pokemon with the chosen Pokemon. and name cool return to that great, and now for the best part the UI, so I will declare a div container and I will display the Pokemon data in a div and create a button for using the fetch function. So in the div, I will display the Pokemon name. As well as its image. Using the Sprites data, which we get from the service API. Put it in the image source. And great back to the button. I will attach the fetch random Pokemon which we implemented. Add some text. And let's add some alternative text to remove the annoying warning of the cut sandbox. Add some type of here. And test it cool. We got Twitter. So let's add some Style just to move the text a little bit. up above and we're done got Charizard. and squirtle and Pikachu Great, and I think to myself an app is not an app without some loading indicator. That's the part where most developer will use Redux or so many other solution to hold this kind of States. I will use user for Simplicity reasons, which is very similar to redox reducers. So I create a Pokemon reducer. Getting a state and in action. and switching the action type So first, let's handle a default case. Throw in some Arrow. And now add the common loading state. Status is loading and great. But what if I get an arrow, so let's add a state for this as well. with the level data And surely we need a success state to hold the data get informed their service API. And since we can be sometimes not in need of the states, let's add an idle state. and declare an initial state to begin with Right either starting from either and now I can just use it in the application instead of the regular use state. So extracting the state and the dispatch function out of the reducer. using the Pokemon reducer and the initial state and let's adapt the UI to use our new state variable. So when I'm idle, I will display some text. Click to fetch a Pokemon. and on success I want to display the Pokemon data. So let's implement this as well. Pay attention that Pokemon data doesn't exist anymore. So we will place it with the state variable. And on Evo I want to display the error message, which I saved in the state. rates and div and finally, I want to disable the button while I'm on loading state. Now I can finally implement the loading indicator easily. So what I will do I will switch the button text to loading when I'm in the status of loading. And display the fetch Pokemon text when I'm not question. Okay, and don't forget to dispatch the right State when loading. And one of the same in the data. With the data and when I'm counting encountering some evil. Oh, let's hit the refresh and test it. And I see we don't get the loading indicator. So I think I know why we have some bug in the set timeout. Let's fix that. Great test again, and we got this. Just the style we miss the style. So let's move the style to the inner div. We implemented. And greatest again. Cool, usually for this kind of I think functions developers write different reducers, but I know a better way to share some logic and custom hooks. So let's create one. So let's take the reducer. Move it down. And the clever a custom hook which I will name. Use a sync. Okay. The user sync will get in a sync function. And actually we can use a reducer. Let's just rename it to some something more generic so fetch reducer might be better. And we can use it in our hook. right And now let's create a function that will be responsible to change in the state using the dispatch. So we'll name it execute. And this function will get parameters, of course. and start by dispatching the loading States then we will call the async function. argument We got with the params and unsuccess dispatch the success. state with the DACA, of course. And last but not least. When getting an arrow, we will dispatch the oil State similar to what we did earlier. wait hello with the L that now I left the execute function with use callback to avoid re-renders. Except the time of course when the function does change. And finally, we will return from the hook the execute function and the state. Which will we can be used in the application? And let's actually use it. So. Let's extract execute and State. Out of the user seeing custom hook. And we need to pass it our functions so fetch random Pokemon and let's make some adjustment removing the dispatch. and moving this function out of the application current execute great and this is working nice. So actually I didn't invent any of that. I just use a patron I met in the school library use Hooks and you can see here use a sync which is implemented very similar to what we did and it's actually amazing and this library has many other custom hooks. I really suggest checking it out. So with your permission and to make some point. I'm getting rid of the Pokemon Randomness for a while and fetching only the great Pikachu. Notice that I'm fetching the data every time I click even though I have the same data all the time Pikachu. So I think it will be nice to add some cash mechanism. I'll add a cash variable which will hold the data. And add some flag. name with cash and let's call it with true. and let's implement the caching so If the data does exist, I will return it from the cache. Right if it exists. And otherwise I will fetch it using that sync function and save it in the cache. Great, let's test it. Now. It's fetching and for the second time and third time and so on it won't fetch again because it's using the cash data. And let's add some invalidation to make sure we support. When the data is not up to date. So if invalidate flag is true, I'm resetting the cache. Let's add it to the dependencies array and now let's set it the flag to true. And if I click over and over again, I'm fetching this is this is good and when I want to tell my custom hook that data is not relevant anymore. And I want to refetch it so I can connect the timer to it or something like that. And you know what? It will be. So cool. to add some rich why mechanism and I think you know what I'm going with it. We don't have to walk this hard. Although it is fun. So I want you to meet react query. Which is my first choice when dealing with the API level. So first, I'll wrap it up real quick with the react query provider. Getting from the actual query Library, which is just installed. And Rapid entire application. with the provider and the client and now I can use the built-in Hook from our query called use Query. So this hook actually holds everything. We just implemented in user sync including the cache system the Retro mechanism the invalidation and many other cool functionalities. We can get rid of the user sync. And let's use use Query instead. It has two power Metals. Actually. The first one is the query key. which serves as the ID of the query and the second one is the query function a similar is to use a sync. hook we just implemented so This will be the fetch Pokemon function. Currently with Pikachu and let's extract everything out of the result. So we have the data we have some indicators like if there was an arrow if there was if it's loading. And so on. And let's use it in the UI make some adjustments. Right the arrow we can remove this and use the easel flag, which we got for free. And there are available. Which we can extract as well. And the refresh function which will replace the execute. from the user sync hook great is loading here instead. And here as well. Not is loading. cool and great. We got the cash in out of the box. Let's kill your friends out. All of this. Oh, this is such a good feeling and we can even use the fetch random Pokemon once again and getting the cash. Great everything works. So here is the react query library website. Which is very great. It has some cool documentation and I really suggest going over it. It has so much functionality which is useful and really make things very simple. Related to handling the API layer. So it's really worth checking. So in conclusion, what we did was taken a simple API function and connecting it to a really simple UI. But as you can imagine as the UI gets bigger and bigger. It gets more and more complicated to handle this kind of paper functionality and we don't need fancy tools such as Redux mobics or many others out there to handle what it's called server state. This was meant for client states operations such as If the dialogue is open if a menu bar is open if I'm logged in or not logged in. This is client state in any case of service States handling such as fetching catching loading and so on. I really suggest either build some. Similar solution to use Query or use a sync custom hooks. We just saw. Oh really consider using and that query, which is really really helpful in actually every application every application. I saw so far. So hope you had a great time. I had a great time and you know what to find me.

#state management