DEV Community: Matan Shaviro

Understanding useCallback and Create Your Own

Matan Shaviro — Sun, 01 Dec 2024 15:11:25 +0000

The useCallback hook in React used to memorize functions. It ensures that a function remains the same (referentially equal) between renders, unless its dependencies change. This is particularly useful when passing function as props to child components to prevent unnecessary re-renders.

Here's an example to demonstrate how useCallback works:

import { useEffect, useState } from 'react'

function CounterChild({ getCount }: { getCount: () => number }) {
  const [childCount, setChildCount] = useState(0)

  useEffect(() => {
    setChildCount(getCount())
    console.log('CounterChild rendered')
  }, [getCount])

  return <h2>Child Count: {childCount}</h2>
}

export default function CounterParent() {
  const [parentCounter, setParentCounter] = useState(0)
  const [, setToggle] = useState(false)

  const getCount = () => parentCounter

  return (
    <div>
      <h1>Count: {parentCounter}</h1>
      <CounterChild getCount={getCount} />
      <button onClick={() => setParentCounter((prev) => prev + 1)}>
        Increment
      </button>
      <button onClick={() => setToggle((prev) => !prev)}>Toggle</button>
    </div>
  )
}

What Happens During Rendering?

When the parentCounter changes, via increment button, the getCount function is recreated, and as a result, it triggers a re-run of the useEffect hooks in the CounterChild component, causing the child component to re-render.

Similarly, when you toggle the setToggle button, although the parent component re-renders, it causes the getCount function to be recreated again, triggering an unnecessary re-render of the CounterChild component.

How to Fix This Using `useCallback`

To prevent unnecessary re-renders of CounterChild when setToggle is clicked, we can wrap the getCount function in a useCallback hook. This will ensure that the function getCount only changes when parentCounter changes, not when other state variables like setToggle change.

import { useEffect, useState, useCallback } from 'react'

function CounterChild({ getCount }: { getCount: () => number }) {
  const [childCount, setChildCount] = useState(0)

  useEffect(() => {
    setChildCount(getCount())
    console.log('CounterChild rendered')
  }, [getCount])

  return <h2>Child Count: {childCount}</h2>
}

export default function CounterParent() {
  const [parentCounter, setParentCounter] = useState(0)
  const [, setToggle] = useState(false)

  const getCount = useCallback(() => parentCounter, [parentCounter])

  return (
    <div>
      <h1>Count: {parentCounter}</h1>
      <CounterChild getCount={getCount} />
      <button onClick={() => setParentCounter((prev) => prev + 1)}>
        Increment
      </button>
      <button onClick={() => setToggle((prev) => !prev)}>Toggle</button>
    </div>
  )
}

After we understood how useCallback works,
Let's create our own useCallback

import React from 'react'

const useCustomCallback = <T>(
  callback: () => T,
  dependencies: unknown[]
): (() => T) => {
  const callbackRef = React.useRef<() => T>(callback)
  const dependenciesRef = React.useRef<unknown[]>(dependencies)

  const hasChanged =
    !dependenciesRef.current ||
    dependenciesRef.current.some((dep, index) => dep !== dependencies[index])

  if (hasChanged) {
    callbackRef.current = callback
    dependenciesRef.current = dependencies
  }

  return callbackRef.current
}

export default useCustomCallback

Lets break it down:

const callbackRef = React.useRef<() => T>(callback)

callbackRef is a useRef hook that holds a reference to the latest version of the callback function. useRef doesn't trigger a re-render when its value changes, which makes it perfect for storing mutable data that does not affect the UI directly. This allows the hook to "remember" the callback without triggering re-renders when the callback updated.

const dependenciesRef = React.useRef<unknown[]>(dependencies)

dependenciesRef is another useRef hook that stores the dependencies array passed to the hook. This is used to check if the dependencies have changed between renders.

const hasChanged =
  !dependenciesRef.current ||
  dependenciesRef.current.some((dep, index) => dep !== dependencies[index])

!dependenciesRef.current: This part checks if the dependenciesRef has been initialized or not.

dependenciesRef.current.some(...): This part checks if any of the elements in the dependenciesRef.current array are different from the corresponding elements in the new dependencies array.

If either of these conditions is true (dependencies are missing or one of the dependencies has changed), hasChanged becomes true.

if (hasChanged) {
  callbackRef.current = callback
  dependenciesRef.current = dependencies
}

When hasChanged is true, it means the dependencies have changed, and we need to update the callbackRef and dependenciesRef to reflect the new callback function and the new dependencies.

return callbackRef.current

Finally, the hook returns callbackRef.current, which is the memoized version of the callback function. This version will remain the same unless the dependencies array changes.

This logic ensures that your application only updates when necessary, improving performance especially when passing functions as props to child components.

Happy coding :)

System Design - Notification Component

Matan Shaviro — Tue, 26 Nov 2024 10:26:58 +0000

Notifications are essential for improving user experience in modern applications. They keep users informed about events like successful actions, errors, or warnings. In this post, I'll show you how to build a reusable and customizable React Notification System from scratch.

Key Features of Our Notification System

Multiple Types: Supports success, error, warning, and info.
Auto-dismiss: Notifications disappear after a set duration.
Customizable Positions: Place notifications in any corner of the screen.
Stylish Animations: Smooth fade-in and fade-out effects.
Reusable Hook: Simple integration using a custom React hook.

By the end of this guide, you'll have a fully functional notification system that's lightweight and easy to integrate into your React projects.

Flow

Creating the Custom Hook

import { useState, useEffect } from 'react';
import Notification from '../components/Notification';

const useNotification = (position = 'bottom-left') => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (notification) => {
    const id = Math.random().toString(36).substring(7);
    setNotifications((prev) => [...prev, { ...notification, id }]);
  };

  const removeNotification = (id) => {
    setNotifications((prev) => prev.filter((notif) => notif.id !== id));
  };

  useEffect(() => {
    const timers = notifications.map((notification) =>
      notification.duration
        ? setTimeout(() => removeNotification(notification.id), notification.duration)
        : null
    );

    return () => timers.forEach((timer) => timer && clearTimeout(timer));
  }, [notifications]);

  const NotificationComponent = (
    <div className={`notification-container ${position}`}>
      {notifications.map((notification) => (
        <Notification
          key={notification.id}
          {...notification}
          onClose={() => removeNotification(notification.id)}
        />
      ))}
    </div>
  );

  return { triggerNotification: addNotification, NotificationComponent };
};

export default useNotification;

State Management: The hook uses the useState hook to maintain an array of notifications, where each notification includes an id for tracking.
Adding Notifications: The addNotification function accepts a notification object, generates a unique id, and adds it to the notifications list.
Removing Notifications: The removeNotification function removes a notification from the list by its id.
Automatic Dismissal: Using useEffect, the hook automatically removes notifications after their specified duration by setting a setTimeout.
Rendering Notifications: The NotificationComponent maps through the notifications and renders a Notification component for each one, passing the necessary props and an onClose callback to dismiss them.
Return Value: The hook returns a triggerNotification function to trigger new notifications and the NotificationComponent to render the notifications on the screen.

Building the Notification Component

import { useEffect, useState } from 'react';
import { AiOutlineClose } from 'react-icons/ai';
import './Notification.css';

const Notification = ({ type = 'info', message, onClose, duration = 5000 }) => {
  const [isExiting, setIsExiting] = useState(false);

  const handleClose = () => {
    setIsExiting(true);
    setTimeout(() => onClose && onClose(), 300);
  };

  useEffect(() => {
    const timer = setTimeout(handleClose, duration);
    return () => clearTimeout(timer);
  }, [duration]);

  return (
    <div className={`notification ${type} ${isExiting ? 'exit' : ''}`}>
      <span>{message}</span>
      <AiOutlineClose className="close-button" onClick={handleClose} />
    </div>
  );
};

export default Notification;

Fancy Styling

.notification {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 5px;
  color: white;
  animation: fadeIn 0.3s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}

.notification.exit {
  opacity: 0;
  transform: translateY(20px);
}

.notification.info {
  background-color: #2196f3;
}

.notification.success {
  background-color: #4caf50;
}

.notification.warning {
  background-color: #ff9800;
}

.notification.error {
  background-color: #f44336;
}

.close-button {
  margin-left: auto;
  cursor: pointer;
}

.notification-container {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-container.bottom-left {
  bottom: 10px;
  left: 10px;
}

.notification-container.bottom-right {
  bottom: 10px;
  right: 10px;
}

.notification-container.top-left {
  top: 10px;
  left: 10px;
}

.notification-container.top-right {
  top: 10px;
  right: 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

javascript

Using the Notification System

Now, integrate the hook into your app.

import useNotification from './hooks/useNotification';

function App() {
  const { NotificationComponent, triggerNotification } = useNotification('top-right');

  return (
    <div>
      <button
        onClick={() =>
          triggerNotification({
            type: 'success',
            message: 'This is a success message!',
            duration: 3000,
          })
        }
      >
        Trigger Success
      </button>
      <button
        onClick={() =>
          triggerNotification({
            type: 'error',
            message: 'This is an error message!',
            duration: 3000,
          })
        }
      >
        Trigger Error
      </button>
      {NotificationComponent}
    </div>
  );
}

export default App;

`useNotification` vs. `useContext`

While the custom useNotification hook is a great solution for managing notifications, React’s useContext hook is a common alternative for global state management. Let’s compare the two approaches.

1. Use Case

useNotification: Best for specific, isolated functionality like notifications.
useContext: Ideal for sharing global state or logic across the entire application.

2. Simplicity

useNotification: Simple and lightweight, requiring no additional setup.
useContext: Requires setting up a context provider and consumers, which can be verbose for isolated features.

3. Flexibility

useNotification: Limited to notifications; not a global state manager.
useContext: Flexible for managing any kind of shared state, including notifications.

4. Performance

useNotification: Localized state ensures updates only affect components related to notifications.
useContext: Context updates can trigger unnecessary re-renders across all consuming components unless carefully optimized.

The choice between useNotification and useContext depends on your application’s needs. If you’re building a feature-specific system like notifications, useNotification provides a lightweight and elegant solution. However, for managing broader state across multiple components, useContext is a better choice.

Happy Coding!

Playwright: GraphQL Requests in A Utility for Efficient Testing

Matan Shaviro — Sat, 23 Nov 2024 16:39:09 +0000

When working with end-to-end testing frameworks like Playwright, mocking GraphQL requests can significantly improve test reliability and speed. Inspired by Jay Freestone's excellent blog post, Stubbing GraphQL Requests in Playwright, I decided to build a reusable utility function that allows for flexible GraphQL request interception and response stubbing.

In this post, I’ll walk you through my implementation of the interceptGQL utility and demonstrate how it can be used with Playwright to mock server responses for GraphQL queries and mutations.

The interceptGQL Utility: How It Works

The interceptGQL utility registers a route handler for all GraphQL requests to your backend, intercepting specific operations based on their operationName. You can define how each operation should respond and validate the variables passed in the request.

Here’s the implementation:

import { test as baseTest, Page, Route } from '@playwright/test';
import { namedOperations } from '../../src/graphql/autogenerate/operations';

type CalledWith = Record<string, unknown>;

type Operations = keyof (typeof namedOperations)['Query'] | keyof (typeof namedOperations)['Mutation'];

type InterceptConfig = {
  operationName: Operations | string;
  res: Record<string, unknown>;
};

type InterceptedPayloads = {
  [operationName: string]: CalledWith[];
};

export async function interceptGQL(
  page: Page,
  interceptConfigs: InterceptConfig[]
): Promise<{ reqs: InterceptedPayloads }> {
  const reqs: InterceptedPayloads = {};

  interceptConfigs.forEach(config => {
    reqs[config.operationName] = [];
  });

  await page.route('**/graphql', (route: Route) => {
    const req = route.request().postDataJSON();
    const operationConfig = interceptConfigs.find(config => config.operationName === req.operationName);

    if (!operationConfig) {
      return route.continue();
    }

    reqs[req.operationName].push(req.variables);

    return route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: operationConfig.res }),
    });
  });

  return { reqs };
}

export const test = baseTest.extend<{ interceptGQL: typeof interceptGQL }>({
  interceptGQL: async ({ browser }, use) => {
    await use(interceptGQL);
  },
});

Example: Testing a Task Management Dashboard

To demonstrate the utility in action, let’s use it to test a Task Management Dashboard. We'll intercept a GraphQL query (GetTasks) and mock its response.

import { expect } from '@playwright/test';
import { namedOperations } from '../../../src/graphql/autogenerate/operations';
import { test } from '../../fixtures';
import { GetTasksMock } from './mocks/GetTasks.mock';

test.describe('Task Management Dashboard', () => {
  test.beforeEach(async ({ page, interceptGQL }) => {
    await page.goto('/tasks');

    await interceptGQL(page, [
      {
        operationName: namedOperations.Query['GetTasks'],
        res: GetTasksMock,
      },
    ]);
  });

  test('Should render a list of tasks', async ({ page }) => {
    const taskDashboardTitle = page.getByTestId('task-dashboard-title');
    await expect(taskDashboardTitle).toHaveText('Task Dashboard');

    const firstTaskTitle = page.getByTestId('0-task-title');
    await expect(firstTaskTitle).toHaveText('Implement authentication flow');

    const firstTaskStatus = page.getByTestId('0-task-status');
    await expect(firstTaskStatus).toHaveText('In Progress');
  });

  test('Should navigate to task details page when a task is clicked', async ({ page }) => {
    await page.getByTestId('0-task-title').click();

    await expect(page.getByTestId('task-details-header')).toHaveText('Task Details');
    await expect(page.getByTestId('task-details-title')).toHaveText('Implement authentication flow');
  });
});

What's Happening Here?

Intercepting Requests: The interceptGQL utility intercepts the GetTasks query and returns the mock data defined in GetTasksMock.
Mocking Responses: The mocked response is served instead of hitting the actual backend.
Validating Variables: The utility also stores the GraphQL variables sent with the request, which can be useful for testing API calls in isolation.

Why Use This Approach?

Improved Speed: By avoiding actual network requests, tests run faster and more reliably.
Simplified Test Data: You control the responses, making it easier to test edge cases and various application states.
Validation of API Calls: By capturing the variables sent with the request, you can ensure the frontend calls the backend with the correct parameters.

This implementation and approach were inspired by Jay Freestone's excellent blog post, Stubbing GraphQL Requests in Playwright. His post provided a solid foundation for building the interceptGQL utility.

By incorporating this utility into your Playwright test suite, you can mock GraphQL queries and mutations with ease, improving test speed and reliability while simplifying complex scenarios.

Infinite Scroll in React with Intersection Observer

Matan Shaviro — Wed, 13 Nov 2024 10:06:03 +0000

Infinite scrolling is a powerful user experience technique where more content loads as the user scrolls down. This guide will walk you through implementing infinite scroll in a React app with TypeScript, using the Intersection Observer API for efficient detection when more content needs to load.

Step 1: Setting Up the Project
We’ll assume you already have a basic React app setup. For this tutorial, we’ll focus on fetching paginated products from a sample API and loading more products as the user scrolls.

Step 2: Creating the useInfiniteScroll Custom Hook
The first step in implementing infinite scrolling is to create a reusable hook that detects when the user has scrolled near the end of the content. This hook will use the Intersection Observer API to trigger data fetching when a target element becomes visible.

Here’s our useInfiniteScroll hook:

import React from 'react'

export const useInfiniteScroll = (fetchData: () => void, hasMore: boolean) => {
  const loadMoreRef = React.useRef<HTMLDivElement | null>(null)

  const handleIntersection = React.useCallback(
    (entries: IntersectionObserverEntry[]) => {
      const isIntersecting = entries[0]?.isIntersecting
      if (isIntersecting && hasMore) {
        fetchData()
      }
    },
    [fetchData, hasMore]
  )

  React.useEffect(() => {
    const observer = new IntersectionObserver(handleIntersection)

    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current)
    }

    return () => observer.disconnect()
  }, [handleIntersection])

  return { loadMoreRef }
}

Explanation:

fetchData: A callback function that fetches the next set of data.
hasMore: A boolean that indicates if there’s more data to load.
loadMoreRef: A ref for the "Load More" target element, which will be observed by the Intersection Observer.

handleIntersection: This callback is triggered by the Intersection Observer. It checks if the observed element is in view and if there’s more data to load, calling fetchData() to retrieve more content if both conditions are met.
useEffect: Creates an Intersection Observer instance on mount to observe loadMoreRef, and disconnects the observer on cleanup.

This hook returns the loadMoreRef, which we’ll attach to a "Load More" div in our component.

Step 3: Building the Products Component
Now that we have the useInfiniteScroll hook, let’s create the Products component. This component fetches products from an API, tracks the current page, and uses the hook to load more products as needed.

import React from 'react'
import { useInfiniteScroll } from '../hooks/useInfiniteScroll'
import ProductCard from './ProductCard'

type Product = {
  id: number
  title: string
  thumbnail: string
}

const ITEMS_PER_PAGE = 6

const Products: React.FC = () => {
  const [products, setProducts] = React.useState<Product[]>([])
  const [hasMore, setHasMore] = React.useState(true)
  const [page, setPage] = React.useState(0)

  const fetchProducts = React.useCallback(async () => {
    const response = await fetch(
      `https://dummyjson.com/products?limit=${ITEMS_PER_PAGE}&skip=${page * ITEMS_PER_PAGE}`
    )
    const data = await response.json()

    if (data.products.length === 0) {
      setHasMore(false)
    } else {
      setProducts((prevProducts) => [...prevProducts, ...data.products])
      setPage((prevPage) => prevPage + 1)
    }
  }, [page])

  const { loadMoreRef } = useInfiniteScroll(fetchProducts, hasMore)

  return (
    <div>
      <div className="products">
        {products.map(({ id, thumbnail, title }) => (
          <ProductCard key={id} thumbnail={thumbnail} title={title} />
        ))}
      </div>

      {hasMore && <div ref={loadMoreRef}>Load More...</div>}
    </div>
  )
}

export default Products

Explanation:

products: Holds the loaded products.
hasMore: Tracks if more products are available for fetching.
page: Tracks the current page to fetch the next set of products.
fetchProducts Function: Fetches the next set of products from the API. If no more products are available, hasMore is set to false. Otherwise, it appends the new products to the existing list and increments the page. Using useInfiniteScroll:

We pass fetchProducts and hasMore to useInfiniteScroll.
The returned loadMoreRef is attached to a div that acts as the scroll trigger.

Step 4: Creating the ProductCard Component
For a cleaner structure, we’ll create a ProductCard component to display each product’s details.

import React from 'react'

const ProductCard: React.FC<{ thumbnail: string; title: string }> = ({
  thumbnail,
  title,
}) => (
  <span className="products__single">
    <img src={thumbnail} alt={title} />
    <span>{title}</span>
  </span>
)

export default ProductCard

Step 5: Styling the Components
Here’s some basic CSS for styling the product grid and individual product cards.

.products {
  margin: 20px;
  padding: 0;
  list-style-type: none;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}

.products__single {
  height: 250px;
  list-style: none;
  padding: 20px;
  background-color: rgb(220, 220, 220);
  text-align: center;
  border-radius: 5px;
}

.products__single > img {
  width: 100%;
  height: 95%;
  object-fit: cover;
  margin-bottom: 3px;
}

Step 6: Putting It All Together in the App Component
Finally, import and use the Products component in the main App component:

import React from 'react'
import './App.css'
import Products from './components/Products'

function App() {
  return (
    <div className="App">
      <Products />
    </div>
  )
}

export default App

Conclusion
With this setup, you now have infinite scroll implemented using React, TypeScript, and the Intersection Observer API. As the user scrolls, more products will load dynamically, providing a smooth and engaging experience.

Using Caching in React with useGetProducts: Improve Performance and UX

Matan Shaviro — Tue, 12 Nov 2024 19:00:13 +0000

In this blog post, we'll walk through how to implement a React hook that retrieves data with a cache-first approach, fetching data from a backend only when necessary. The goal is to demonstrate how caching can improve the user experience (UX) by reducing latency and making the app feel faster.

We'll be using a utility function to interact with the cache stored in IndexedDB and demonstrate the process of fetching product data from an API with high latency. This approach reduces the waiting time for users by showing cached data immediately and refreshing the data in the background.

The Problem: High Latency API Calls

Imagine you're building an app that fetches product data from an API. In real-world scenarios, this data may come from a remote server with latency (e.g., 2-3 seconds delay). While waiting for the data, users may feel frustrated. So, how do we solve this problem?

By caching the data using IndexedDB, we can immediately display previously fetched data to users, even while new data is being fetched in the background. This gives users a faster and smoother experience.

Step-by-Step Breakdown of `useGetProducts`

Let's break down the useGetProducts hook that handles the cache logic and API calls.

Step 1: Define the Product Interface

First, we define the Product interface to represent the data we are working with:

interface Product {
  id: number
  name: string
}

This is a simple object structure with id and name representing a product.

Step 2: Simulate an API Call with Latency

Next, we simulate an API call using the getProducts function, which has a built-in delay of 2 seconds to mimic a real backend API with high latency:

const getProducts = async (): Promise<Product[]> => {
  return await new Promise<Product[]>((resolve) =>
    setTimeout(
      () =>
        resolve([
          { id: 1, name: 'Product A' },
          { id: 2, name: 'Product B' },
        ]),
      2000
    )
  )
}

This function simulates a delayed API call that returns an array of products after 2 seconds.

Step 3: The `useGetProducts` Hook

Now, let's build the useGetProducts hook. The core idea is that we check if there's cached data available first and use it immediately, then fetch fresh data in the background.

const useGetProducts = (): {
  data: Product[] | undefined
  loading: boolean
} => {
  const [products, setProducts] = React.useState<Product[] | undefined>(
    undefined
  )
  const [loading, setLoading] = React.useState(true)
  const cacheKey = 'cache_products'

  // Load products from cache, then fetch from API to update if cache is used.
  const loadProducts = React.useCallback(async () => {
    setLoading(true)

    // Step 1: Load from cache, if available, for immediate display
    const cachedProducts = await getCachedData<Product[]>(cacheKey)
    if (cachedProducts && cachedProducts.length > 0) {
      setProducts(cachedProducts) // Display cached data immediately
      setLoading(false)
    }

    // Step 2: Fetch updated data from API, even if cache was used
    try {
      const response = await getProducts()
      setProducts(response) // Update with fresh data
      updateCache(response, cacheKey) // Update the cache with new data
    } catch (err) {
      console.error('Error fetching products:', err)
    } finally {
      setLoading(false)
    }
  }, [])

  React.useEffect(() => {
    loadProducts()
  }, [loadProducts])

  return { data: products, loading }
}

Explanation:

State Management: We use React.useState to manage two pieces of state:
products: The array of product data.
loading: A flag to indicate whether the data is still being fetched.
Cache Lookup: In the loadProducts function, we first try to fetch the product data from the cache using the getCachedData function. If cache data exists, it will be shown immediately, and loading will be set to false.
API Call: Simultaneously, we make an API call to fetch fresh data using the getProducts function. Once the new data is fetched, we update the state and cache it for future use using the updateCache function.
Optimistic UI: This approach helps improve the UX because it shows cached data right away, while fresh data is loaded in the background, reducing perceived latency.

Step 4: Caching Utility Functions

The caching is powered by two utility functions, getCachedData and updateCache, which interact with IndexedDB to store and retrieve data.

getCachedData: This function retrieves the cached data from IndexedDB.
updateCache: This function stores the fresh data in IndexedDB to be used for future requests.

By using IndexedDB, we ensure that data persists even if the user reloads the page or navigates away.

import {
  deleteFromIndexedDB,
  getAllKeysFromIndexedDB,
  getFromIndexedDB,
  saveToIndexedDB,
} from '../indexDb'

const encryptData = (data: string): string => btoa(encodeURIComponent(data))
const decryptData = (encryptedData: string): string =>
  decodeURIComponent(atob(encryptedData))

export const updateCache = async <T>(data: T, cacheKey: string) => {
  try {
    const [, cacheConst] = cacheKey.split('_')

    const allKeys = await getAllKeysFromIndexedDB()

    const existingKey = allKeys.find((key) => key.endsWith(`_${cacheConst}`))
    if (existingKey) {
      await deleteFromIndexedDB(existingKey)
    }

    const serializedData = JSON.stringify(data)
    const encryptedData = encryptData(serializedData)
    await saveToIndexedDB(cacheKey, encryptedData)
  } catch (error) {
    console.error('Failed to update cache:', error)
  }
}

export const getCachedData = async <T>(cacheKey: string): Promise<T | null> => {
  try {
    const cached = await getFromIndexedDB(cacheKey)
    if (cached) {
      const decryptedData = decryptData(cached)
      return JSON.parse(decryptedData) as T
    }
    return null
  } catch (error) {
    console.error('Failed to retrieve cached data:', error)
    return null
  }
}

These functions allow us to easily access and update the cache using IndexedDB in the browser, providing persistent data storage.

Step 5: Final Usage

Here's how you would use the useGetProducts hook in a component to display the products:

import React from 'react'
import useGetProducts from './useGetProducts'

const ProductList: React.FC = () => {
  const { data: products, loading } = useGetProducts()

  if (loading && !products) return <div>Loading products...</div>
  if (!products || products.length === 0) return <div>No products found.</div>

  return (
    <div>
      <h3>Available Products:</h3>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default ProductList

By implementing caching with IndexedDB in this way, we can significantly improve the UX of applications that rely on external APIs with high latency. The user will see cached data immediately, and the fresh data will update behind the scenes, ensuring that users always get the most up-to-date information without the wait.

This approach reduces the perceived latency of your application, making it feel faster and more responsive, even in situations where the backend might be slow.

Implementing a Debounce Hook in React with Typescript

Matan Shaviro — Tue, 12 Nov 2024 16:41:43 +0000

When building interactive applications, we often need to control how frequently a function executes, especially in cases where an action (like a search or API call) is triggered each time a user types into an input. Here, we’ll create a custom useDebounce hook that will help manage these frequent calls by delaying the response to user input.

In this post, we’ll walk through a basic React app that includes a useDebounce hook to debounce a search input. This example app includes:

App component: handles user input and displays it.
useDebounce hook: implements the debounce logic.

function App() {
  const [search, setSearch] = React.useState('')
  const debouncedSearch = useDebounce(search, 200)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  return (
    <div className="App">
      <input value={debouncedSearch} onChange={handleChange} />
    </div>
  )
}

export default App

Explanation:

State for Search Term: We define a state variable search using React.useState to keep track of the user's input.
Debounced Value: We pass the search term and a delay (200 milliseconds) to the useDebounce hook. The useDebounce hook returns a debouncedSearch value, which only updates if the user stops typing for 200 milliseconds.
Handling Input Changes: In the handleChange function, we update the search state as the user types in the input field.
Render the Input: The field is controlled by debouncedSearch. When a user types, the handleChange function captures each keystroke, but the input reflects changes with a 200ms delay, providing a smoother experience.

Now, let’s break down the useDebounce hook that manages the debounce effect:

export const useDebounce = <T>(value: T, delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => clearTimeout(timeout)
  }, [value, delay])

  return debouncedValue
}

Explanation:

State for Debounced Value: We create a debouncedValue state to store the delayed value. This state only updates after the delay.
useEffect Dependency: Inside the useEffect hook, we set a timeout to update debouncedValue after the specified delay. This ensures that if a new value is provided before the delay completes, the previous timeout is cleared, and a new one is set.
Clear Timeout on Cleanup: The return statement inside useEffect defines a cleanup function. When value or delay changes, clearTimeout is called to cancel the previous timer. This way, the timeout is reset each time the user types, so the debouncedValue only updates if the user stops typing.
Return the Debounced Value: Finally, useDebounce returns the debouncedValue. This value is stable (won’t change immediately) and reflects the input with a delay, reducing the frequency of updates in the App component.

Wrapping Up

With the useDebounce hook, we improve the performance and responsiveness of our app by ensuring updates only happen after the user stops typing. This simple hook can be adapted to any type of value, making it a versatile addition to your React projects.

Your own Promise.all

Matan Shaviro — Tue, 12 Nov 2024 08:39:11 +0000

In modern JavaScript development, handling asynchronous operations efficiently is essential, especially when multiple tasks need to run simultaneously. That’s where Promise.all comes in—a powerful method that allows you to execute several promises at once, waiting for all of them to resolve (or for one to reject) before proceeding. In this post, we’ll dive into how Promise.all works, why it’s such a valuable tool for managing concurrent asynchronous operations, and how you can implement it yourself to deepen your understanding of JavaScript promises.
Let’s get started!

Example usage

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)

customPromiseAll([p1, p2, p3])
  .then((res) => console.log(res))
  .catch(console.error)

When we start writing the function, we’ll first define a variable named result to hold all the responses from the promises.
Then, we’ll return a new instance of Promise with resolve and reject.

function customPromiseAll(promises) {
  let result = []
  return new Promise((resolve, reject) => {

  })
}

Now, we’ll iterate over the array of promises that the function receives using forEach, handling each resolved promise like this: each resolved promise will be inserted into the result array.

function customPromiseAll(promises) {
  let result = []
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      promise
        .then((res) => {
          result.push(res)

        })
    })
  })
}

We’ll check an edge case: if the length of promises is equal to the length of result, then we will resolve with result.

function customPromiseAll(promises) {
  let result = []
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      promise
        .then((res) => {
          result.push(res)
          if (result.length === promises.length) {
            resolve(result)
          }
        })
    })
  })
}

Finally, we’ll add .catch in case any of the promises return an error.

function customPromiseAll(promises) {
  let result = []
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      promise
        .then((res) => {
          result.push(res)
          if (result.length === promises.length) {
            resolve(result)
          }
        })
        .catch(reject)
    })
  })
}

DIY usePagination - React with Typescript

Matan Shaviro — Thu, 05 Jan 2023 06:22:55 +0000

Many applications may need to use multiple pages for easier navigation for better user experience. A good example would be Blog app, An application that displays a list of blog posts and allows users to navigate through them by dividing them into pages.

I will demonstrate how to create a custom hook that implements the logic that pagination brings by displaying a list of blog posts fetched via external API - https://jsonplaceholder.typicode.com/.
The complete code is available at the use-pagination-diy GitHub repository.

Setting up the project

Let's start by creating a new Vite project of react with typescript.
$ npm create vite@latest

After getting into the app folder and installing the dependencies
run the App with
$ npm run dev

As a first step, we will install a third-party library called react-query.
$ npm i react-query

With this library, we will easily be able to fetch data from the API.

Inside the src folder we will create three additional folders:

api
components
hooks

And delete the App.css file to read from one style file.
Our app file structure should look like this:

Fetching Data

We will create a new file in the API folder called post.ts. In this file, we will write the function to import posts from the external API. We will then transfer them to the component.

export type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
}

Displaying the Data

By using react-query, we'll fetch the data into the App.tsx file, then create a new component that will be inside the components folder and will be responsible for displaying a list of posts.

components/Posts.tsx :

import { Post } from "../api/post";

interface Props {
  posts: Post[];
}

export function Posts({ posts }: Props) {
  return (
    <div>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

App.tsx :

import { useQuery } from "react-query";
import { getPosts, Post } from "./api/post";

import { Posts } from "./components/Posts";

function App() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
  } = useQuery<Post, Error>("posts", getPosts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError || !posts) {
    return <div>{error?.message}</div>;
  }

  return (
    <div className="App">
      <Posts posts={posts} />
    </div>
  );
}

export default App;

Implement usePagination Hook

Our next step will be to create the hook that will be responsible for pagination, revealing the necessary data to the Posts component so that it can present the desired page to the user.

hooks/usePagination.ts :

import { useState } from "react";

const ITEMS_PER_PAGE = 10

export function usePagination<T>(items: T[]) {
  const [currentPage, setCurrentPage] = useState(1);

  const indexOfLast = currentPage * ITEMS_PER_PAGE;
  const indexOfFirst = indexOfLast - ITEMS_PER_PAGE;

  const currentItems = items.slice(indexOfFirst, indexOfLast);
  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);

  return { currentItems, itemsPerPage: ITEMS_PER_PAGE, paginate };
}

In order to display all the items we want on each page, we will define two local states:

currentPage: saves the current page the user is on
itemsPerPage: saves the amount of items we want to be displayed while the user is on that page

By looking through rows 14+15 of the two states we defined, we will find the first and last indexes of the list.

Create Pagination Component

During this step, we will prepare the component that will show us the navigation between the pages. First, we will add two new classes to our index.css file in order to display the navigation bar between the pages (the pagination) in a normal manner.

Two new classes at index.css file :

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.page {
  font-weight: bold;
  color: darkblue;
  cursor: pointer;
}

components/Pagination.tsx :

interface Props {
  postsPerPage: number;
  totalPosts: number;
  paginate: (value: number) => void;
}

export function Pagination({ postsPerPage, totalPosts, paginate }: Props) {
  const pageNumbers = Array(Math.ceil(totalPosts / postsPerPage))
    .fill(0)
    .map((e, i) => i + 1);

  return (
    <ul className="pagination">
      {pageNumbers.map((pageNumber) => (
        <li key={pageNumber} onClick={() => paginate(pageNumber)}>
          <span className="page">{pageNumber}</span>
        </li>
      ))}
    </ul>
  );
}

Wrapping up

As a result of the work we have accomplished so far, we will connect it all to one App.tsx the component that will display the list and paginate it.

App.tsx :

import { useQuery } from "react-query";
import { getPosts, Post } from "./api/post";
import { usePagination } from "./hooks/usePagination";

import { Posts } from "./components/Posts";
import { Pagination } from "./components/Pagination";

function App() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
  } = useQuery<Post[], Error>("posts", getPosts);
  const { currentItems, itemsPerPage, paginate } = usePagination<Post[]>(
    posts ?? []
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError || !posts) {
    return <div>{error?.message}</div>;
  }

  return (
    <div className="App">
      <Posts posts={currentItems} />
      <Pagination
        postsPerPage={itemsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
}

export default App;

Our Final App - Source Code

This example shows how we set up a pagination hook by sending the current page, items per page, and paginate function to the component.

Our application was developed in React, but you can use any other framework to apply the same logic. Hopefully, you learned something new today.

Feel free to leave a comment if you have any questions.

DEV Community: Matan Shaviro

Understanding useCallback and Create Your Own

What Happens During Rendering?

How to Fix This Using useCallback

System Design - Notification Component

Key Features of Our Notification System

Flow

Creating the Custom Hook

Building the Notification Component

Fancy Styling

Using the Notification System

useNotification vs. useContext

Playwright: GraphQL Requests in A Utility for Efficient Testing

The interceptGQL Utility: How It Works

Example: Testing a Task Management Dashboard

What's Happening Here?

Why Use This Approach?

Infinite Scroll in React with Intersection Observer

Using Caching in React with useGetProducts: Improve Performance and UX

The Problem: High Latency API Calls

Step-by-Step Breakdown of useGetProducts

Step 1: Define the Product Interface

Step 2: Simulate an API Call with Latency

Step 3: The useGetProducts Hook

Explanation:

Step 4: Caching Utility Functions

Step 5: Final Usage

Implementing a Debounce Hook in React with Typescript

Wrapping Up

Your own Promise.all

DIY usePagination - React with Typescript

Setting up the project

Fetching Data

Displaying the Data

Implement usePagination Hook

Create Pagination Component

Wrapping up

Our Final App - Source Code

How to Fix This Using `useCallback`

`useNotification` vs. `useContext`

Step-by-Step Breakdown of `useGetProducts`

Step 3: The `useGetProducts` Hook