Forem: Alex T.

State Scope with Providers - Next.js with Jotai

Alex T. — Fri, 19 Apr 2024 05:31:24 +0000

In the React state management, Jotai emerges as a minimalist and modern library, offering an elegant solution to handle atom-based state with simplicity and precision. This article delves into the practical use of Jotai to create isolated state scopes within a React application, utilizing the concept of Providers. We'll explore how to structure components for shared or independent state management, walking through a hands-on example that illustrates the power and flexibility of Jotai in a React project.

Isolating Component States with Jotai Providers

When building complex applications in React, it's common to encounter scenarios where components need to share state or maintain their own independent state. Jotai, a state management library, provides a straightforward and efficient way to handle these requirements. Let's look at a practical example to understand how Jotai achieves this with its Provider pattern.

In the code snippet below, we have a SharedComponent that is utilized multiple times within two separate contexts created by Provider.

// page.tsx
import Provider from './path-to-provider'; // Ensure to import the Provider from its file
import SharedComponent from './shared-component'; // Ensure to import SharedComponent

const Page = () => {
  return (
    <div>
      <Provider>
        <SharedComponent /> {/* C1 */}
        <SharedComponent /> {/* C2 */}
      </Provider>
      <Provider>
        <SharedComponent /> {/* C3 */}
        <SharedComponent /> {/* C4 */}
      </Provider>
    </div>
  );
};

export default Page;

Each Provider in the code above creates a unique context for state management. Consequently, SharedComponent instances within the same Provider share a common state, while those under different Provider instances maintain their own state, isolated from others.

Here's how SharedComponent connects to the state using Jotai:

// shared-component.tsx
import { atom, useAtom } from 'jotai';

const countAtom = atom(0); // This atom holds the state for our component

const SharedComponent = () => {
  const [count, setCount] = useAtom(countAtom); // This hook connects our component to the atom's state

  return (
    <div>
      Shared component
      <div>{count}</div>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        +1
      </button>
    </div>
  );
};

export default SharedComponent;

Clicking the "+1" button in any instance of SharedComponent (C1, C2, C3, C4) will result in:

Simultaneous increment of count in C1 and C2, as they share the same state within a single Provider.
Simultaneous increment of count in C3 and C4 for the same reason.
Independent state changes between C1/C2 and C3/C4 due to the distinct Provider wrapping, creating isolated states.

This example demonstrates the use of Provider to create separate "contexts" or "scopes" of state within a React application, facilitating both shared and independent state management across the component hierarchy.

Structuring Shared and Isolated States with Jotai

In this section, we'll further explore how to share or isolate state between components in a React application using Jotai atoms and Providers.

We begin by declaring a shared atom in a separate file:

// atoms.ts
"use client";
import { atom } from 'jotai';

export const sharedCountAtom = atom<number>(0);

By exporting the sharedCountAtom, we make it available to any component that needs to tap into this shared state.

The main page's component structure is as follows:

// page.tsx
import { Provider } from 'jotai';
import ComponentC from './ComponentC';
import ComponentD from './ComponentD';

const Page = () => {
  return (
    <div>
      <Provider>
        <ComponentC /> {/* Component C1 */}
        <ComponentD /> {/* Component D1 */}
      </Provider>
      <ComponentC /> {/* Component C2 */}
      <ComponentD /> {/* Component D2 */}
    </div>
  );
};

export default Page;

ComponentC and ComponentD are functionally identical and use the sharedCountAtom for state management. The context in which they are rendered, inside or outside a Provider, determines their state sharing behavior:

ComponentC1 and ComponentD1 inside a Provider share the same atom state.
ComponentC2 and ComponentD2 outside a Provider share a different instance of the atom state, isolated from ComponentC1 and ComponentD1.

Here are the component implementations:

// ComponentC.tsx
"use client";
import { useAtom } from 'jotai';
import { sharedCountAtom } from './atoms';

const ComponentC = () => {
  const [count, setCount] = useAtom(sharedCountAtom);
  return (
    <div className='border-2 w-60 h-60'>
      Component C
      <div>Count: {count}</div>
      <button
        className="border-1 border-black bg-blue-300 text-white hover:bg-yellow-200 p-3"
        onClick={() => setCount((prev) => prev + 1)}
      >
        +1
      </button>
    </div>
  );
};

export default ComponentC;

// ComponentD.tsx
"use client";
import { useAtom } from 'jotai';
import { sharedCountAtom } from './atoms';

const ComponentD = () => {
  const [count, setCount] = useAtom(sharedCountAtom);
  return (
    <div className='border-2 w-60 h-60'>
      Component D
      <div>Count: {count}</div>
      <button
        className="border-1 border-black bg-blue-300 text-white hover:bg-yellow-200 p-3"
        onClick={() => setCount((prev) => prev + 1)}
      >
        +1
      </button>
    </div>
  );
};

export default ComponentD;

Note: It is crucial to include the directive "use client" in all components to ensure proper client-side state management, preventing potential issues.

In summary, ComponentC and ComponentD may import the same atom from atoms.ts, but their state sharing is controlled by the use of Provider. This setup exhibits the adaptability of Jotai in managing state across various scopes within a React application.

Conclusion

The React ecosystem offers various approaches to state management, each with its own set of trade-offs. Jotai, with its minimalist and atom-based approach, provides a powerful yet simple solution for developers to control state scope within their applications. By leveraging Providers, developers can easily create shared or isolated state contexts, ensuring that components behave predictably and maintain clean separation of concerns. As we've seen in the examples above, Jotai's flexibility and ease of use make it an excellent choice for React developers looking to streamline their state management practices.

Reference:

The first example is inspired from this article - # Jotai V2 Notes 02 — Store & Provider

Simple Examples to Understand Generic Functions and Types in TypeScript

Alex T. — Tue, 12 Mar 2024 23:01:39 +0000

When working with TypeScript, understanding how to leverage generics can greatly enhance the flexibility and reusability of your code. In this blog post, we will explore simple examples to grasp the concept of generic functions and types in TypeScript.

The Problem Without Generics

Let's start by considering a common scenario where we want to retrieve the length of an array. Without generics, we often resort to writing separate functions for different types of arrays, such as numbers or strings. This can lead to code duplication and reduced maintainability.

function getNumberArrayLength(arr: number[]): number {
    return arr.length;
}

function getStringArrayLength(arr: string[]): number {
    return arr.length;
}

Introducing Generics

Generics provide a solution to this problem by allowing us to write a single function that can work with arrays of any type. By using a placeholder like Type, we can create a more versatile function.

function getArrayLength<Type>(arr: Type[]): number {
    return arr.length;
}

In the getArrayLength function, Type serves as a placeholder for any type. When calling the function, we can specify the type, enabling the function to handle arrays of different types seamlessly.

let nums: number[] = [1, 2, 3];
let numLength: number = getArrayLength<number>(nums);
console.log(numLength); // Outputs: 3

let strs: string[] = ['a', 'b', 'c'];
let strLength: number = getArrayLength<string>(strs);
console.log(strLength); // Outputs: 3

In the above examples, we demonstrate how to use the getArrayLength function with arrays of numbers and strings by specifying the type during the function call.

Practical Example: Reversing Arrays

To further illustrate the power of generics, let's consider a practical example where we create a generic function to reverse an array of any type.

function reverseArray<Type>(arr: Type[]): Type[] {
  return arr.reverse();
}

let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers: number[] = reverseArray(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

let strings: string[] = ['apple', 'banana', 'cherry'];
let reversedStrings: string[] = reverseArray(strings);
console.log(reversedStrings); // Output: ['cherry', 'banana', 'apple']

In this example, the reverseArray function showcases how a generic function can effortlessly handle arrays of different types, allowing for code reusability and flexibility.

Conclusion

Generics in TypeScript are a powerful feature that can streamline your code and make it more adaptable to different data types. By utilizing generic functions and types, you can write cleaner, more concise code that is easier to maintain and extend. Experiment with generics in your TypeScript projects to unlock their full potential!

An elegant way to use CASL, Jotai for Permission Control on Next.JS

Alex T. — Fri, 01 Mar 2024 03:51:23 +0000

In the case of combining CASL with Next.js (a React framework), the common solution is to employ React's Context API. However, this approach can lead to hydration issues in Next.js, which may force a fallback to client-side rendering, undermining the benefits of Next.js's server-side capabilities. To address this, we've explored an alternative using Jotai, which has proven to be a cleaner and more efficient solution.

The Advantages of Using Jotai Over Context API

Jotai presents a couple of significant advantages over the traditional Context API:

Performance: Jotai boosts performance by re-rendering only the components that are subscribed to a specific piece of state. In contrast, the Context API causes all consumer components to re-render whenever there's a change in the context, leading to potential performance bottlenecks in larger applications.
Simplicity: With Jotai, there's no need to set up a provider component, which streamlines the codebase and simplifies state management.

Our Tech Stack

Before diving into the implementation details, here's a quick overview of our tech stack:

CASL version 6
Next.js version 14
Jotai version 2.6

The custom hook we'll discuss is useAbility, found in src/hooks/users/use-permission.ts.

The `useAbility` Hook

Let's take a look at what our useAbility hook looks like:

import { useAtom, atom } from 'jotai';
import { Ability, defineAbility } from '@casl/ability';

type PermissionStrings = string[];
const abilityAtom = atom<Ability>(defineAbility(() => {}));

export function useAbility() {
  const [ability, setAbility] = useAtom(abilityAtom);

  function buildAbilityFromString(permissionStrings: PermissionStrings): void {
    const permissions = permissionStrings.flat();
    const newAbility = defineAbility((can) => {
      permissions.forEach((permission) => {
        const [action, subject] = permission.split(':');
        can(action, subject);
      });
    });
    setAbility(newAbility);
  }

  return { ability, buildAbilityFromString };
}

In this hook, we're using Jotai's atom and useAtom to manage our CASL Ability instance. The buildAbilityFromString function allows us to dynamically construct abilities from a list of permission strings.

How to Use `useAbility` in Components

To leverage the useAbility hook in your components, follow these steps:

At the beginning of your component file, use the use client; directive to ensure the code runs on the client side.
Import the useAbility hook and the Can component from CASL's React package:

import { useAbility } from '@/hooks/users/use-permission';
import { Can } from '@casl/react';

Invoke the useAbility hook within your component to get the ability instance:

const { ability } = useAbility();

Use the Can component to control the rendering based on permissions:

"use client";
import React from "react";
import { useAbility } from "@/hooks/users/use-permission";
import { Can } from "@casl/react";

const PermissionTestComp = () => {
  const { ability } = useAbility();

  return (
    <div>
      <p>Permission Test</p>
      <Can I="create" a="doc" ability={ability}>
        <div>You can see this if you have 'create:doc' permission</div>
      </Can>
      <Can I="manage" a="money" ability={ability}>
        <div>This will not render unless you have 'manage:money' permission</div>
      </Can>
    </div>
  );
};

export default PermissionTestComp;

By following this approach, you can ensure that your Next.js application benefits from both server-side rendering and client-side authorization checks, without running into the common hydration issues associated with the Context API.

Note: If there are any errors in the article, please feel free to point them out. Thank you.

A simple example to understand Module Augmentation in TypeScript

Alex T. — Thu, 29 Feb 2024 00:41:10 +0000

What is Module Augmentation

Imagine you're using a third-party library with a Vehicle class, which provides basic vehicle functionality. However, your project requires additional features not present in the original class. This is where module augmentation comes in handy.

Here's the original Vehicle class from the library:

// vehicle.ts (in a third-party library)
export class Vehicle {
  constructor(public make: string, public model: string) {}

  startEngine() {
    console.log('Engine started');
  }
}

You want to add a toggleHeadlights method and a headlightsOn property to this Vehicle class. Here's how you can use module augmentation to achieve this.

Implementing Module Augmentation

First, import the Vehicle class into your index.ts file:

// index.ts
import { Vehicle } from "./vehicle";

Now, declare a module with the same path as the imported module and extend the Vehicle class interface:

// index.ts
declare module "./vehicle" {
  interface Vehicle {
    headlightsOn: boolean;
    toggleHeadlights(): void;
  }
}

TypeScript will merge the original Vehicle class with the augmented interface, effectively adding the new properties and methods to the class.

Next, you need to provide the implementation for the toggleHeadlights method. This can be done by augmenting the prototype of the Vehicle class:

// index.ts
Vehicle.prototype.toggleHeadlights = function() {
  this.headlightsOn = !this.headlightsOn;
  console.log(`Headlights ${this.headlightsOn ? 'on' : 'off'}`);
};

With these changes, you can now instantiate a Vehicle and use both the original and the new augmented functionalities:

// index.ts
const myCar = new Vehicle('Tesla', 'Model S');

myCar.startEngine(); // Engine started
myCar.toggleHeadlights(); // Headlights on
console.log(`Are the headlights on? ${myCar.headlightsOn}`); // Are the headlights on? true

Why Not Just Declare Another Class?

Why didn't we declare a new class extending the Vehicle class? While that is a common approach, there are scenarios where you might not be able to extend a class directly, such as when the class is not exported or when you want to patch the class without creating a subclass. Module augmentation is a powerful tool for these situations.

This article is inspired by the post Module Augmentation in TypeScript

Creating a Multi-Column Search Feature in a React Data Table

Alex T. — Tue, 27 Feb 2024 00:45:52 +0000

Implementing a multi-column search feature by one text field is essential in some cases. This article will guide you through the process of adding such a feature to a React data table component using the @tanstack/react-table library.

Understanding Multi-Column Search

A multi-column search allows users to type a query into a single search bar and have the table filter its rows based on that query across multiple columns. This means that rather than having separate search fields for each column, users can enter one term and the table will display rows that match this term in any of the specified columns.

Implementing the Multi-Column Search

Step 1: Define the Filter Function

Firstly, we need to define a filter function that will be used to search across multiple columns. This function will concatenate the values of the specified columns and then check if the concatenated string includes the search term.

import { FilterFn } from '@tanstack/react-table';

// Custom filter function for multi-column searching
const multiColumnFilterFn: FilterFn<Restaurant> = (row, columnId, filterValue) => {
  // Concatenate the values from multiple columns into a single string
  const searchableRowContent = `${row.original.name} ${row.original.type} ${row.original.location} ${row.original.owner}`;

  // Perform a case-insensitive comparison
  return searchableRowContent.toLowerCase().includes(filterValue.toLowerCase());
};

Step 2: Integrate the Filter Function into the Column Definition

Next, we integrate this filter function into our column definition for the React Table. In this example, we will apply it to the name column, but the function will actually filter across multiple columns.

{
  accessorKey: 'name',
  header: ({ column }) => (
    <DataTableColumnHeader column={column} title="Name" />
  ),
  cell: ({ row }) => (
    // ... cell rendering code
  ),
  filterFn: multiColumnFilterFn,
}

Conclusion

By following these steps, you can enhance your React data tables with a multi-column search feature. This not only improves the user experience by making it easier to find relevant data but also streamlines the interface by reducing the clutter of multiple search fields.

Forem: Alex T.

State Scope with Providers - Next.js with Jotai

Isolating Component States with Jotai Providers

Structuring Shared and Isolated States with Jotai

Conclusion

Reference:

Simple Examples to Understand Generic Functions and Types in TypeScript

The Problem Without Generics

Introducing Generics

Practical Example: Reversing Arrays

Conclusion

An elegant way to use CASL, Jotai for Permission Control on Next.JS

The Advantages of Using Jotai Over Context API

Our Tech Stack

The useAbility Hook

How to Use useAbility in Components

A simple example to understand Module Augmentation in TypeScript

What is Module Augmentation

Implementing Module Augmentation

Why Not Just Declare Another Class?

Creating a Multi-Column Search Feature in a React Data Table

Understanding Multi-Column Search

Implementing the Multi-Column Search

Step 1: Define the Filter Function

Step 2: Integrate the Filter Function into the Column Definition

Conclusion

The `useAbility` Hook

How to Use `useAbility` in Components