Stop Abusing Client State Management

Rate this content
Bookmark

A lot of React applications out there run for state management solutions such as Redux or Mobx and use it mostly for server side state like 'isLoading', 'isError', etc. We need to stop mixing between server state and client state. Don't get me wrong, client state is important, but 70% of the state is actually a server state. In this talk I will demonstrate how we can encapsulate server state using our own custom hook or using a (perfect) solution such as react-query.

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

FAQ

Nir is a 34-year-old from Israel, married to a frat, and father to three daughters. He has built web apps since childhood and has a BSc in Computer Science from the Hebrew University of Jerusalem.

Nir's first web project was the Biggest Israeli Pokemon Fans website.

Nir holds a BSc in Computer Science from the Hebrew University of Jerusalem.

Nir has worked as a full-stack developer at Intel, a frontend team leader at Curv (a blockchain startup acquired by PayPal), and currently runs a consulting company in webapps development.

Nir's consulting company focuses on webapps development in both web 2.0 and web 3.0.

Nir discusses state management tools like Redux, MobX, and React Query.

The custom hook 'useAsync' is created to handle async functions, manage loading, success, and error states, and provide caching and retry mechanisms.

React Query is a library that handles API functionality such as fetching, caching, loading, and retry mechanisms, simplifying server state management in React applications.

Nir recommends React Query because it simplifies handling API functionality, including caching, retry mechanisms, and invalidation, making it very helpful for every React application.

Server state involves handling API functionality like fetching and caching, while client state involves UI elements like dialog boxes and menu bars. Nir suggests using tools like React Query for server state and Redux or MobX for client state.

Nir Parisian
Nir Parisian
21 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction

Short description:

Hi everyone. My name is Nir. I'm 34 years old from Israel, married to a frat and father to three little wonderful girls. I've built web apps since I was a kid. Currently I run a consulting company in webapps development, both in the world of web 2.0 and web 3.0.

Hi everyone. My name is Nir. I'm 34 years old from Israel, married to a frat and father to three little wonderful girls, Baar and Adas. I've built web apps since I was a kid. My first website was the Biggest Israeli Pokemon Fans website and it was a great project. Since then I had my BSc in Computer Science at the Hebrew University of Jerusalem. I worked as a full-stack at Intel for a couple of years. Afterwards I was a frontend team leader at Curv, a blockchain startup which acquired by PayPal. Currently I run a consulting company in webapps development, both in the world of web 2.0 which you're all familiar with, and also in the web 3.0 world.

2. State Management Common Abuse

Short description:

Let's talk about state management common abuse. We choose our favorite state management tool, connect components to backend API functionality, and start using state management awesomeness. I created a React application, declared an API function called fetchPokemon, and used a Pokemon API service to fetch relevant data. I added a two-second delay, fetched the data, and implemented the UI to display the Pokemon data and a button to fetch random Pokemon. Finally, I added some styling to the UI.

Enough about me, let's talk about state management common abuse. So we've all been there, starting a React application, choosing our favorite state management tool, like Redux or Morbix, or many others out there, and connecting our components using these tools to our backend API functionality and start using state management awesomeness.

Let's see it in action. I created a simple React application using code sandbox, and I'll start by declaring an API function called fetchPokemon, 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 setTimeout, and I set it later to two seconds of delay.

Now I'll do the fetching. We have the Pokemon name, handle the response, which is in a JSON format, so I'll use the JSON, and return the data. Cool. Great. Let's add the two seconds delay I talked about, and now I can call the endpoint in the UI, declaring the state PokemonData and setPokemonData using the useState 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, Charizard, and Squirtle. We will use some random logic using the math library, so multiplying math random with the array length minus 1 and round it up. And now I can use it. I'm calling the fetchPokemon with the chosen Pokemon name. Cool. Return the data. Great. And now for the best part, the UI. So I will declare a div container and 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. And let's add some text. And let's add some alternative text to remove the annoying warning of the Kot Sandbox. Add some typo here. And test it. Cool! We've got Squidward. Now let's add some style, just to move the text a little bit up above.