In this article, we will cover different types of states in ReactJS and how easily we make the mistake of mixing up these types. We will also look at which tool/library/package to use with which state. This one is going to be full of juicy tech so stay focused. So without wasting any time let’s begin 🏁🏁

The Misconception 🥴

One of the myths of utilising redux when it is already configured is when the developer starts using it for all of the states in their application, which is done to avoid props drilling and access data at all levels of your application by wrapping your application with the store. But storing the server-side asynchronous data in your store as well is the problem. By doing that you try to sync your server state every time whether it has been updated on the server side or not which kills the performance of your application. For example

// Global state maintaining client and server-side state
const globalState = {
  authors,
  books,
  readers,
  libraries,
  darkMode,
  sidebarStatus,
}

Right now our global state is handling authors, books, readers, and libraries which are server-side state and not being efficient, requesting new data every time.

Server-Side State vs Client-Side State ⚔️

// Global state without server-side state
const globalState = {
  darkMode,
  sidebarStatus,
}

We have now removed the server-side state from our global state and all the hassle to handle them in our client-side state management library.

The idea is to have two sources of truth, the frontend (client-side state) and the other being backend (server-side state). You keep using redux, context, mobx, or any other global state management tool for the client-side state while using React Query for the server-side state.

What is React Query? 🤔

• React query is a server-side library, which helps you keep the communication between server and client smooth and performance efficient as well with lesser code.
• It’s very powerful with asynchronous state management for TS/JS, React, Vue, Svelte and Solid
• You can manually refetch, cache, refresh, lazy load, paginate, and do much with your server-side data.

React query offers hooks like useQuery and useMutation, these hooks get you up and running in no time and allow you to remove any boilerplate code that was being used to maintain the server-side state.

Wrap up 🚀🚀

In this article, we covered a lot and I hope you didn’t leave me in the middle 😋. Be proud of yourself if you really got the gist of this one because this one is a difficult one to understand. You can learn more about react query and there is more to come with this library.

See you at the next one, take care!

Reference

https://tanstack.com/query/v4

👋 Hey, I'm Hasan Shahid

Hi I'm Hasan! I'm a software engineer with decent experience in full stack web development. My tech stack includes JS/TS, React, Native and anything JS. I keep learning and love football.