Forem: Ankur Kedia

3 CSS Features That I'm Hyped About in 2024

Ankur Kedia — Tue, 01 Oct 2024 08:07:58 +0000

CSS is often regarded as one of the most challenging areas to master in Frontend space. Its versatility allows you to achieve almost anything with enough creativity, yet even after nearly 30 years, some fundamental features have been missing. The new updates in 2024 bring a lot of goodies that promise to simplify common challenges, such as building popovers, managing layouts, and adapting to themes. Below are some of the most exciting new CSS features I am particularly enthusiastic about and have already started to incorporate into my daily work.

The Popover API + Anchor Positioning

One of the most anticipated additions is the Popover API, which introduces native support for frequently used elements such as tooltips, dropdowns, dialogs and a lot of things that have only been possible with just libraries or custom implementation. Either way, it added a lot of Javascript to achieve this. With this API, the process becomes simpler and more consistent across browsers without manual handling of every aspect.

I still remember the pain of creating a dynamically positioned tooltip for my single-page app. The combination of Popover API + Anchor Positioning (also new) opens up many possibilities for the new elements common to modern web app development but has been possible only with various hacks and workarounds. This will also reduce the need for heavy custom JavaScript, improving performance, browser compatibility and maintainability. You can create a simple popover with just a few lines of code:

These APIs are designed to improve user interaction and accessibility, automatically handling keyboard focus and screen reader behaviour.

Align Content for block layout

Another improvement (also, a long-awaited one) is the ability to align content within block layouts without needing to rely on Flexbox or Grid. Flexbox and Grid are our usual go-to for managing complex layouts. However, it always seemed like an overkill for simpler use cases—like centering a div or aligning text inside a block element.

I know this seems like a small thing but it brings me a lot of satisfaction to finally see this happen. Just imagine explaining "how to center a div?" to a newbie, you'll know what I mean.

This is how you can do it now:

The `:has()` pseudo-class

This new pseudo-class eliminates workarounds and helps create a simpler dynamic, context-aware style. It helps select elements based on the element's children, parents, or specific state conditions, which has long been a limitation in CSS.

For instance, you want to style a div differently if it contains a button:

div:has(button) {
  background-color: lightblue;
}

Or apply styles to form fields when they are not empty

input:has(:not(:placeholder-shown)) {
  border-color: lightgreen;
}

Combining :has() with the :is() pseudo-class makes it even more powerful and adds concise and flexible specificity for the applied styles.
For example, this style will apply to a container containing either a button or a submit input.

.container:has(:is(button, input[type="submit"])) {
  border: 2px solid gray;
}

Benefits:

Cleaner Stylesheets: Reduce the need for complex, nested selectors.
Improved Performance: Decrease reliance on JavaScript for DOM manipulation.
Enhanced Maintainability: Create more logical and easier-to-understand CSS structures.
Greater Flexibility: Adapt styles dynamically based on content without changing HTML.

Bonus: light-dark()

Although not as revolutionary as the previous features, this will feel good if you have spent time managing multiple themes in your component libraries or apps. As modern websites increasingly embrace the dark side, managing theme-based styles can become tedious. Traditionally, you would use JavaScript or CSS media queries to detect the user's theme preference and then add separate styles for different conditions. With the new light-dark function, it's now easier to apply conditional styles based on the user’s system-wide preferences.
For example, if you want to apply different colors for dark and light modes, you can now do it like this:

.element {
  background-color: light-dark(white, black);
  color: light-dark(darkgray, lightgray);
}

Conclusion

There is a lot of amazing work and energy in the CSS and webdev space right now which makes me excited for the upcoming stuff. While these are the features I loved the most, there are a lot of new and exciting features. I am waiting for that "aha" moment when I apply these particular features to solve problems more efficiently in my product features because ultimately these are all just tools.

Curious case of Drag and Drop

Ankur Kedia — Tue, 30 Jan 2024 08:18:33 +0000

Introduction

Drag and drop may appear as a simple user interaction where you pick an item up and place it elsewhere, similar to organizing items on a Trello board or any Kanban-style interface where cards or information can be effortlessly rearranged with a click and drag.

However, this whole process hides a lot of complexity behind it. Starting with moving data between different parts, and getting the correct drop position. This challenge escalates when you have a nested layer of elements that can move across multiple levels.

To implement this, we don’t have to reinvent the wheel here, we have several libraries at our disposal. The most popular ones are:

react-beautiful-dnd stands out as the most commonly used, it provides a clean and high-level API with a lot of abstraction. It was developed by Atlassian.
react-dnd is quite powerful but a bit complex and requires some getting used to.
dnd-kit is one of the newest ones, it is modern, light-weight, and performant.

Problem

We, at epilot have relied on react-beautiful-dnd extensively and in different parts of our app.

However, we hit some roadblocks in certain contexts while trying some complex scenarios where it was not accurately predicting the drop location of the element. Here is one example.

We devised several hacks for specific edge cases but they fell short of solving all of the issues. The code to move element data based on drop position was turning into Spaghetti code because of those edge cases. The discontinuation of maintenance and support of react-beautiful-dnd was also not helping its case to keep using it.

Solution

Finally, we decided to explore alternative libraries that could solve our problems with a more explicit, intuitive, and simpler API. After evaluating several options, we settled with dnd-kit as it provided an explicit and simple API. An added benefit was that it also provides hooks API which is missing in some of the older libraries.

Key advantages of dnd-kit include:

Zero dependencies
Optimized Performance
Accessibility
Support for Multiple Input Methods
Comprehensive documentation and examples

Show me some code

Here are the codes for a simple drag-and-drop with both libraries.



// react-beautiful-dnd

export const DragDrop = ({ initialData }) => {
  const [items, setItems] = useState(initialData);
  const onDragEnd = () => { /** moving data **/ };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <DraggableItem item={item} key={item.id} index={index} />
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

const DraggableItem = ({ item, index }) => (
  <Draggable draggableId={item.id} index={index}>
    {(provided) => (
      <li
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
      >
        {item.content}
      </li>
    )}
  </Draggable>
);



// dnd-kit

export const DndKit = ({ initialData }) => {
  const [items, setItems] = useState(initialData);
  const onDragEnd = () => { /** moving data **/ };

  const sensors = useSensors(useSensor(PointerSensor));

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        <ul>
          {items.map((item) => (
            <DraggableItem item={item} key={item.id} />
          ))}
        </ul>
      </SortableContext>
    </DndContext>
  );
};

const DraggableItem = ({ item }) => {
  const {
    attributes,
    isDragging,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: item.id,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    cursor: isDragging ? "grabbing" : "grab",
  };

  return (
    <li
      {...attributes}
      {...listeners}
      key={item.id}
      data-dnd-id={item.id}
      data-dnd-type="item"
      ref={setNodeRef}
      style={style}
    >
      {item.content}
    </li>
  );
};

Check out this Codesandbox for the complete code.

Among these code samples having the same functionality, you can tell that dnd-kit has a higher complexity but is also more comprehensive. It uses Sortable to address this as it is one of the use cases it solves. It aligns with our objective to solve more intricate scenarios with nested drag and drop and the ability to drag across different levels.

Key advantages with dnd-kit that came in handy include:

Custom Placeholder - It is one of the most desired use cases. Achieving this in react-beautiful-dnd can be challenging as it will have limited capabilities and a lot of JavaScript to attain a satisfactory state. In our scenario, we wanted to show a condensed version of the element with children during dragging, so we used DragOverlay with the React portal.
Collision Detection Strategies - It offers various strategies specific to different use cases providing control over element switching within the tree. You can even develop your custom strategy to fit your requirements.
Sorting Strategies - Similarly, it offers different sorting strategies enabling sorting of vertical lists, horizontal lists, or grids.

Check out this simplified version of our use case at Epilot featuring drag and drop functionality with nested elements in this Codesandbox.

Conclusion

Ultimately, the choice between the two depends on your specific requirements, preferences, and the level of customization you want. If you prefer a simpler and more opinionated approach, react-beautiful-dnd would be a better choice. If you are looking for more customization and control, dnd-kit might be fit your needs better.

Toggle dark mode of a page in a blink

Ankur Kedia — Tue, 09 Nov 2021 07:24:59 +0000

Article originally posted on my blog.

This article is about how you can add blink detection in your project using TensorFlow.js. As an example, we will toggle the dark mode on a page. It's just a fun project to get started with Machine Learning and TensorFlow.js. Here is the result.

Sorry, your browser does not support embedded videos.

What should you know before starting?

Well, nothing as such. In simple terms, you can think of TensorFlow as a library that infers patterns from data and identify those patterns when they occur. You can either use pre-trained models or train your models with Teachable Machine.

Let's get started and set up a TensorFlow.js project

Load model: You need to load the model to be able to use it. In this case, we are using face landmarks detection model.

import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';
import * as tf from '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-backend-webgl';

const loadModel = async () => {
  await tf.setBackend('webgl');

  model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh,
    { maxFaces: 1 }
  );
};

Setup camera: To detect the face, the model needs a video stream. We will create a video element and pass its stream to estimate features on the face.

const setUpCamera = async (videoElement) => {
  video = videoElement;
  const mediaDevices = await navigator.mediaDevices.enumerateDevices();

  const defaultWebcam = mediaDevices.find(
    (device) =>
      device.kind === 'videoinput' && device.label.includes('Built-in')
  );

  const cameraId = defaultWebcam ? defaultWebcam.deviceId : null;

  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      facingMode: 'user',
      deviceId: cameraId,
      width: 500,
      height: 500,
    },
  });

  video.srcObject = stream;
  video.play();
  video.width = 500;
  video.height = 500;
}

Start estimation: For estimation, we will have to continuously monitor the face and keep checking if the user is blinking or not.

const predictions = await model.estimateFaces({
  input: video,
  returnTensors: false,
  flipHorizontal: false,
  predictIrises: true,
});

This returned prediction is an array of objects with values likefaceInViewConfidence, boundingBox, mesh, scaledMesh, annotations. The facemesh keypoints can be obtained from the annotations key.

These were the common steps you will need to do to set up a TensorFlow.js project with the face landmarks detection model. If all goes well, the browser should ask for camera permission when you run the project to be able to detect live video, and once the model is loaded, it starts predicting!

Adding blink detection

With the keypoints, we can calculate the Eye Aspect Ratio(EAR) with the following formula.

EAR = (|| p2 - p6 || + || p3 - p5 ||) / (2 * (|| p1 - p4||))

Here, || d || represents the Euclidean distance which is essentially the length of a line segment between the two points. And the points p1, p2 and so on, used here are mapped on the facemesh in the image.

So, when the person blinks, the EAR will drop close to zero. To detect the blink, the EAR will have to be lesser than a threshold which is close to zero. So, I used an EAR threshold that works for varying distances between the user and the camera. Once the EAR drops below the threshold, we know that eye is blinked. We have separate keypoints for both the eyes, so we can detect both eyes' blink separately.

To the dark side

Some time back, I read about an easy way to force the dark mode, which uses the CSS filter property. Coupling it with the color-scheme property, we can add dark mode to a majority of the pages. So, I would add these CSS properties to the root HTML element.

filter: invert(1) hue-rotate(180deg);
color-scheme: dark;

Note: There are some caveats to this method. But this works well enough for us to learn the basics. And hey, you get the dark mode with two lines of CSS. Which I think is pretty cool.

Blink Detection

To be able to reuse the logic, I created an NPM package named Blink Detection which does the calculations and returns the result.

import blink from 'blink-detection';

const blinkPrediction = await blink.getBlinkPrediction();

Here, the blinkPrediction will be an object with the keys blink, wink, longBlink, left, right, rate. Each key except rate will be a boolean value.

Challenges

With the face landmarks detection model, you will need to manually map facemesh keypoints on a graph from the data readings. There are a lot of annotations that can be used, but I could not find any source explaining them.
To decide the EAR(Eye-Aspect-Ratio) threshold, I had to try different values. I use the one that works the best for different distances between the user and the camera. So, it is not bullet-proof.

More ideas with blink detection

Chrome extension: You can create a chrome extension for the same demo. Another extension idea is to gauge the eye blink rate and use it for different purposes.
Blink rate: There have been numerous studies on how blinking patterns can measure or apprise certain aspects of an individual or a situation.
Wink detection: Similar to blinking, wink detection can also be used to perform some actions.

Wrapping up

That's it! Overall, this project wasn't really about toggling dark mode. I wanted to play around with TensorFlow and create something while doing it! Also, I could not find any project related to blink detection in Javascript, so I developed the package. Check out the demo and the code.

theankurkedia / blink-detection

Detect the user's blink and wink using machine learning

References

I found the following resources helpful. If you want to experiment and create something similar, you can start here.

Pre-trained TensorFlow.js models for different use cases.
If you are using the face landmarks detection model, the facemesh keypoints can help you map the points needed for your use case.
This amazing project was a great starting point. Honestly, I just cloned the repo and started experimenting.
TensorFlow.js object detection - Codelabs.
Teachable Machine to train your models.
Eye blink detection with OpenCV, Python, and dlib.

Thanks for reading. Hope you found it helpful! Happy coding!

Gear up your React codebase with Prettier and ESLint Automation

Ankur Kedia — Mon, 06 Sep 2021 10:42:24 +0000

Article originally posted on my blog.

Recently, I noticed that there were repetitive tasks that I was doing for all the new projects. So, I decided to document them so as not to repeat the mistakes. This article is about setting up Prettier, ESLint, Husky in your project.

This article can help you with:

Keeping your code clean.
Following standard practices in your code.
Ensuring that all the tests pass before commit.
Improving commit quality by adhering to the conventional commit format.

Steps to setup

Create a React app any way you like. I prefer to do it with NPX.

For TypeScript project:

npx create-react-app my-app --template typescript

For JavaScript project:

npx create-react-app my-app

You can also use Yarn or NPM. You can check out CRA docs for more details.

Open the project: cd my-app.
Installing dependencies:

With TypeScript:

yarn add -D eslint eslint-plugin-react prettier eslint-plugin-jest eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser husky @commitlint/{config-conventional,cli}

The versions of packages at the time of writing are:

{
  "devDependencies": {
    "@commitlint/cli": "^13.1.0",
    "@commitlint/config-conventional": "^13.1.0",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.1",
    "prettier": "^2.3.2"
  }
}

With JavaScript:

yarn add -D eslint eslint-plugin-react prettier eslint-plugin-jest eslint-plugin-react-hooks husky @commitlint/{config-conventional,cli}

The versions of dependencies at the time of writing are:

{
  "devDependencies": {
    "@commitlint/cli": "^13.1.0",
    "@commitlint/config-conventional": "^13.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.1",
    "prettier": "^2.3.2"
  }
}

Add Prettier config: create .prettierrc with this content. Also, install the Prettier plugin in VSCode.

{
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "useTabs": false,
  "eslintIntegration": false,
  "tslintIntegration": true,
  "requireConfig": false,
  "stylelintIntegration": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "tsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Note: I prefer this config, you can use Playground and choose what works for you. You can check out the rationale and the options to understand the rules better.

Add ESLint config: create .eslintrc.json with this config. Also, install the ESLint plugin in VSCode.

For TypeScript:

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-bitwise": 0,
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

For JavaScript:

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-bitwise": 0,
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

The rules I have used are basically to override the recommended settings. The only addition being the rules of hooks.

Note: Again, these are rules that I prefer, you can add the ones that work for you. You can check ESLint configuration docs to create your rules.

Add scripts to package.json

For TypeScript:

{
  "scripts": {  
    "lint": "eslint \"**/*.{ts,tsx,js,jsx}\"",
    "prepare": "husky install",
    "test": "react-scripts test"
  }
}

For JavaScript:

{
  "scripts": {  
    "lint": "eslint \"**/*.{js,jsx}\"",
    "prepare": "husky install",
    "test": "react-scripts test"
  }
}

Resolve lint errors: run yarn lint and resolve all warnings and errors (if any). You might see warnings and errors like this:

warning  'temp' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

Add Commitlint config:

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

Conventional config is used here, you can also define your config with different rules.

Install git hooks yarn prepare / npm prepare

Note: Using Husky with Yarn 2 requires different steps.

Add hooks: you can add any number of hooks you need. In this case, we are adding a pre-commit hook that will check the linting and run tests. We are also adding a Commitlint hook.

npx husky add .husky/pre-commit 'yarn lint && yarn test --watchAll=false'

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

For more specific use cases for husky, you can check the recipes.

Et voila, this is all you needed to do.
You can test the hook by simply committing. git commit -m "foo: this will fail". You should see this in the terminal.

⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

Note: If you want to skip these hooks, you can commit directly with -n/--no-verify option like git commit -m "yolo!" --no-verify

If you are starting with a new project, you can clone these repos with all the steps already done.

theankurkedia / react-starter-ts-template

theankurkedia / react-starter-template

Simplifying State Management with React Hooks using Zustand

Ankur Kedia — Thu, 27 May 2021 07:37:57 +0000

Article originally posted on my blog.

State management is probably one of the hardest parts of app development. More importantly, it is also the most crucial part to get right. This article is about simplifying the state management of your app with no new concepts. We will use Zustand to solve this which has hooks at its core. Covering the basics in this article, we will create a simple todo app. Since React Hooks are used to perform all the operations, basic hooks knowledge is all you'll need to sail through state management with Zustand.

What is Zustand?

Zustand is a simple, lightweight, fast, and React hooks-based state management.

A small, fast and scaleable barebones state-management solution. Has a comfy API based on hooks, isn't boilerplate-y or opinionated, but still just enough to be explicit and flux-like.

Features

Lightweight.
Little(hooks) or no learning curve.
Makes hooks the primary means of consuming state.
Not opinionated.
Transient updates.

Apart from the convenience, Zustand solves some of the common problems with other libraries like complex flows, over-engineered solutions. It also solves some common documented issues with major existing libraries and patterns like the Context loss issue, React concurrency issues, Zombie child problem.

How to use it?

To demonstrate, we will create a basic todo app with CRUD operations. We will start with creating a store. Then, initialize an array of todos and add a function to add a todo to the list.

import create from 'zustand';

const useStore = create((set) => ({
  todos: [],
  add: (title) =>
    set((state) => ({ todos: [...state.todos, { title }] }))
}));

Then, we attach the state todos we defined in the store to our components.

import { useStore } from './store';

function TodoList() {
  const todos = useStore((state) => state.todos);
  return (
    <div>
      {todos.map(({ title }) => (
        <div>{title}</div>
      ))}
    </div>
  );
}

Finally, we attach the add function which we defined to our button element. We will pass the input value as the title for the todo item.

import { useStore } from './store';

function TodoInput() {
  const [inputValue, setInputValue] = React.useState('');
  const add = useStore((state) => state.add);
  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => add(inputValue)}> Add </button>
    </div>
  );
}

Et voila, we have a rudimentary version of the todo app working. The same patterns of get and set can be used across the app for all sorts of operations. We have also created the toggleDone and remove functions along the same line. You can check the sandbox below for the complete functionality.

Advanced features

For large projects, we need a lot more than just CRUD operations, but Zustand has got you covered there too. It already has support for the following:

Async operations: You just need to call set whenever you're ready, it doesn't matter if your actions are async or not.
Middlewares: Compose and pipe your middlewares any way you like.
*Multiple stores fetching *: You can create as many selectors as you like.
Devtools: Provides an in-built devtool middleware.
Usage with Redux: If you still want to use reducer and action pattern, you can follow it here too.
Handling nested states: Manipulating nested structures is tedious. You can use immer as a middleware though.

Disadvantages

Although Zustand's documentation is concise, has a good flow, and is very easy to understand, it could use some more detailing and example in some sections like handling multiple middlewares, managing nested states, code optimizations for better performance. So, please considering contributing to Zustand.

Caution: You Might Not Need Redux(or any other state management library)

Conclusion

Using Zustand is very convenient and you don't need a load of information to get started. When comparing with seasoned state management solutions, it definitely has an edge when it comes to DX. Its simplicity, flexibility, and unopinionated nature make it a compelling option. So, if you are a beginner in handling state management or if you have a project that does not deal with deeply nested structures, then Zustand might be a great fit for your project.

DIY: Writing custom React Hooks to perform async operations

Ankur Kedia — Tue, 06 Oct 2020 05:19:01 +0000

This article is about creating your own React Hooks to perform async operations. As an example, we will create a custom useFetch Hook to make API calls.

What are Hooks?

Hooks are functions which let you use state and other React features without writing a class. They are a new addition in React 16.8. You can check the overview of Hooks before moving ahead. One important thing about Hooks is that they can only be used either in a functional component or inside another Hook.

Why custom Hooks?

A custom Hook allows you to extract some components logic into a reusable function. It is a reusable Javascript function that can call other Hooks.

Rules of Hooks

Hooks are JavaScript functions, but they impose two additional rules:

Only call Hooks at the top level. Don't call Hooks inside loops, conditions, or nested functions.

Only call Hooks from React function components. Don't call Hooks from regular JavaScript functions.

What are we trying to achieve here?

There are no bounds to the functionality that you can achieve using Hooks. But, in this article, we are just creating a specific type of custom Hook to perform async operations (API calls in this example) and tailor it to fit our use-cases. We will also have a function fetchNow that can be used to fetch the data with a callback. This should be the basic API for our example Hook.

const { data, loading, error } = useFetch(
    "https://www.reddit.com/r/popular.json"
  );

Alternative API could be the following.

const { data, loading, error, fetchNow } = useFetch();

We will start with creating our Hook and we will name it useFetch. It takes url and options as parameters. We will use useState and useEffect Hooks internally to implement our Hook.

function useFetch(url: string, options?: any) {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  function fetchNow(url: string, options?: any) {
    // we will add the code here
  }

  useEffect(() => {
      fetchNow(url, options);
  }, []);

  return { data, loading, error, fetchNow };
}

To prevent the extra re-renders. We will merge our setState Hooks.

function useFetch(url: string, options?: any) {
  const [status, setStatus] = useState<{
    loading: boolean;
    error?: Error;
    data?: any;
  }>({
    loading: false
  });

  function fetchNow(url: string, options?: any) {
    // we will add the code here
  }

  useEffect(() => {
      fetchNow(url, options);
  }, []);

  return { ...status, fetchNow };
}

Now, we have the bare-bones of our Hook ready. You can add the code according to the functionality of the Hook you are creating. In our case, we need to add the API calls. We will use the fetch API for this. After adding the logic, our function looks like this.

function useFetch(url?: string, options?: any) {
  const [status, setStatus] = useState<{
    loading: boolean;
    error?: Error;
    data?: any;
  }>({
    loading: false
  });
  function fetchNow(url: string, options?: any) {
    setStatus({ loading: true });
    fetch(url, options)
      .then((res: any) => res.json())
      .then((res: any) => {
        setStatus({ loading: false, data: res.data });
      })
      .catch((error: Error) => {
        setStatus({ loading: false, error });
      });
  }

  useEffect(() => {
    if (url) {
      fetchNow(url, options);
    }
  }, []);

  return { ...status, fetchNow };
}

The function is complete now. We will use them in our functional component like the initially expected API or with a callback like in the code shown below. And we will get the fetched data status in the variables named data, loading, error.

<button onClick={() => fetchNow("https://www.reddit.com/r/popular.json")}>
  Fetch data
</button>

TL;DR

You can check the sandbox below for the complete functionality of Hook.

What's next?

Cancelling Request: We can add the option to cancel the requests.
Caching: We can add a caching layer so that it does not have to make API calls for the same requests multiple times.
Central Error Handling: We can add an option to dispatch the error to a central handler in the project.

Conclusion

This is just one of the common use-cases of custom hooks. You can achieve a lot of great things with them. You got the idea on how to create custom Hooks. Here, we just made the API calls inside the Hook, but you can do all sorts of async operations using the same idea.

Thanks for reading and do give it a 💖 if you found it helpful!
Happy coding!

Forem: Ankur Kedia

3 CSS Features That I'm Hyped About in 2024

The Popover API + Anchor Positioning

Align Content for block layout

The :has() pseudo-class

Bonus: light-dark()

Conclusion

Curious case of Drag and Drop

Introduction

Problem

Solution

Show me some code

Conclusion

Toggle dark mode of a page in a blink

What should you know before starting?

Let's get started and set up a TensorFlow.js project

Adding blink detection

To the dark side

Blink Detection

Challenges

More ideas with blink detection

Wrapping up

theankurkedia / blink-detection

Detect the user's blink and wink using machine learning

References

Gear up your React codebase with Prettier and ESLint Automation

This article can help you with:

Steps to setup

theankurkedia / react-starter-ts-template

theankurkedia / react-starter-template

Simplifying State Management with React Hooks using Zustand

What is Zustand?

Features

How to use it?

Advanced features

Disadvantages

Conclusion

DIY: Writing custom React Hooks to perform async operations

What are Hooks?

Why custom Hooks?

Rules of Hooks

What are we trying to achieve here?

TL;DR

What's next?

Conclusion

The `:has()` pseudo-class