In the dynamic realm of financial technology, Yubi stands at the forefront of innovation, continually pushing the boundaries to deliver cutting-edge solutions. Within the distinctive landscape of Yubi’s financial services, precision is paramount. A financial application encounters a sudden surge in user transactions, leading to a complex web of concurrent data updates. Ensuring the coherence and consistency of the application state in such a dynamic environment becomes a significant challenge. This blog aims to shed light on the intricacies of modern application development, exploring the strategies that empower Yubi’s developers to navigate and overcome these challenges effectively.

What is Legend-State?

Legend-State is a new lighting-fast state management library that provides a way to optimize apps for the best performance, scalability, and developer experience.

Legend-State aims to resolve issues with the performance and workload of developers when trying to manage states in React applications, which are not optimized by default. Legend-State improves app performance by only re-rendering components when necessary, and it allows you to control on which states the re-render is triggered.

Fine-grained reactivity

Legend-State’s reactivity makes React apps faster. It minimizes the number of renders and makes sure that each update in a component results in the smallest number of renderings. Making components small can maximize React’s efficiency by requiring state changes to only re-render the bare minimum of components. Each component in the component tree re-renders whenever state updates are passed down the tree via props.

Legend-State’s fine-grained reactivity uses two components to isolate children so that they re-render from changes in their observables without needing to re-render the parent:

  • Computed: In this component, the children’s component changes don’t affect or re-render the parent component, but the parents’ changes re-render the children
  • Memo: Similar to Computed, Memo doesn’t re-render the child component from parent changes. It only re-renders when its observables change

Fast and tiny

Legend-State is super fast, and with only 3Kb in file size, it improves the performance of a website or app. Legend-State is designed to be as efficient as possible and it only re-renders components when there are changes.

 

Fast and tiny

Persisting state

Legend-State has built-in persistence plugins that save and load from local or remote storage. The plugins include local providers for Local Storage on the web and react-native-mmkv in React Native. These plugins have undergone comprehensive testing to ensure their accuracy. Firebase and Firestore remote persistence plugins for both web and React Native are being developed by Legend-State.

Additionally, Legend-State supports TypeScript and can be used in React Native applications to manage state.

Sample Project Setup :

Getting started with Legend-State in a React application

Let’s build a simple voting app to understand how Legend-State works. First, let’s create a project with the following code:

npm create-react-app legend-state-app

This will initialize a new React project. Now add cd into legend-state-app and install Legend-State:

npm install @legendapp/state

After running the command above, our Legend-State management library will be installed in our project folder.

Creating a Card component

We are going to create a Card.js file inside src/components to display each player’s information. This will show us the player’s name, nationality, country, and a button to increase and decrease votes:

Card.js

 

Creating our state with observables

Now, let’s use observables to define our state, which will contain all the states and their functions used in our application. Observables are objects that hold any variable (primitives, arrays, deeply nested objects, functions) that can be updated in the event of a state change.

There are different ways React uses observables:

  • Rendering observables directly using the enableLegendStateReact() function to automatically extract the state as a separate, memorized component with its tracking context
  • Using the observer HOC to make the component automatically monitor the accessed observables for changes
  • Using the useSelector hook to compute a value automatically monitors any accessed observables and only re-renders the results if the computed value changes

We will render observables directly using the enableLegendStateReact() for this project. Update our App.js file with the following code:

Creating our state with observables

We created a state using the observable function from the Legend-State library.

Inside the observable function, we created a store that holds an array of player data and a store that keeps tabs on vote-related states, with its initial value set to 0.

Accessing and modifying the state in the observables

To get access to the raw value of the observable, we’ll use the get() function:

Screenshot 2024 02 08 at 4.07.04 PM Dynamically managing state with Legend-State

In the code above, we have a variable playersData which contains the value of the state property of the player. We use the playerData variable to map the player’s array and each player’s data is passed to the Card components.

We also see that the functions increasevoteCount and decreaseVoteCount are passed on to the Card component and used to increase and decrease each player’s votes. So when we click on the vote or unvote button in the Card component, it passes the players’ id value to App.js.

To increase and decrease the vote, we have to define functions to handle the operation:

Screenshot 2024 02 08 at 4.07.46 PM Dynamically managing state with Legend-State

The function gets each player’s current value and either increase or decreases the voting field. Legend-State observables use the set() function to modify the state. There are also other functions:

  • assign(): This function is also used to modify the observables. It is similar to the set() function, but it cannot be called on a primitive:

Screenshot 2024 02 08 at 4.08.28 PM Dynamically managing state with Legend-State

  • delete(): This function is used to delete a key from an object
  • peek(): This function is similar to the get() function, but it doesn’t automatically track the value. It is useful when you don’t want the component or observing context to update when the value changes

Persisting state

Legend-State provides a plugin that is used to persist states, which prevents data loss. Legend-State uses persistObservable to persist data from an application by storing it in local storage or remote storage. This way, the state does not reset whether we reload our page or close it.

To store our data in local storage, we will import the plugin and configure it globally:

Screenshot 2024 02 08 at 4.09.00 PM Dynamically managing state with Legend-State

Now, let’s call persistObservable for each observable we want to persist:

Screenshot 2024 02 08 at 4.09.30 PM Dynamically managing state with Legend-State

Above, we persisted the value of the state.voteForC and state.voteForM. The local storage key is assigned a unique name. With this in place, we don’t lose any new data when voting and refreshing the page.

API request with Legend-State

Legend-State also provides hooks that are used within a React component, just like the normal useState hook and useEffect hook. But this time, it only renders the observable when necessary. We’ll use some of this hook to make an API request:

Screenshot 2024 02 08 at 4.10.06 PM Dynamically managing state with Legend-State

Here, we used the useObservable hook to hold and make an API request using the fetch function, which gets information about a random user. The useObservable hook is also helpful for holding multiple values locally in a state or when the state is particular to the lifespan of the component:

Screenshot 2024 02 08 at 4.10.36 PM Dynamically managing state with Legend-State

We used useComputed to return the name, gender, and country of the user. The useComputed hook is used to compute values based on many observables and will be updated if one of them changes because it keeps track of the observables accessed while computing automatically.

useObserve is similar to useEffect. It takes action only when observables change:

Screenshot 2024 02 08 at 4.11.15 PM Dynamically managing state with Legend-State

 

Here, we use the Show component from Legend-State to conditionally render our data. The Show component is used to conditionally render child components based on the if/else props, and when the condition changes, the parent component is not rendered.

Conclusion

In this article, we learned about Legend-State, a state management library for React and React Native applications focused on providing better performance to our applications and a better experience for developers.