Third parties Data Handler

Jotai

Jotai is a lightweight and flexible state management library for React, inspired by Recoil but simpler and with a smaller API surface. It allows developers to manage state using atomic units, known as atoms, which are pieces of state that can be read from and written to directly.

To use Jotai, you just need to create atoms to hold your state, and use the useAtom hook to access and manipulate these atoms within your React components. This approach ensures a fine-grained state management system, where updates to state only affect the components that depend on the modified atoms, leading to improved performance and easier debugging.

Usage

// src/App.tsx
import React from 'react';
import { atom, useAtom } from 'jotai';

// Create an atom to hold the state
const countAtom = atom<number>(0);

const Counter: React.FC = () => {
  // Use the useAtom hook to read and update the atom's state
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Jotai Counter Example</h1>
      <Counter />
    </div>
  );
}

export default App;

Reference:

• apps/lunchbox/src/hooks/people/usePeople.tsx
• apps/lunchbox/src/hooks/project/useProjectQuery.tsx

React-Query

React Query, now known as TanStack Query, is a powerful data-fetching and state management library for React applications. It simplifies data synchronization, caching, and updating in your application by providing hooks and utilities to fetch, cache, synchronize, and update server data in a declarative way. React Query helps manage server state in a more organized manner, reducing the need for boilerplate code and making it easier to handle complex data-fetching scenarios.

Usage

// src/App.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Create a client
const queryClient = new QueryClient();

// Define a type for the data
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// Fetching data with React Query
const fetchPosts = async (): Promise<Post[]> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const Posts: React.FC = () => {
  const { data, error, isLoading } = useQuery<Post[], Error>(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data?.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

const App: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>React Query Example</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
};

export default App;

Reference:

• apps/lunchbox/src/hooks/people/usePeople.tsx
• apps/lunchbox/src/hooks/project/useProjectQuery.tsx