HTTP State in React

Hello, React developers! Today, we're diving into a concept that could revolutionize how you manage state in your applications: HTTP State. If you've ever struggled with complex global states or wondered if there's a more efficient way to handle API data, this post is for you.

The Problem: State Synchronization and Unnecessary Requests

Many of us have been there: you have a list of products, a modal to add new items, and the need to keep everything in sync. The traditional solution? Global states, Context API, or multiple props being passed from component to component. The result? Complex code and, often, unnecessary API requests.

The Solution: HTTP State with React Query

Enter HTTP State, an approach that can drastically simplify this scenario. Let's see how to implement this using React Query.

1. Initial Setup

First, install React Query:

npm install @tanstack/react-query        

Set up the QueryClientProvider in your main component:

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* ... */}
    </QueryClientProvider>
  );
}        

2. Fetching Data

Use the useQuery hook to fetch your products:

import { useQuery } from '@tanstack/react-query';

function ProductList() {
  const { data: products } = useQuery({
    queryKey: ['products'],
    queryFn: getProducts,

  });

  return (
    // Render your product list
  );
}        

3. Adding New Products

Here's where the magic happens. Use useMutation to add products and update the cache:

import { useMutation, useQueryClient } from '@tanstack/react-query';
function AddProductForm() {
  const queryClient = useQueryClient();

  const { mutateAsync: createProductFn } = useMutation({
    mutationFn: createProduct,
    onSuccess: (_, variables) => {
      const { name, price } = variables
      queryClient.setQueryData(['products'], (oldData) => {
        return [...oldData, { id: oldData.length + 1, name, price }]
      });
    }
  });
  // Form logic 
}        

The Result: Efficiency and Simplicity

With this approach, we achieve:

1. Instant UI updates after adding a product.
2. Avoiding unnecessary API requests.
3. Maintaining cleaner and easier-to-maintain code.
4. Eliminating the need for complex global states in this scenario.

Conclusion: Reconsider Your Global States

Before resorting to global state management solutions, consider if HTTP State can solve your problem. Libraries like React Query, SWR, or Apollo (for GraphQL) offer powerful solutions to sync your local state with server data.

Remember: not every state needs to be global. Sometimes, the simplest solution is the best!

Have you used HTTP State in your projects? Share your experiences in the comments!

Thanks for reading! If you want to read more of my articles, you can find them here. Feel free to get in touch.

I always enjoy talking and sharing experiences with other developers.