DEV Community: Akashdeep Patra

Custom React hook to sync state with the URL

Akashdeep Patra — Sat, 10 Aug 2024 08:34:26 +0000

When building React applications, it's often beneficial to reflect the state in the URL. This not only makes the state sharable but also allows users to bookmark or refresh pages without losing their context. In this post, we'll create a custom React hook called useParamState in TypeScript. This hook will function like useState, but it will also sync the state with the search parameters in the URL. Importantly, it will support complex object values.

Why `useParamState`?

React Router's useSearchParams hook is excellent for managing URL search parameters, but syncing them with component state can be cumbersome. The useParamState hook addresses this by:

Providing a simple API similar to useState.
Automatically syncing state with the URL search parameters.
Supporting complex types, including objects.

Prerequisites

Basic understanding of React, TypeScript, and React Router.
Familiarity with useState and useEffect.

Implementing `useParamState`

Step 1: Setting Up the Project

( This assumes you already know how to set up a react project, if not head over to Vite)

Ensure you have react-router-dom installed:

npm install react-router-dom

Step 2: The useParamState Hook

Here’s how you can implement the useParamState hook:


import { useCallback, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

/**
 * A custom hook that syncs state with a URL search parameter.
 * Supports string, number, boolean, and object values.
 * @param key The search parameter key to sync with.
 * @param defaultValue The default value for the state.
 * @returns A stateful value, and a function to update it.
 */
function useParamState<T extends string | number | boolean | object>(
  key: string,
  defaultValue: T
): [T, (newValue: Partial<T> | T) => void] {
  const [searchParams, setSearchParams] = useSearchParams();
  const paramValue = searchParams.get(key);

  const [state, setState] = useState<T>(() => {
    if (paramValue === null) {
      return defaultValue;
    }
    try {
      return JSON.parse(paramValue) as T;
    } catch {
      return paramValue as T;
    }
  });

  const setParamState = useCallback(
    (newValue: Partial<T> | T) => {
      const updatedValue = typeof newValue === 'object' && !Array.isArray(newValue)
        ? { ...state, ...newValue }
        : newValue;

      setState(updatedValue as T);
      const newSearchParams = new URLSearchParams(searchParams);
      newSearchParams.set(key, JSON.stringify(updatedValue));
      setSearchParams(newSearchParams);
    },
    [key, searchParams, setSearchParams, state]
  );

  return [state, setParamState];
}

export default useParamState;

How It Works

Initialization:

The hook starts by checking if the specified search parameter exists in the URL. If it does, the hook parses it and uses it as the initial state. Otherwise, it falls back to the provided defaultValue.

State Update:

The setParamState function updates both the internal state and the search parameter in the URL. It uses JSON.stringify to serialize the state, allowing us to store complex objects in the URL.

Type Support:

The hook supports various types (string, number, boolean, and object) by leveraging TypeScript’s generics and JSON parsing.

Step 3: Using useParamState

Let's see how you can use useParamState in a React component:


import React from 'react';
import useParamState from './useParamState';

interface FilterState {
  status: string;
  sortBy: string;
}

const MyComponent: React.FC = () => {
  const [filter, setFilter] = useParamState<FilterState>('filter', {
    status: 'all',
    sortBy: 'date',
  });

  return (
    <div>
      <h2>Current Filter: {filter.status}, Sort by: {filter.sortBy}</h2>
      <button onClick={() => setFilter({ status: 'active', sortBy: filter.sortBy })}>
        Active
      </button>
      <button onClick={() => setFilter({ status: 'completed', sortBy: filter.sortBy })}>
        Completed
      </button>
      <button onClick={() => setFilter({ ...filter, sortBy: 'priority' })}>
        Sort by Priority
      </button>
    </div>
  );
};

export default MyComponent;

Step 4: Testing the Hook

To ensure that the useParamState hook works as expected, you can write unit tests using @testing-library/react:


import { renderHook, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import useParamState from './useParamState';

interface FilterState {
  status: string;
  sortBy: string;
}

test('should sync object state with search params', () => {
  const wrapper = ({ children }: { children: React.ReactNode }) => (
    <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
  );

  const { result } = renderHook(() => useParamState<FilterState>('filter', { status: 'all', sortBy: 'date' }), { wrapper });

  // Initial state
  expect(result.current[0]).toEqual({ status: 'all', sortBy: 'date' });

  // Update state and URL
  act(() => {
    result.current[1]({ status: 'active', sortBy: 'priority' });
  });

  // Updated state
  expect(result.current[0]).toEqual({ status: 'active', sortBy: 'priority' });
});

Conclusion

The useParamState hook simplifies the process of syncing state with URL search parameters, making your React applications more robust and user-friendly. With support for complex types like objects, this hook is a powerful tool for managing state that needs to persist across page reloads or be shared via URLs.

You can further extend this hook to handle even more complex data structures, but for most use cases, this implementation will cover your needs.

( Do comment on the article so that I can make this better and improve any mistakes I might have made, thanks in advance. )

Feel free to follow me on other platforms as well

10 Tips for Mastering TypeScript Generics

Akashdeep Patra — Sat, 30 Mar 2024 13:05:47 +0000

As a Senior software engineer, I've seen firsthand the transformative power of TypeScript's generics. They not only enforce type safety but also enhance code reuse and readability. However, diving into advanced generics can be daunting (Even highly skilled engineers have a hard time with it , trust me on that ). Here are ten tips to navigate these waters, each accompanied by a code snippet to illustrate the concept in action.

Leveraging Conditional Types
Using Type Inference in Generics
Mapped Types with Generics
Utility Types and Generics
Generic Constraints
Default Generic Types
Advanced Pattern Matching with Conditional Types
Type Guards and Differentiating Types
Combining Generics with Enums for Type Safety
Generic Type Aliases

1. Leveraging Conditional Types

Conditional types allow you to apply logic within the type system, enabling types that adapt based on the conditions met.

type IsString<T> = T extends string ? true : false;

// Usage
const isStringResult: IsString<string> = true; // true
const isStringResult2: IsString<number> = false; // false

2. Using Type Inference in Generics

The infer keyword is a powerful feature within conditional types that allows you to infer a type for use within the rest of the type condition.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

// Usage
function greet(name: string): string {
    return `Hello, ${name}!`;
}

type GreetReturnType = ReturnType<typeof greet>; // string

3. Mapped Types with Generics

Mapped types enable you to create new types by transforming existing ones, iterating over their properties to apply modifications.

type ReadOnly<T> = { readonly [P in keyof T]: T[P] };

// Usage
interface Example {
    name: string;
    age: number;
}

type ReadOnlyExample = ReadOnly<Example>;
// ReadonlyExample: { readonly name: string; readonly age: number; }

4. Utility Types and Generics

Utility types, provided by TypeScript, leverage generics to create common modifications of types, such as making all properties optional or read-only.

function update<T>(obj: T, changes: Partial<T>): T {
    return { ...obj, ...changes };
}

// Usage
interface User {
    name: string;
    age: number;
}

const user: User = { name: "Alice", age: 30 };
const updatedUser = update(user, { age: 31 });

5. Generic Constraints

Constraints refine the types that can be used with generics, ensuring that they meet certain criteria or structures.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

// Usage
const person = { name: "John", age: 30 };
const name = getProperty(person, "name"); // "John"

6. Default Generic Types

Default types in generics provide a default type parameter, simplifying generic usage and enhancing API flexibility.

function createArray<T = number>(length: number, value: T): T[] {
    return new Array(length).fill(value);
}

// Usage
const numberArray = createArray(3, 0); // [0, 0, 0]
const stringArray = createArray<string>(3, "hello"); // ["hello", "hello", "hello"]

7. Advanced Pattern Matching with Conditional Types

Enhancing conditional types with pattern matching allows for more precise type transformations and checks.

type Flatten<T> = T extends Array<infer U> ? U : T;

// Usage
type NestedArray = [number, [string, boolean], [object]];
type FlatArray = Flatten<NestedArray>; // number | string | boolean | object

8. Type Guards and Differentiating Types

Type guards, especially when used with generics, allow for runtime type assertions, ensuring that your code remains type-safe even when dealing with unknown types.

function isString<T>(x: T): x is T extends string ? string : never {
    return typeof x === "string";
}

// Usage
const value: unknown = "Hello";
if (isString(value)) {
    console.log(value.toUpperCase()); // "HELLO"
}

9. Combining Generics with Enums for Type Safety

Enums can be used alongside generics to create more restrictive and type-safe interfaces, particularly useful in function parameters and return types.

enum Status { New, InProgress, Done }

function setStatus<T extends Status>(status: T): void {
    console.log(status);
}

// Usage
setStatus(Status.New); // Status.New

10. Generic Type Aliases

Type aliases with generics can define complex types in a more readable and maintainable way, facilitating code reuse and consistency.

type Container<T> = { value: T; timestamp: Date };

// Usage
const container: Container<number> = { value: 42, timestamp: new Date() };

Conclusion

Advanced TypeScript generics unlock a myriad of possibilities for creating flexible, reusable, and type-safe code. By exploring these ten advanced tips, you're well on your way to mastering TypeScript generics, ready to tackle complex typing challenges with confidence but i'd still highly recommend the actual typescript docs .

Do comment on the article so that I can make this better and improve any mistakes I have made, thanks in advance.

Feel free to follow me on other platforms as well

Things about typescript you should know as a pro React dev

Akashdeep Patra — Wed, 08 Feb 2023 08:40:54 +0000

Types

One of the main features of TypeScript is its ability to type-check your code. This means that you can specify the types of variables, function parameters, and return values, and the TypeScript compiler will check that your code adheres to these types. For example, you can specify that a function expects a string as an argument and returns a number like this:


function powerOfN(x: number,n: number): number {
  return Math.pow(x,n);
}

In this example, if you try to pass a non-number value to the powerOfN function, you will get a type error from the TypeScript compiler/ extension. This can help catch bugs early on and make your code more predictable and easier to understand.

Interfaces

An interface in TypeScript defines a contract that specifies the shape of an object. You can use interfaces to define the expected structure of objects passed as arguments or returned from functions. For example, you can define an interface for a React component's props like this:

interface MyProps {
  name: string;
  age: number;
  gender: string;
}

Then, you can use this interface to type-check the props passed to your component:

import React from 'react';

const MyComponent: React.FC<MyProps> = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Gender: {props.gender}</p>
    </div>
  );
};

This can be especially useful when working with React components, as you can use interfaces to specify the props and state types for a component.

P.S don't ask me for class-based component examples (get some professional help)

Generics

Generics allow you to write code that can work with a variety of types, rather than being tied to a specific type. This can be useful when writing reusable utility functions or higher-order components

For example, you can use generics to create a higher-order component that can wrap any component and provide it with additional props or functionality. Here's an example of a higher-order component that uses generics to accept a component and pass it a title prop:

import * as React from 'react';

interface Props<T> {
  component: React.ComponentType<T>;
  title: string;
}

function withTitle<T>(props: Props<T>) {
  const { component: Component, title, ...rest } = props;
  return (
    <div>
      <h1>{title}</h1>
      <Component {...rest} />
    </div>
  );
}

export default withTitle;

To use this higher-order component, you can provide it with a component and a title prop:

import * as React from 'react';
import withTitle from './withTitle';

function MyComponent(props: { message: string }) {
  return <div>{props.message}</div>;
}

const WrappedComponent = withTitle<{ message: string }>({
  component: MyComponent,
  title: 'Hello World',
  message: 'Hello, world!'
});

export default WrappedComponent;

In this example, the withTitle higher-order component uses a generic type argument to specify the type of props that the wrapped component expects. This allows you to reuse the withTitle component with different components that have different prop types.

Extending interfaces when needed

Let's assume you are using a very popular component library, and you are asked to build a new design system on top of this. for these kinds of situations, you don't really need to create a new interface for each component that you are basically wrapping up right? (because that'll be harmful for your health trust me on that ) this is a very good use-case where you probably want to extend the existing types exposed by the library itself or even just use that same type (all popular libraries do that if yours isn't please re-evaluate your life choices..lol just kidding ... or Am I?), something like this:


import { Button } from "antd";
import { BaseButtonProps } from "antd/lib/button/button";
import React from "react";


interface MyCustomButtonProps extends BaseButtonProps {
  extraPropsThatYouWant: any;
}
const MyCustomButton: React.FC<MyCustomButtonProps> = ({
  extraPropsThatYouWant,
  className = "",
  ...rest
}) => {
  if (extraPropsThatYouWant) {
    // do something
  }
  return (
    <Button
      {...rest}
      className={`${className} some-random-custom-classes-designed-by-your-company `}
    />
  );
};

export default MyCustomButton;

This kind of code will not only save you a massive amount of time but also give you the type-safety for almost all kinds of props that you probably didn't comprehend

Type Aliases

Type aliases allow you to define a new name for a type. This can be useful when you want to use a complex type multiple times, or when you want to give a more descriptive name to a type. For example, you can define a type alias for a list of strings like this:


type StringList = string[];

You can then use the StringList type alias wherever you would use an array of strings:

const names: StringList = ['Alice', 'Bob', 'Charlie'];

This sort of code will not only make your code-base unique but also make an impression that things are written a certain way and they need to stay that way!! to anyone that tries to contribute to your repo

Mapped Types

Mapped types allow you to create a new type by applying a transformation to the properties of an existing type. For example, you can create a type that maps all the optional properties of an object to required properties like this:

type RequiredProps<T> = {
  [P in keyof T]-?: T[P];
};

You can then use the RequiredProps type to create a new type with all the optional properties of an existing type converted to required properties:

type Props = {
  name?: string;
  age?: number;
  occupation?: string;
};

const requiredProps: RequiredProps<Props> = {
  name: 'Alice',
  age: 30,
  occupation: 'Software Developer',
};

Decorators

Decorators are a way to annotate and modify classes, methods, and properties at design time. They can be used to add additional functionality to your code, such as adding a logging feature or adding a debouncing function to a method. In React, you can use decorators to add additional functionality to your components, such as connecting them to a Redux store.

To use decorators in TypeScript, you need to enable the experimentalDecorators and emitDecoratorMetadata options in your tsconfig.json file( this might change depending on when you are trying this). Then, you can define a decorator like this:

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`${key} method called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

You can then apply the decorator to a class method like this:

class MyClass {
  @log
  myMethod(arg1: string, arg2: number) {
    // method implementation
  }
}

Axios with typescript

You would not believe how many junior/senior devs alike I have seen get this thing wrong, and let's be honest Axios is the go-to network lib in your repo if you are using typescript.

Here is an example of using TypeScript with Axios to type-check the request and response data for a GET request:

import axios from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers(): Promise<User[]> {
  const response = await axios.get<User[]>('/api/users');
  return response.data;
}

In this example, the getUsers function makes a GET request to the /api/users endpoint and expects an array of User objects in the response. The axios.get method is called with the User[] type parameter, which specifies the type of the response data.

You can also use TypeScript to define the types of the Axios config and response objects. For example:

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function createUser(user: User): Promise<User> {
  const config: AxiosRequestConfig = {
    method: 'POST',
    url: '/api/users',
    data: user,
  };
  const response: AxiosResponse<User> = await axios(config);
  return response.data;
}

In this example, the createUser function makes a POST request to the /api/users endpoint with a User object as the request data. The AxiosRequestConfig type is used to define the type of the config object passed to the axios function, and the AxiosResponse type is used to define the type of the response object.

By using TypeScript with Axios, you can ensure that your request and response data are correctly typed and that you have access to the necessary Axios objects. This can help catch bugs early on and make your code more predictable and easier to understand.

Advanced Util Types

TypeScript has several advanced types that allow you to express complex type relationships in your code. Some examples of these advanced types include:

Partial: Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.

interface Todo {
  title: string;
  description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};

const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

Readonly: Constructs a type with all properties of Type set to read-only, meaning the properties of the constructed type cannot be reassigned.

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

todo.title = "Hello";
Cannot assign to 'title' because it is a read-only property.

Pick: Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

todo;

Omit:Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals).

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}

type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

todo;

const todo: TodoPreview

type TodoInfo = Omit<Todo, "completed" | "createdAt">;

const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

todoInfo;

There are many more that'll make your life so much easier as a Frontend dev refer to This doc for more details.

Use the Generics system provided by React as much as possible (especially for hooks)

Some notable examples are as follows

useState:

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

useContext:

import React, { useContext } from 'react';

interface Theme {
  backgroundColor: string;
  color: string;
}

interface ThemeContext {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
  backgroundColor: 'white',
  color: 'black'
};

const ThemeContext = React.createContext<ThemeContext>({
  theme: defaultTheme,
  toggleTheme: () => {}
});

const Example = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme.backgroundColor, color: theme.color }}>
      <p>Hello World!</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

useReducer:

import React, { useReducer } from 'react';

interface State {
  count: number;
}

type Action = 
  | { type: 'increment' }
  | { type: 'decrement' };

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Example = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};

Contrary to popular beliefs use "as" when you know more than the type-system

There will be times when you face a situation where either typescript inference is just wrong or the library you are trying to use doesn't have a robust types export, in those cases (Only in those cases) you are absolutely allowed to use the "as" keyword because you know better than typescript .

A great example would be the use of "Object.keys", by default the type of the output is an array of strings which is not wrong , but for example you need to restrict it to only the keys available in your object , in that case you have to use as, because in this case you know more than typescript.



const obj={
  key1:"some value",
  key2:"some value"

}
const keys = Object.keys(obj) as Array<keyof typeof  obj>

In this case the type of keys would be

const keys: ("key1" | "key2")[]

Feel free to follow me on other platforms as well

let's learn container queries and how to do them in tailwind.

Akashdeep Patra — Mon, 28 Nov 2022 18:43:17 +0000

Before we get started let's try to visualize the problem for which container queries were created in the first place.

For the sake of simplicity let's assume we're trying to create a Responsive Card component for our design system which will change the world in some way or end world hunger or something, I don't know ,pick your thing (lol).

This card component looks something like this on wide screens

And like this in the case of mobile screens

And the code for this is pretty straightforward, we write some media queries, and based on the screen width we just set the flex-direction from column to row (in the mobile-first approach ).

But here's the catch, one massive assumption we take in case of responsive designs is that we think in terms of components but we write the code based on screen sizes which aren't really how they work in production-grade applications right?

Your UI doesn't care about the screen size it only cares about the layout (How it looks in your component tree ).

let's consider this layout for a minute

To recreate this I'm using React with tailwind but the technology could be used with any framework of your choice.

The code for the Card component is something like




import React from 'react';

const Card = () => {
  return (
    <div className=' shadow-lg max-w-[800px] flex flex-col md:flex-row overflow-hidden  bg-white  border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700'>
      <a href='#' className=''>
        <img
          className='rounded-t-lg'
          src='https://flowbite.com/docs/images/blog/image-1.jpg'
          alt=''
        />
      </a>
      <div className='p-5'>
        <a href='#'>
          <h5 className='mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
            Noteworthy technology acquisitions 2021
          </h5>
        </a>
        <p className='mb-3 font-normal text-gray-700 dark:text-gray-400'>
          Here are the biggest enterprise technology acquisitions of 2021 so
          far, in reverse chronological order.
        </p>
        <a
          href='#'
          className='inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
        >
          Read more
          <svg
            aria-hidden='true'
            className='w-4 h-4 ml-2 -mr-1'
            fill='currentColor'
            viewBox='0 0 20 20'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              fill-rule='evenodd'
              d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
              clip-rule='evenodd'
            ></path>
          </svg>
        </a>
      </div>
    </div>
  );
};

export default Card;

And the code for the layout is like



import Card from './components/Card/Card';

function App() {
  return (
    <div className='App  p-10 flex flex-col gap-5 justify-center'>
      <Card />
      <div className='gap-5 max-w-[100vw] flex flex-col'>
        <div className='flex  flex-col md:flex-row gap-5'>
          <Card />
          <Card />
        </div>
        <div className='flex flex-col md:flex-row gap-5'>
          <Card />
          <Card />
        </div>
      </div>
    </div>
  );
}

export default App;

Now let's try to shrink the viewport very slowly (Like really slow)

If you're not cheating! at some point, your layout would look something like

And that's just ugly .......!

And the reason is although your Card is responsive it isn't aware of its surroundings and where it's being used, And that is the very reason why Container queries were introduced.

This is based on the css containment specs,
which says and I quote

CSS containment provides a way to isolate parts of a page and declare to the browser these parts are independent of the rest of the page in terms of styles and layout.

And for this example we also have a surprise, tailwind's latest version now supports container queries with a new plugin called

@tailwindcss/container-queries

Let's try to fix our code by segregating the layout into different containers

So our app's code is now like



import Card from './components/Card/Card';

function ContainerApp() {
  return (
    <div className='App  p-10 flex flex-col gap-5 justify-center'>
      <div className='@container/main'>
        <Card />
      </div>
      <div className='gap-5 max-w-[100vw] flex flex-col'>
        <div className='flex @container/grid flex-col md:flex-row gap-5'>
          <Card />
          <Card />
        </div>
        <div className='flex @container/grid flex-col md:flex-row gap-5'>
          <Card />
          <Card />
        </div>
      </div>
    </div>
  );
}

export default ContainerApp;

If you carefully notice we added two different containers having names main and grid, which will point to two different types of cards.

And yes tailwind supports named containers as well !!!

So our modified version of the card component is now



import React from 'react';

const ContainerCard = () => {
  return (
    <div className=' shadow-lg max-w-[800px] flex flex-col @[620px]/main:flex-row @[1224px]/grid:flex-row overflow-hidden  bg-white  border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700'>
      <a href='#' className=''>
        <img
          className='rounded-t-lg'
          src='https://flowbite.com/docs/images/blog/image-1.jpg'
          alt=''
        />
      </a>
      <div className='p-5'>
        <a href='#'>
          <h5 className='mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
            Noteworthy technology acquisitions 2021
          </h5>
        </a>
        <p className='mb-3 font-normal text-gray-700 dark:text-gray-400'>
          Here are the biggest enterprise technology acquisitions of 2021 so
          far, in reverse chronological order.
        </p>
        <a
          href='#'
          className='inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
        >
          Read more
          <svg
            aria-hidden='true'
            className='w-4 h-4 ml-2 -mr-1'
            fill='currentColor'
            viewBox='0 0 20 20'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              fill-rule='evenodd'
              d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
              clip-rule='evenodd'
            ></path>
          </svg>
        </a>
      </div>
    </div>
  );
};

export default ContainerCard;

As you can see at the top level we just added the classNames

@[620px]/main:flex-row : which says for Cards that are defined inside the main container , if the top level main container's width is more than 620px , the flex-direction would change to row
@[1224px]/grid:flex-row : which says for Cards that are defined inside the grid container, if the top-level grid container's width is more than 1224px, the flex-direction would change to row

and the two sets of styles are completely independent of each other

So after the changes, your layout should look something like this

this gives you the ability to make your components aware of the layout which is insane

The support for container queries is spreading like wildfire, it's gonna be the new age of writing Component-driven layouts, and container queries are gonna be the tool that would pave the way.

I'm including the working Stackblitz for reference

stackblitz.com

The code for this demo is at

Akashdeep-Patra / container-queries-demo

Feel free to follow me on other platforms as well

Generate dynamic OG images with Next.js and vercel edge functions

Akashdeep Patra — Sun, 16 Oct 2022 08:52:26 +0000

First of all for those of you who don't know let's answer the question, what are OG (Open Graph) tags?

Open graph was the brainchild of Facebook and was launched in 2010. What it does is that it promotes integration between other websites and Facebook. It allows other websites to become rich “graph” objects having the same functionality as other Facebook objects. Website masters can control the information that the website passes to Facebook via OG Meta tags. These tags are inserted in the portion of the code of the website.

After seeing the popularity of social media tags on Facebook, all the other major social media sites like Twitter, LinkedIn, and Google+, started to recognize meta OG tags. To harness the power of Facebook Graph Meta tags, learning this skill is vital for webmasters. Using these tags can have a huge impact on click-through rates and conversion. Social media sites become the major driver of website traffic. Adding OG tags will not affect the on-page SEO, but it will influence the performance on social media.
Source

Look at the Open Graph protocol for more details.

Why are Open Graph tags important?

People gonna more likely see and click shared content with optimized OG tags, which means more social media traffic to your website.
Check out this website for more insights on the stats.

There are some reasons for this:

They make content more eye-catching in social media feeds.
They tell people what the content is about at a glance.
They help Social Media giants like Facebook, and Twitter .. understand what the content is about, which can help increase your brand visibility through search.

So basically Powerful OG tags are like the Holy grail for your Marketing Manager.

Now here's the thing since these are part of the meta tags, and The image shown in the tags are ... well! images, making them dynamic is a bit tricky. generating images isn't a menial task that just every web server can do ... it's resource intensive, time-consuming and all the other nightmares. and making it part of your dynamic web app is another ball game altogether. So what's new?
well, @vercel/og is, this library lets you build image content from HTML/React that too insanely fast, like really fast . and you can pair this with any edge network like AWS Lambda on the edge, Cloudflare workers, etc to make it even faster.

Right now this has first-class integration with Next.js and Vercel Edge functions (Which is obvious)

Vercel OG also supports the following features:

Support for basic CSS layout, styling, and typography
Support for use in any framework or frontend application
Support for downloading font and emoji subsets from Google Fonts and other CDNs

Vercel OG automatically adds the correct Cache-Control headers to ensure the image is cached at the Edge after it’s been generated.

'content-type': 'image/png'
'cache-control': 'public, immutable, no-transform, max-age=31536000'

and since the library uses Satori under the hood, it can run in virtually any environment [modern browsers, Node.js (any node compatible runtime), and Web Workers ] using webassembly.

For those utility-first folks out there it supports Tailwind as well.

For today's Demo, I'm using a Next.js application but you can give it a try with anything else.

Creating the serverless endpoint to generate my OG image

I'm creating an API route in my next app named /api/og

// /pages/api/og.tsx

import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';

export const config = {
  runtime: 'experimental-edge',
};

const  OgImageHandler = async (req: NextRequest)=> {
    const { searchParams } = new URL(req.url);
    const title = searchParams.get('title')||'Mate'
    // const data = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    // const jsonData = await data.json()
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello there! {title}
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}

export default OgImageHandler;

I know this is a very basic example that just takes the title query param from the URL and displays it, but this is just for learning purposes, you can go crazy with the HTML and css later.
Do keep in mind to export the config with experimental-edge runtime to make sure this runs on the edge.

Right now if I run my application and visit the route
http://localhost:3000/api/og?title=Akashdeep

I get this

without any delay !! that's insane (If you inspect the element it's an image and not HTML).

Now to demo how the dynamic OG would work for your web pages let's build a page for our app with the route /og-image

import type { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useRouter } from 'next/router'
import styles from '../styles/Home.module.css'

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props:{
      title: context.query?.title??' Mate'
    }
  }
}
const Home: NextPage = ({title}:InferGetServerSidePropsType<typeof getServerSideProps>) => {

  return (
    <div className={styles.container}>
      <Head>
        <title>Hello There! {title} </title>
        <meta property="og:image" content={`https://next-dynamic-og-image.vercel.app/api/og?title=${title}`} />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home

Now if you look at my OG tag , I've added the image URL as a deployed version, because remember your OG image source needs to be a web service that's deployed somewhere and not localhost , so I first deployed my initial code to vercel to get the production endpoint https://next-dynamic-og-image.vercel.app/

Now this page is gonna be SSR driven since I want to make sure the title is available before my page component is executed [Don't be confused that's just how Next.js works, it first runs the page at build time without any client info and after hydration, it executes the client code on the browser, we'll talk about it on another day ]

and now after I deploy my page I can check this page with any title query param and it'll instantly display my dynamic Image in the OG information

Try it out yourself
https://next-dynamic-og-image.vercel.app/og-image?title=AnyText

I'm using https://smallseotools.com/open-graph/ for testing the OG tags

Beware this still has some limitations and is still an experimental build try to read the usage doc for more details.

The code for this demo is at

https://github.com/Akashdeep-Patra/next-dynamic-og-image

Feel free to follow me on other platforms as well

Let's use proxies to make React state mutable.

Akashdeep Patra — Mon, 05 Sep 2022 06:42:30 +0000

Introduction

If you are building apps with react or redux for a long time you probably have seen some block of code like this



case 'some_case':
              return {
                ...state,
                  keyOne:{
                    ...state.keyOne,
                    someProp: payload
                  }
              }

And there's nothing uglier than a bunch of redundant lines of code so that your state can understand you're doing something with it. And that was one of the most fundamental Architectural flaws/questions React team faced after the introduction of frameworks like Vue, svelte, where every state you create is immutable by nature and listens to the state change by default even if you mutate the nested data.
and even libraries like Redux toolkit uses immer under the hood to make the developer experience more seamless.

Why does the scenario happen?

Well in React all states are immutable by nature, which means whenever you need to change state the data needs to be copied to a new memory address, or in other terms, some cost needs to be there, and this is not a problem for any primitive data types like strings or numbers. but because of the very nature of JS objects and how they are maintained in memory, changing one property inside the object doesn't change the top-level reference of that object, it only mutates it. and that's a problem for the setState method and useState hook. because unless they get a new reference they won't be able to know if the state has been mutated (because by default React uses shallow comparison )

-- one question you might have is: "why go for shallow compare at all?" well let's think about the object as a tree data structure and each property is a node in the tree now what's the time complexity of a deep compare in this case? O(n) [n being the number of nodes in the tree ], but the actual updated data would most likely be in O(1) so if you think about it, a deep comparison would be really expensive most of the time and that's why React's core team probably decided to go with shallow compare as a default choice, but you could override that behavior by using shouldComponentUpdate() method in Class-based components.

and that means we probably can somehow do better than this

and that's how Immer
was introduced, and not only Immer but most of the modern UI frameworks also go for a smiler solution to handle immutable states in a manner that seems mutable.

This approach follows a very ancient but powerful software design pattern called Proxy

On a very high-level proxy is an object that behaves like an interaction layer between the usage and the actual object from which it was created
Source : Patterns.dev

And this alone gives us the superpower to control how the updates happen to our data and subscribe to get/set events as well. for this very reason, a lot of the modern UI frameworks use Proxies under the hood.

and today let's try to re-create a very popular hook useImmer
that uses Immer.js to use the proxy pattern to handle state updates

Scope of this custom hook

[we are gonna be using typescript for this solution but it would be similar in plain javascript as well ]




import useCustomImmer from "./hooks/useCustomImmer";
import { useEffect } from "react";
export default function App() {
  const [value, setValue] = useCustomImmer({
    count: 0,
    name: {
      firstName: "Akashdeep",
      lastName: "Patra",
      count: 2,
      arr: [1, 2, 3]
    }
  });

  const handleClick = () => {
    setValue((prev) => {
      prev.count += 1;
      prev.name.count += 1;
      prev.name.arr.push(99);
    });
  };
  useEffect(() => {
    console.log("render");
  });
  return (
    <div className="App">
      <button onClick={handleClick}>Click me </button>
      <br />
      <span>{JSON.stringify(value)}</span>
    </div>
  );
}

For the sake of this example, we have a state that has some nested data and in the handle click method, we are mutating the properties provided by our setter function in the useCustomImmer hook. [This is supposed to trigger a re-render with the updated state ]

now let's look at the solution



export default function useCustomImmer<StateType>(
  initialValue: StateType
): [value: StateType, setter: (func: (value: StateType) => void) => void] {
  const [value, setValue] = useState<StateType>(initialValue);

const listener =useCallback(debounce((target:Target) => {
    setValue((prevValue)=>({...updateNestedValue(prevValue,target.path,target.value)}))
  },100),[])

  // @ts-ignore
  const valueProxy = useMemo<StateType>(
    () => new Proxy(value, createHandler([], listener)),
    [value, listener]
  );

  const setterFunction = (func: (value: StateType) => void) => {
    func?.(valueProxy);
  };

  return [value, setterFunction];
}

The hook signature would be similar to useState, where it returns an array where the first value is the state itself and the 2nd value is the setter function, this function would take a callback that has an argument of the most updated state (similar to how useState's functional approach goes but here the argument state would not just be a normal object, instead it'll be a proxy of the original state )

we will create a Proxy with the state and keep it updated with the state changes.

Now here comes the problem, the listener we are attaching with the Proxy to monitor get/set events for properties on the state object only listens for top-level properties by default and they do not apply for nested properties [Check this link for a more detailed explanation of the API ].

To be able to solve this we need to recursively attach a handler to our object, and for that, I have written a custom createHandler method that does the same



const createHandler = <T>(path: string[] = [],listener:(args:Target)=>void) => ({
  get: (target: T, key: keyof T): any => {
    if (typeof target[key] === 'object' && target[key] != null )
      return new Proxy(
        target[key],
        createHandler<any>([...path, key as string],listener)
      );
    return target[key];
  },
  set: (target: T, key: keyof T, value: any,newValue:any) => {
    console.log(`Setting ${[...path, key]} to: `, value);
    if(Array.isArray(target)){
      listener?.({
        path:[...path],
        value: newValue
      })
    }else{
    listener?.({
      path:[...path,key as string],
      value
    })
  }
    target[key] = value;
    return true;
  },
});

this method takes a string array and the listener as arguments and returns an object with get/set properties [You can extend this further to handle more cases ]
Now let's break this down !!!!!

in the get property, it takes the target and the key as an argument, and keep in mind this target is the nearest root from the property it's being accessed so no matter how much deep you go into a nested object you'll only get the nearest parent reference.
here if the expected property is of type object and not null we would create a new Proxy of that object with a recursive call and return that Proxy object instead of the actual object when the user tries to access a nested property and in this listener, we also add the key so that we can track the path when we eventually call the listener.

This way we don't create multiple nested proxies every time a state update needs to happen instead we would create proxies only when someone tries to access these properties, and this would be much faster than going over all the nodes in that object since we know the path, to begin with (this means travel depth of O(log(n)) base
n)
.

In the set property to handle an edge case we first check if the property is an array (because when we do any array operation like push and pop apart from the item itself 'length' property is also changed and we could handle this edge case either in our handler or when we update the state, I choose to do that here, Do keep in mind there will be other data structures in javascript that will probably have their edge case. I created a very simple hook to demonstrate the overall architecture).
and at each time we set the value we also call the listener callback with a target object that would have the value and the path of the property that needs to be updated.

Now we also need a function that takes the path array and the value to update our source object, which is easy to come up with




const updateNestedValue =<StateType>(object:StateType,path:string[],value:any):StateType=>{
  const keys = path
  let refernce: any = object
  for(let i=0;i<keys.length-1;i++){
    if(keys[i] in refernce){
      refernce = refernce[keys[i]] 
    }     
  }
  if(keys[keys.length-1] in refernce){
    refernce[keys[keys.length-1]] = value
  }
  return object
}

And in our listener callback, we just update the old state and call the setValue method with the updated value




 const listener =useCallback(debounce((target:Target) => {
    setValue((prevValue)=>({...updateNestedValue(prevValue,target.path,target.value)}))
  },100),[])

Notice I have used a debounce here, because as I said there are data structures like an array that have multiple properties changing with the proxy, but we only want to update the state once,(You can assume this is more of a batching technique )

Here is a working Sandbox for you guys, but do keep in mind this hook is in no way production ready or will be in the future (nor does it handle any edge case ), Immer.js has a very extensible and battle-tested design , this post is just a way to appreciate the way things work under the hood. And the reason is that there are a lot of data types (Maps, Set ...) supported by native javascript for which implementing the proxy handler would be a chore (Honestly that's too much work for me right now ), if you think you can extend the current version and handle those types i'm happy review any open PRs.
but if you are planning for only JSON serializable state then this might just work for you .

And the Github link

https://github.com/Akashdeep-Patra/use-custom-immer

Feel free to follow me on other platforms as well

Custom React Hook to cancel network calls, and then synchronize API calls with component life cycle

Akashdeep Patra — Tue, 16 Aug 2022 06:25:00 +0000

First let's talk about the problem we're trying to solve here

If you're working with React it's almost impossible that you never saw this error log in your browser console



Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount
method.
    in TextLayerInternal (created by Context.Consumer)
    in TextLayer (created by PageInternal) index.js:1446
d/console[e]

not gonna lie this is probably one of the most painful things to get your head around after you have gained a good understanding of how component lifecycle works. This error basically means you are using an asynchronous block of code that has some state mutation inside it (By state mutation I mean setState ) thus resulting in a memory leak

Although in most cases it's harmless, there's still a possibility of un-optimized heap usage, chances of your code breaking, and all the other good stuff that goes around with it.

Now let's talk Solutions

well, there are a couple of ways we can tackle this problem, one of the most popular solutions is to use any logic that checks if the component is still mounted in the component tree and make any state change operation only then and you'd think that would just solve your problems right? right ??
well.... kinda, I mean let's take a step back and think about a very famous hook useIsMounted

now Think about a scene where you are making an API call on the mount of a component and using this hook you'll change the state only if it's still mounted



  const isMounted = useIsMounted();
  const [value, setValue] = useState();

  useEffect(() => {
    fetch('some resource url')
      .then((data) => {
        return data.json();
      })
      .then((data) => {
        if (isMounted()) {
          setValue(data);
        }
      });
  }, [input]);

Looks like a perfectly okay piece of code that totally doesn't throw any errors right? well yeah I mean this works!!

But

Aren't you still making the fetch call?
Aren't you still fulfilling the promise? what you clearly don't need to do if the component is already unmounted right?

And depending on how API-driven your application is avoiding to fulfill all the network requests might benefit you in ways that you never considered

So how can we do that? well we can just cancel the ongoing request and as it turns out, modern browsers have had this feature for quite some time

The AbortController Interface allows you to, ya know just abort any web request.

As of now browser's fetch API and Axios officially supports AbortControllers

Now we can just be done with this here, but just to make it look a little bit cooler let's make a custom hook out of this and look at a live example

useAbortedEffect hook to cancel any network requests when the component unmounts



import { useEffect } from 'react';

const useAbortedEffect = (
  effect: (signal: AbortSignal) => Function | void,
  dependencies: Array<any>
) => {
  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    const cleanupEffect = effect(signal);

    return () => {
      if (cleanupEffect) {
        cleanupEffect();
      }
      abortController.abort();
    };
  }, [...dependencies]);
};

export default useAbortedEffect;

Now let's break things down to understand what's going on. our custom effect takes a callback function that accepts an AbortSignal param, and a dependency array as an argument just like any other effect hook, inside our useEffect we instantiate an AbortController and pass the signal into our effect callback so that any network request we want to make should be able to get this signal. this would help us to control the execution cycle of all the APIs that will be declared in our effect callback. and in the unmount callback of our useEffect we just abort the controller and any network call that is going on in our effect will be canceled from the browser

Let's take an example to appreciate this hook

In this example, we'll be creating 3 nested routes using React router's Outlet API to make each page mount and re-mount consecutively so that we can monitor the network tab



import { Outlet, useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  return (
    <div>
      Home Page
      <div className="column">
        <button onClick={() => navigate('/first')}>First</button>
        <button onClick={() => navigate('/second')}>Second</button>
        <button onClick={() => navigate('/third')}>Third</button>
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

In each of our pages first, second & third we will use our custom hook to fire an API and pass the signal argument to the signal properties of fetch and Axios in order to control the request (remember this step is mandatory because any request that doesn't have this signal would not be canceled)

The First page component would look something like this



  //example with axios
  useAbortedEffect(
    (signal) => {
      axios
        .get('https://jsonplaceholder.typicode.com/posts', {
          signal
        })
        .then((data) => {
          console.log('First API call');
        })
        .catch((e: any) => {
          if (e.name === 'CanceledError') {
            console.log('First API aborted');
          }
        });
    },
    []
  );

return (
    <div>
      First Page
      <div
        style={{
          display: 'flex',
          gap: '10px',
          marginTop: '20px'
        }}>
        <button onClick={() => setCount(count + 1)}>Click </button>
        <span>Count : {count}</span>
      </div>
    </div>
  );

Now since I'm using a JSON placeholder as an endpoint suffice to say noticing any pending state of the network call would be tricky so let's simulate a slower network
In the dev-tool open up the network tab and select Slow 3G
from the networks dropdown (I'm using Chrome)

Now after starting the application start clicking on the First, Second & third link in the exact order and look at the network tab

and since we had used console.log at each step in our custom effect let's look at the console too

As you can see in after consecutively mounting and remounting the First and Second pages all the pending requests got canceled because of the Abort signal and we can see the exact console logs as well. This would work similarly to debouncing in javascript but instead of debouncing with timers during the event loop, we'll be debouncing network requests in the browser itself.

What you can achieve with this hook?

Well depending on how you have architected your application and how much API-driven it is , potentially you could

Avoid memory leaks in the components
Make Atomic API transactions with respect to your Component
Make less number of API calls altogether.

Github repo for the example

Do comment on the article so that I can make this better and improve any mistakes I have made, thanks in advance.

Feel free to follow me on other platforms as well

Why you should know about git bisect as a software engineer

Akashdeep Patra — Fri, 05 Aug 2022 08:45:38 +0000

Git is probably one of the most important and revolutionary open source projects to be ever created in the history of software development. and over the years it has added awesome tools to make life easier for developers who just don't exactly know what they're doing (count me in). one of those many awesome tools is git bisect

What is git bisect you ask?

well if you are coming from a software engineering background you might have heard about a searching algorithm called binary search
, the very core of this searching algorithm dictates that if there is progressive order maintained in a sequence of numbers and if you want to search for a specific entry you can use this iterative approach to cut the search space in half at each iteration, for example, if you know a point "A" and another point "B" and these two have a progressive sequence in between at each iteration you could cut the search space in half.
Now git bisect uses this same algorithm but just for finding the things we have messed up in our codebase.
it assumes you have faced some bug in your code that is caused by some other commit that you have no idea about, but you're sure it wasn't there, and you probably know the commit when everything was working just fine (you know before ? before shit got real?). now you have to figure out after which commit things hit the fan. git bisect just does this using a binary search between the good commit and the current one and at each iteration, it gives a middle ground to start with

we'll do this using an example

In this demo project, we have made 5 different commits with some changes to demonstrate a wide space to use bisect

First we assume the current head is the bad commit where we are facing the issue for sure, so just log the git history to find a commit where we are certain that everything works fine (probably the last production build where everything worked), so open the terminal and hit: git log

commit ec802e7ad3547eab0475a95ea8165ad39a096ed6 (HEAD -> master)
Author: Akashdeep <adeep8961@gmail.com>
Date:   Fri Aug 5 00:04:49 2022 +0530

    feat: commit 5

commit aef6d0f4f4a8c9404a07fbb07805c14afb1913e4
Author: Akashdeep <adeep8961@gmail.com>
Date:   Fri Aug 5 00:04:36 2022 +0530

    feat: commit 4

commit 8dae945d335e488f38faa7bb2d32f963897a349c
Author: Akashdeep <adeep8961@gmail.com>
Date:   Fri Aug 5 00:04:23 2022 +0530

    feat: commit 3

commit 114b05be372ddb6e6674fe3c3270161ef549a4c4
Author: Akashdeep <adeep8961@gmail.com>
Date:   Fri Aug 5 00:04:11 2022 +0530

    feat: commit 2

commit 53687b93af435041d1f2b1895839564e6c1f97cd
Author: Akashdeep <adeep8961@gmail.com>
Date:   Fri Aug 5 00:03:53 2022 +0530

    feat: commit 1

commit 7e33d507ce19a4eba677ecadb9f74ea4f3b3d1f6
Author: Akashdeep <adeep8961@gmail.com>
Date:   Thu Aug 4 23:58:25 2022 +0530

    init: first commit

for this demo let's assume commit number 1 is the one that is safe for sure so just copy the commit hash for commit 1

Starting the bisect session and mark the initial commit points

you can probably see the bisect session indicator in the terminal
now let's mark the current head/commit as bad

git bisect bad

after this, you need to mark the commit id you copied earlier as a good commit to doing the first bisection

 git bisect good 53687b93af435041d1f2b1895839564e6c1f97cd

after you mark the first search space your bisection starts

after the bisection, git automatically checks out with a commit in the exact middle of the space for you to test, now after we test the code for this commit and decide this still is a bad commit we can mark this commit as the new bad commit and continue with the bisect process.
for the demo, let's mark this as a bad commit

git bisect bad

now here git checks out to commit 2, and we decide this is a working code commit (we can continue this process to find exactly where the last screwup happened).

git bisect good

now as you can see after the bisect session ended we have all the history and at which commit our code did exactly break.
now just copy the commit hash for commit 3(bad commit) & we can check the changes for this commit using

git show 8dae945d335e488f38faa7bb2d32f963897a349c

and if we decide this change is isolated and could be simply reverted. now first end the session of bisect and run

git bisect reset
git revert 8dae945d335e488f38faa7bb2d32f963897a349c

and we have successfully debugged a production-grade issue (hell yeah !!!!!).

Do comment on the post to add any more points or to imrove the overall quality of it.

Feel free to follow me on other platforms as well

Create a React virtualization/windowing component from scratch

Akashdeep Patra — Sat, 23 Apr 2022 12:20:00 +0000

Not long ago, I was part of a development team that was creating a SAAS application that had to render a lot of data (The point of that particular module was to essentially mimic a social media). As each of the items was pretty heavy React components themselves, needless to say, we had to use render optimization techniques to improve the UI performance and Virtualization is one of the most used techniques throughout the industry.
Today, I’ll explain the component I created back then in order to understand the nitty-gritty of the libraries used in most projects. This is a pretty advanced demo since I went over the usual implementation and added some enhancements of my own. and I’ll guide you through all the steps so you’ll get a solid understanding of the trickery behind this very performant solution. Rendering countless items with the breeze.

I know what you're thinking !! why re-invent (react-virtualized) the wheel, if there is already a battle-tested solution why even bother to create your own from scratch? well, the thing is most people don't even know how things work behind the scenes and that's dangerous!! for your code-base and for your knowledge as well. Not only will you be able to customize every single aspect of the final component, but you’ll also understand the existing limitations and what you could do to improve them, which will help you to become the best DEV you want to be.
Before we get started there is some stuff you need to know first.

Typescript/Javascript (I prefer the former)
React (You can definitely choose any other UI client, for this demo I'm going for React)
Basics of how the browser works

Virtualization

solely in the context of Ui --> Virtualization means maintaining/holding some data that is not entirely present in the rendered canvas (In the case of the web that is DOM), in fact the entier initial idea behind react's core architecture was based on Virtual dom which just iterates the basic idea behind virtualization. The concept of Virtualized list isn't new to the world in fact Native platforms like Android/IOS and desktop apps have been doing this out of the box for quite some time, and though there is no Browser-first API for this, the technique is pretty well-known --> when you have an abnormally large list of components to be rendered instead of mounting all the elements to the DOM (which will just create a truck-load of resource-overhead ) we can just render out the few items that are expected to be in the view-port of the respective container at that point of time .. That's it, that's the big secret , No! I'm not kidding its that simple, and once you know how exactly it'll be apparent to you.

Component structure

Let's define our component schema so that we can establish what we are trying to achieve



export interface WindowProps {
  rowHeight: number;
  children: Array<JSX.Element>;
  gap?: number;
  isVirtualizationEnabled?: boolean;
}

Here as enhancement, we would not be passing container width as a prop, as an intelligent component it should be able to deduce the container width on its own (One of the reasons why I wanted to build my own)
and as react children we will only accept a list of js elements only, the typescript restriction isn't that specific but you can go a few steps deeper and only accept a particular list having a pre-defined prop structure (That's a topic for another time). needless to say, all the children need to be homogeneous components having similar structure

the gap indicates the gap visible between two elements, we need to preset the rowHeight since our component needs to have a fixed row height ( We can however extract this from children but that's just unnecessary because making it dynamic would just create calculation overhead which is a different problem altogether), isVirtualizationEnabled is just an additional prop to demonstrate the performance benefit

Implementation details



 const [containerRef, { height: containerHeight }] = useElementSize<
    HTMLUListElement
  >();
  const [scrollPosition, setScrollPosition] = React.useState(0);

for sake of utility I'm using a custom hook useElementSize
to keep track of the container of our Window component
( You can create one yourself, go have a try at it )
and another state scrollPosition to maintain the top scroll height of the container while scrolling.



  const onScroll = React.useMemo(
    () =>
      throttle(
        function (e: any) {
          setScrollPosition(e.target.scrollTop);
        },
        50,
        { leading: false }
      ),
    []
  );

this is the callback that will maintain our scrolled position in the container , and here I have used the throttle from lodash to optimize the scroll events further since the onScroll events are fired multiple times due to how the browser handles DOM events ( A very good use-case of why we use Throttling ), I'm updating the scroll position after every 50ms.

Now let's talk about the big fish ( How to actually render the children )



// get the children to be renderd
  const visibleChildren = React.useMemo(() => {
    if (!isVirtualizationEnabled)
      return children.map((child, index) =>
        React.cloneElement(child, {
          style: {
            position: "absolute",
            top: index * rowHeight + index * gap,
            height: rowHeight,
            left: 0,
            right: 0,
            lineHeight: `${rowHeight}px`
          }
        })
      );
    const startIndex = Math.max(
      Math.floor(scrollPosition / rowHeight) - bufferedItems,
      0
    );
    const endIndex = Math.min(
      Math.ceil((scrollPosition + containerHeight) / rowHeight - 1) +
        bufferedItems,
      children.length - 1
    );

    return children.slice(startIndex, endIndex + 1).map((child, index) =>
      React.cloneElement(child, {
        style: {
          position: "absolute",
          top: (startIndex + index) * rowHeight + index * gap,
          height: rowHeight,
          left: 0,
          right: 0,
          lineHeight: `${rowHeight}px`
        }
      })
    );
  }, [
    children,
    containerHeight,
    rowHeight,
    scrollPosition,
    gap,
    isVirtualizationEnabled
  ]);

Here we need to calculate the start index and ending index from the slice of children that we want to render and clone these from props with mentioned properties each child will be rendered with an offset from the top of the container which we can easily calculate with the scroll position and row height and the index of a child, observe that we have kept the children position absolute, it's because normal display : flex in the container won't work because how flex boxes work in the DOM, it'll fire additional scroll events after the initial render which in turn will create an infinite render-loop, that is why we need to fix the position of each child in the container with gap and offset, and I have used useMemo just to control the render cycle.
( I have used the cloneElement method from React so that the rendering of the actual elements is de-coupled from our Window component, there are multiple ways to handle this, for example, you could use the Render-props pattern to solve this as well )



return (
    <ul
      onScroll={onScroll}
      style={{
        overflowY: "scroll",
        position: "relative"
      }}
      ref={containerRef}
      className="container"
    >
      {visibleChildren}
    </ul>
  );

don't forget to make the container position : relative otherwise it'll just be a mess out there

Performance metrics

For observing the performance gain I have used react-fps, which will monitor the refresh rate of the screen, and added a toggle to enable/disable the virtualization in the component

Hope this helps you clear out the details in-between. and feel free to comment possible improvements that you can think of which will make this more seamless and adaptable to more scenarios.

Here is the sandbox link for the code

https://codesandbox.io/embed/practical-haze-bxfqe9?fontsize=14&hidenavigation=1&theme=dark

And the Github link

https://github.com/Akashdeep-Patra/React-virtualization

Feel free to follow me on other platforms as well

How to manage multiple GitHub accounts on your machine using ssh

Akashdeep Patra — Sun, 17 Apr 2022 07:43:08 +0000

Like myself, if you are contributing professionally, chances are that you also have encountered this conundrum more than once, where you are using a single machine to work on your professional projects and personal ones at the same time but you have two different GitHub accounts for the same. And by default GitHub doesn't have a robust solution to handle this, (well not as of now at least). This is my way of getting over the problem and a way where you can save logging in and out multiple times (especially after GitHub mandates 2-factor auth).ps: Follow the below steps in the same order

Please note that I'm using a mac but for your respective systems the steps are almost the same especially if you have WSL on your Windows device

Create multiple ssh keys

Since Github has officially migrated to ssh as the desired auth system, we'll first need to create two different ssh keys(Refer to this link) with the personal and work email with appropriate passwords (I'm using RSA as the preferred algorithm but you can definitely choose anything check this link for more info).

ssh-keygen -t rsa -C "your_own_email@yopmail.com

when prompted please name the key with something significant, in my case, I named it id_self

ssh-keygen -t rsa -C "your_work_email@yopmail.com

in case of the company email name this differently than the personal account, this is necessary
in my case I named it id_work

Add the keys to your ssh client

Now both of my keys are located in the ssh directory
~/.ssh/id_self
~/.ssh/id_work
now let's add both of the keys to the ssh client

$ ssh-add ~/.ssh/id_self

$ ssh-add ~/.ssh/id_work

and make sure both the keys are in your client list using

$ ssh-add -l

Note: Each of them will prompt for the password

Modify the ssh config

This config file will contain additional data that your ssh client can use, if you don't see a config file in your ssh directory please create one using

cd ~/.ssh/
$ touch config

and open it inside any text editor.
Now add the following details to your config

#work account
Host github.com-work
    HostName github.com
    User git
    AddKeysToAgent yes
    UseKeychain yes
    IdentityFile ~/.ssh/id_work
#personal account
Host github.com-self
    HostName github.com
    User git
    AddKeysToAgent yes
    UseKeychain yes
    IdentityFile ~/.ssh/id_self

Note: here as you can see in place of source host instead of GitHub I have added suffixes as "-work" & "-self", This doesn't necessarily have to be like this, just add any unique string for Identification

Configuration after cloning or creating any repo

After initializing or cloning any repo just open your .git/config file and change the origin or any remote URL from github.com to your target hostname. For example, I am working on a project for my workplace and the ssh URL for that is
git@github.com:my-company/work-project.git, now I changed the remote URL either directly opening the .git/config file or using git remote set-url command, now my changed URL is
git@github.com-work:my-company/work-project.git, remember we added a custom hostname in the ssh config earlier ? that is used here as well, both these proxy URLs needs to be same for the ssh proxy to work, (You might need to enter the password once after you tried connecting to the remote repo)

Do the same thing for your personal projects as well, and you're good to go.

DEV Community: Akashdeep Patra

Custom React hook to sync state with the URL

Why useParamState?

Prerequisites

Implementing useParamState

Step 1: Setting Up the Project

Step 2: The useParamState Hook

How It Works

Initialization:

State Update:

Type Support:

Step 3: Using useParamState

Step 4: Testing the Hook

Conclusion

10 Tips for Mastering TypeScript Generics

Contents

1. Leveraging Conditional Types

2. Using Type Inference in Generics

3. Mapped Types with Generics

4. Utility Types and Generics

5. Generic Constraints

6. Default Generic Types

7. Advanced Pattern Matching with Conditional Types

8. Type Guards and Differentiating Types

9. Combining Generics with Enums for Type Safety

10. Generic Type Aliases

Conclusion

Things about typescript you should know as a pro React dev

Types

Interfaces

Generics

Extending interfaces when needed

Type Aliases

Mapped Types

Decorators

Axios with typescript

Advanced Util Types

Use the Generics system provided by React as much as possible (especially for hooks)

Contrary to popular beliefs use "as" when you know more than the type-system

let's learn container queries and how to do them in tailwind.

Before we get started let's try to visualize the problem for which container queries were created in the first place.

And yes tailwind supports named containers as well !!!

The code for this demo is at

Akashdeep-Patra / container-queries-demo

Generate dynamic OG images with Next.js and vercel edge functions

First of all for those of you who don't know let's answer the question, what are OG (Open Graph) tags?

Why are Open Graph tags important?

Creating the serverless endpoint to generate my OG image

Beware this still has some limitations and is still an experimental build try to read the usage doc for more details.

The code for this demo is at

Let's use proxies to make React state mutable.

Introduction

Why does the scenario happen?

Scope of this custom hook

And the Github link

Custom React Hook to cancel network calls, and then synchronize API calls with component life cycle

First let's talk about the problem we're trying to solve here

Now let's talk Solutions

useAbortedEffect hook to cancel any network requests when the component unmounts

What you can achieve with this hook?

Github repo for the example

Why you should know about git bisect as a software engineer

What is git bisect you ask?

we'll do this using an example

Create a React virtualization/windowing component from scratch

Virtualization

Component structure

Implementation details

Performance metrics

Hope this helps you clear out the details in-between. and feel free to comment possible improvements that you can think of which will make this more seamless and adaptable to more scenarios.

Here is the sandbox link for the code

And the Github link

How to manage multiple GitHub accounts on your machine using ssh

Create multiple ssh keys

Add the keys to your ssh client

Modify the ssh config

Configuration after cloning or creating any repo

Why `useParamState`?

Implementing `useParamState`