Forem: Arpit

Suspense in React 18

Arpit — Sun, 21 Aug 2022 15:59:09 +0000

What is Suspense?

The <Suspense /> component is a feature that was introduced along with React.lazy in React 16.6, to enable client side code splitting to load react components only when they're needed.

With React 18, Suspense is a lot more general and works for any asynchronous action you may wish to perform in your components, for e.g. data fetching.

For React 18, according to the release notes, you can technically use suspense for data fetching but for several libraries that support it, it's still an experimental feature.

Suspense is able to detect when your component is "suspended" and renders a fallback for it. The question you may have is, what does it mean for a component to be "suspended"?

How to suspend a component

A suspended component is one that threw a promise that is yet to be fulfilled. Now that sentence may be confusing to you. What do you mean "threw" a promise?

Below is a simple example of a suspended component, this is unusual React code, and you will never need to write this directly, but this is exactly how React knows when a component is suspended.

function Component() {
  throw new Promise((resolve) => {
    console.log('this is a promise that will never resolve');
  });

  return <div>Hello World</div>;
}

In most code bases, we are just used to throwing an error like this:

throw new Error('something went wrong');

But throw in JavaScript is very generic, it will throw whatever you want, it doesn't have to be an error. Along with throw, we use try/catch in to "catch" what was thrown, so we can gracefully handle the error.

<Suspense /> from a developer's perspective, works just like a catch block and tells react that this component is suspended, and we can't yet render it, it has to be handled in some other way.

That other way is to render a fallback component. The most common use case will be to show a loading indicator.

So instead of using isLoading state as we're used to, we will use <Suspense />, and its fallback prop.

Example using isLoading.

function App() {
  const { data, isLoading } = useDataFetcher();

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

  return <Component />;
}

Example using Suspense.

function App() {
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <Component />
    </React.Suspense>
  );
}

How to write a suspender function

Here is a naive implementation of a function that suspends a component and then resumes after our async action function is "fulfilled".

interface Response<T> {
  status: 'success' | 'pending' | 'error';
  data: T | null;
}

/**
 * A promise tracker that will be updated
 * when promise resolves or rejects
 */
const response: Response<unknown> = {
  status: 'pending',
  data: null
};

/**
 * This is our suspender function
 * that throws promise if it is not fulfilled yet
 */
export function suspend<T>(fn: () => Promise<T>) {
  /**
   * suspender is the promise we will throw
   * so react can re-render when it is fulfilled
   */
  const suspender = fn().then(
    (res) => {
      response.status = 'success';
      response.data = res;
    },
    (error) => {
      response.status = 'error';
      response.data = error;
    }
  );

  switch (response.status) {
    case 'pending':
      throw suspender;
    case 'error':
      throw response.data as T;
    default:
      return response.data as T;
  }
}

In this code example we keep track of a global response variable that tracks the state of our promise, suspender is a new promise that is thrown if the status of our argument is still 'pending'. Otherwise, we can return the resolved data.

When the component is suspended, React has access to the suspender promise. When it is "resolved" or "rejected", React will attempt to re-render the component and this time since data will available we do not need to rely on our fallback.

In our React component, we will use the suspend function like this.

import * as React from 'react';

function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

const action = async () => {
  await sleep(2000);
  return { greeting: 'hello world' };
};

function Component() {
  const data = suspend(action);

  return <div>The Greeting is - {data.greeting}</div>;
}

function App() {
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <Component />
    </React.Suspense>
  );
}

In the above example <Component /> will throw a promise and in <App />, <React.Suspense /> will catch it, and render the given fallback instead.

This suspend function has several issues though. Component currently does not accept any props and action does not accept any arguments that may be derived from those props, we cannot handle cases where promises are recreated for new function calls.

As a user just building UI components, You will probably never have to worry about these problems since they're supposed to be handled by external libraries.

Problems like caching or multiple promises are handled by whichever data fetching solution you use or something generic like suspend-react which will handle them for you.

Let's rewrite our example with suspend-react.

import * as React from 'react';
import { suspend } from 'suspend-react';

const action = async (name) => {
  await sleep(2000);
  return { greeting: `hello ${name}` };
};

function Component(props) {
  const data = suspend(() => action(props.name), [props.name]);

  return <div>The Greeting is - {data.greeting}</div>;
}

suspend-react works as a suspender function and has a global cache for your actions.
It accepts a list of keys to cache the status of a promise or the result of its execution.

When it comes to data fetching, there are way more specific problems that some libraries like swr will take care of.

Let's see an example with swr.

import * as React from 'react';
import useSWR from 'swr';

function Component() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true });

  return <div>hello, {data.name}</div>;
}

function App() {
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <Component />
    </React.Suspense>
  );
}

As you can see, the complexity of writing a suspender function is abstracted away from your code, and you end up with a nice clean API surface.

Nested Suspense Boundaries

Just like try/catch blocks, <Suspense /> boundaries can be nested.

You can have a single suspense boundary for several components.

import * as React from 'react';

function App() {
  return (
    <React.Suspense fallback={<Loader />}>
      <UserAvatar />
      <UserName />
    </React.Suspense>
  );
}

Or Several suspense boundaries for each component to handle their suspended state differently.

import * as React from 'react';

function App() {
  return (
    <div>
      <React.Suspense fallback={<Loader />}>
        <UserAvatar />
      </React.Suspense>

      <React.Suspense fallback={<Loader />}>
        <UserName />
      </React.Suspense>
    </div>
  );
}

Which strategy you choose will depend on your designs, UX and other requirements.

How to add "signin with apple" to your website

Arpit — Mon, 17 Aug 2020 17:06:56 +0000

Why Use Apple

Many websites have provide users a way to sign in to their applications via third party services like Google, Twitter, GitHub etc. We're trying to provide users with a more convenient solution where they can use their already existing accounts. Apple also provides a way for you to do this but their process can be very challenging if you're attempting this for the first time. In this blog post I'd like to show you how to integrate "sign in with apple" into your web application. This is about react and nodejs but with some understanding you can make it work with your own tech stack.

What We're Aiming For

User visits your website.
User presses the "Sign In with Apple" button.
A pop up window opens that takes the user to an apple website where they login into their apple account.
After successful login apple sends some information about the user back to the window where we initiated the signin process.
We capture the data and send it to our server for verification and storing the information in our database.

Initial Setup

In short, you need to have some setup and configs in hand before you start working on the code. In summary, you'll need to do these things -

Create an App ID.
Create a Serve ID.
Register the domains for your website.

The following are some screenshots to explain the process of App ID and Service ID creation. If you're already familiar with this process click here to jump to the next section.

App ID

Open Your developer console and find Certificates IDs & Profiles
Click on Identifiers in the side panel. Then click the plus symbol next to Identifiers to create a new App ID.
Select App IDs
Select Type App
Use a descriptive name for your application, I've used Example Application here. We'll choose an explicit style Bundle ID for now, use apple's suggested reverse domain style for proper namespacing, the string can be anything but you should stick to convention. I've used com.example here.

Service ID

Go back to the developer console and create a new identifier. This time select Services IDs.
Register a service with a proper description, I've used Example Application Signin here. For the identifier we'll follow the convention and use com.example.signin.
Your new Service ID is created, find it by using the dropdown you see on the left.
Click on your Service ID that you just created.
After you hit continue and save click in the identifier again. You'll be greeted with a checkbox tha say Sign In with Apple. Click on Configure.
A modal will popup, register your domain here.
- As your Primary App ID, choose the one we just created in the previous section.
- In the domains section add the domain where this service will be used.
- The return URL is the location to which apple will redirect us after authentication is completed. This is also the location where apple will send the user data after authentication. If it's a link to your server API, then apple will send a POST request to this URL. However, we will use location of our frontend as the return URL, and the data will be captured on the client side(more about this in the next section). I've assigned http://example.com for this example.

The Frontend

The most straight forward approach to using apple signin on your front end is to use the library provided by apple. Add the following CDN link to your page to load the library apple has provided.

<script
  type="text/javascript"
  src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
></script>

This will make a global AppleID object available to you for use. Here's how we'll use them.

/**
 * This function will initialize the `AppleID.auth` object with parameter we pass in.
 */
const initApple = () => {
  window.AppleID.auth.init({
    clientId: "com.example.signin", // This is the service ID we created.
    scope: "name email", // To tell apple we want the user name and emails fields in the response it sends us.
    redirectURI: "http://example.com", // As registered along with our service ID
    state: "origin:web", // Any string of your choice that you may use for some logic. It's optional and you may omit it.
    usePopup: true, // Important if we want to capture the data apple sends on the client side.
  });
};

NOTE

Apple makes a POST request to the redirectURI that you specify, normally you'd have a link to your backend API where the data gets posted, however we can bypass this and capture the information on the frontend by using the usePopup flag. This will instead capture apple's response on the client side.

The below function is how we start the apple authentication workflow. It will open a popup window where a user will be asked to input their apple email and password.
After a successful login apple will send a response object with user data that we can store in our backend.

/**
 * This function is where the magic happens.
 * This is a simple example, ideally you'll have catch block as well to handle authentication failure.
 */
const singInApple = async () => {
  const response = await window.AppleID.auth.signIn();

  return response;
};

This is what the response will look like (for first time users).

{
  "authorization": {
    "state": "[STATE]", // The state string we used in the initApple function
    "code": "[CODE]", // A single-use authentication code that is valid for five minutes. We won't be using this for now.
    "id_token": "[ID_TOKEN]" // This is what we're really interested in. This is JSON web token we'll be decoding in the backend.
  },
  "user": {
    // User details object, we'll be storing this data in the backend as well.
    "email": "[EMAIL]",
    "name": {
      "firstName": "[FIRST_NAME]",
      "lastName": "[LAST_NAME]"
    }
  }
}

NOTE

The user object is only sent the first time a user logs in, the rest of the times apple will only send the authorization object.

Great! now that we have authenticated the user from apple's perspective we need to verify the user in the backend before authenticating them. You can use whatever utility you wish axios, fetch; it doesn't matter as long as you get your data to your server.

The Backend

This is specific to Node.js but remember id_token is a JSON web token and you can use libraries in other languages to decode it.
For now we'll use a library tailor made for apple sign in called apple-signin-auth.

Install simply with -

npm i apple-signin-auth

yarn add apple-signin-auth

Now inside your controller, receive the token and decode it.

const appleSignin = require("apple-signin-auth");


const { authorization, user } = req.body;

try {
  const { sub: userAppleId } = await appleSignin.verifyIdToken(
    authorization.id_token, // We need to pass the token that we wish to decode.
    {
      audience: "com.example.signin", // client id - The same one we used  on the frontend, this is the secret key used for encoding and decoding the token.
      ignoreExpiration: true, // Token will not expire unless you manually do so.
    }
  );
} catch (err) {
  // Token is not verified
  console.error(err);
}

The decoded message here userAppleId it is unique identifier for a single user and and persists on multiple logins.

You can use your login workflow now.

Query your database to find if userAppleId exists.
If it exists then great! You have your user.
If it doesn't then you need to create a new user linked to this apple id, (The user details, email and name are only sent the first time a user logs into so you need to save those as well.)

useDebounce hook in React, Improve performance of your React app with Debouncing

Arpit — Tue, 07 Jul 2020 17:55:43 +0000

Debouncing is a performance optimization technique in JavaScript. It means to delay the execution of a function that you don’t want to run as often.

Show me the code

If you would like to jump straight to the code, here you go -
Here's the interactive codesandbox demo for you to play around with yourself.

Why use debouncing?

Why would you want to create an artificial execution delay anyway? Don’t we all want our computer to go fast, calculate new values really fast, fetch data from an API really fast, update the UI really fast? Yes, we do! But there are performance penalties for executing a function of course. Completing a certain task takes time and when we execute a function repeatedly on user input we have to make sure the rest of our application does not slow down while we focus on executing a function again and again. What does this mean? Let’s see an example.

A common use case is building a dynamic search input, this input allows searching for some resources in the application based on the user input string. We wish to update the search each time the user types new character. But this is not an optimum strategy since updating the search results at every keystroke may lead to results faster than user has typed it in. As a user you type in a whole word to search, we shouldn’t have to spend computation resources search based on half formed queries. Debouncing will allow us to delay the search until after a few milliseconds, giving the user ample time to type in their queries.

Mouse location coordinates

In the following code examples we'll build a simple application for using the location of your mouse pointer to generate some useful information. Specifically, we'll hover over a div, virtually divide it into 4 quadrants like a cartesian coordinate system, and figure out which quadrant we're currently in. Remember it's a single div, we're not creating four separate divs as quadrants and setting an event listener on each of them.

const App = () => {
    const [quadrant, setQuadrant] = useState(''); // The quadrant name - 1st | 2nd | 3rd | 4th

    const boxRef = useRef(null); // A ref to target our div

    let rect;
    let boxCenter = { x: 0, y: 0 };

    /**
     * This effect if for updating data about our div itself.
     * `getBoundingClientRect()` is a browser provided utility that gives you coordinates of the bounding rectangle.
     * We are interested in the `top`, `bottom`, `left`,`right` position of our div,
     * so we can calculate its center and use it as the origin of our div going forward.
     */
    useEffect(() => {
        rect = boxRef?.current?.getBoundingClientRect();
        boxCenter = {
            x: rect?.left + (rect?.right - rect?.left) / 2,
            y: rect?.top + (rect?.bottom - rect?.top) / 2
        };
    }, [boxRef.current, boxCenter]);

    const handleMouseMove = (e) => {
        /**
         * This code snippet is for calculating the local coordinate of the mouse pointer,
         * ie. coordinate with respect to the origin( center of the div)
         * Understanding the logic is not imperative to understanding the useDebounce() hook.
         * You can just think of it a computationally expensive
         * function that runs every time we move the mouse.
         */
        // G - global, with respect to page
        // L - local, with respect to origin i.e, center of div
        const [mouseX_G, mouseY_G] = [e.clientX, e.clientY];
        const mouseX_L = (mouseX_G - boxCenter.x) / ((rect?.right - rect?.left) / 2);
        const mouseY_L = (-1 * (mouseY_G - boxCenter.y)) / ((rect?.bottom - rect?.top) / 2);

        if (mouseX_L > 0 && mouseY_L > 0) setQuadrant('1st');
        else if (mouseX_L < 0 && mouseY_L > 0) setQuadrant('2nd');
        else if (mouseX_L < 0 && mouseY_L < 0) setQuadrant('3rd');
        else if (mouseX_L > 0 && mouseY_L < 0) setQuadrant('4th');
        else setQuadrant('');
    };

    return (
        <div onMouseMove={(e) => handleMouseMove(e)} ref={boxRef} id="mouse_example">
            {quadrant} quadrant
        </div>
    );
};

export default App;

application with no debouncing

The above code is actually quite performant and you probably won't notice many issues with while using it, since it is a simple application. But we still want more control over the application to make it so the quadrant info is calculated after waiting period. This gives us the option to optimise if we so choose.

The `useDebounce()` hook

const useDebounce = (value, timeout) => {
    // Save a local copy of `value` in this state which is local to our hook
    const [state, setState] = useState(value);

    useEffect(() => {
        // Set timeout to run after delay
        const handler = setTimeout(() => setState(value), timeout);

        // clear the setTimeout listener on unMount
        return () => clearTimeout(handler);
    }, [value, timeout]);

    return state;
};

Here's how we'll use it in our application. We'll of course have to make some major changes in structure.

const App = () => {
    const [quadrant, setQuadrant] = useState('');

    /**
     * In addition to quadrant we also need to have state for mouse position.
     * We wont' use it directly in UI instead,
     * we need to calculate a debounced version of this position state.
     */
    const [mouse, setMouse] = useState([0, 0]);
    const delay = 15; // milliseconds
    const debouncedMouse = useDebounce(mouse, delay); // Our debounced mouse coordinates for

    const boxRef = useRef(null);

    let rect;
    let boxCenter = { x: 0, y: 0 };

    useEffect(() => {
        rect = boxRef?.current?.getBoundingClientRect();
        boxCenter = {
            x: rect?.left + (rect?.right - rect?.left) / 2,
            y: rect?.top + (rect?.bottom - rect?.top) / 2
        };
    }, [boxRef.current, boxCenter]);

    useEffect(() => {
        /**
         * Instead of calculating the quadrant every time the mouse moves,
         * we instead calculate every time the values in debounced array changes.
         * Since debounced array is calculated at some delay, this useEffect callback function
         * runs with a delay as well.
         */
        const [mouseX_G, mouseY_G] = debouncedMouse;
        const mouseX_L = (mouseX_G - boxCenter.x) / ((rect?.right - rect?.left) / 2);
        const mouseY_L = (-1 * (mouseY_G - boxCenter.y)) / ((rect?.bottom - rect?.top) / 2);

        if (mouseX_L > 0 && mouseY_L > 0) setQuadrant('1st');
        else if (mouseX_L < 0 && mouseY_L > 0) setQuadrant('2nd');
        else if (mouseX_L < 0 && mouseY_L < 0) setQuadrant('3rd');
        else if (mouseX_L > 0 && mouseY_L < 0) setQuadrant('4th');
        else setQuadrant('');
    }, [...debouncedMouse]);

    const handleMouseMove = (e) => {
        /** Instead of calculating the quadrant at every mouse movement,
         * we set our mouse state instead, which in turn will trigger the useDebounce() hook.
         */
        setMouse([e.clientX, e.clientY]);
    };

    return (
        <div>
            <div onMouseMove={(e) => handleMouseMove(e)} ref={boxRef} id="mouse_example">
                {quadrant} quadrant
            </div>
            <div id="delay">Delay - {delay} milliseconds</div>
        </div>
    );
};

export default App;

application with a delay of 150 milliseconds

Conclusion

Debouncing is a general concept for performance improvements in a javascript application. A lot of blog reference and encourage the use of the debounce function in lodash to return the debounced version of a function. Instead, we have built a small reusable useDebounce() hook so it can be used in our functional components in a react application. You can play around with the code here -

Hope you learned something new :)

ESlint and Prettier for React apps (Bonus - Next.js and TypeScript)

Arpit — Sun, 05 Jul 2020 14:38:00 +0000

What if you could catch and fix your bugs before you even run your program. What if you could write code that has the same syntax and follows the same guidelines throughout the entire project. What if all of this could be enforced for your entire team of developers without any headaches. Seems amazing right? This is achieved by the amazing tools called ESlint and Prettier. Read about how you can add these tools to your JavaScript or TypeScript projects to improve your code quality and consistency.

This article will focus on ReactJS and also delve into NextJS with TypeScript, but these tools work for a JavaScript or TypeScript codebase in general and can be configured to work on any JavaScript project, with Prettier you can even target auto formatting for other languages like HTML, CSS, SCSS/SASS, Markdown, JSON, YAML, GraphQL, styled-components and many more!!!

NOTE

Eslint and Prettier are two separate tools, they can be run independently of each other, but we will leverage some very helpful ESlint plugins to combine them for maximum effect with minimal configuration.

ESlint

First I'll talk about ESlint. It is a static code analyzer, that means it tells you errors and mistakes that you may make while you are developing.

These errors can be stuff like -

Simple syntax errors eg. not closing a function declaration with }.
Dead code detection eg. unused variables, code written after a return statement.
Violating code guidelines, these are rules defined by yourself or a combination of predefined standards like the Airbnb styled guide or Google's style guide etc.

Prettier

Prettier is a code formatter, it's only concerned with how your code looks, do you want ensure consistent indentation in the entire project?
Do you want to ensure there're no semicolons in the project? Make your promise chains look perfectly consistent and readable? Prettier can be enabled for the entire project and instead of your team disagreeing about formatting styles, you can just leave it all to Prettier to figure out.

Getting started

Make sure you have npm and Node.js installed.

Let's install the devDependencies for ESlint -

npm i -D eslint \                       # Eslint itself
         prettier \                     # Prettier itself
         eslint-plugin-react \          # Eslint plugin for react
         eslint-plugin-react-hooks \    # Eslint plugin for react hooks, helps you write modern functional react components
         eslint-config-prettier \       # Eslint config for prettier, it will extend the style guide to match prettier
         eslint-plugin-prettier \       # Eslint plugin for prettier, it will raise eslint errors about formatting
         eslint-plugin-jsx-a11y         # Eslint plugin to raise accessibility violation errors

NOTE

If you are using create-react-app then you already have Eslint baked in, you only need install the other plugins etc.

Making the config files -

touch .eslintrc.js .prettierrc

.eslintignore and .prettierignore

These are the files we need for telling eslint and prettier not to target certain files and folder

touch .eslintignore .prettierignore

Just add the following to both files

node_modules

Alternatively if you just wish to use your .gitignore file as ignore path you can pass it with a flag when running ESlint
eg.

eslint --fix . --ignore-path ./.gitignore

Let's populate our configs now -

.prettierrc

This is the config that I use for prettier -

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "jsxBracketSameLine": true
}

.eslintrc.js

This is a base config for eslint, we can extend it further with cool plugins.

module.exports = {
    root: true,                 // Make sure eslint picks up the config at the root of the directory
    parserOptions: {
        ecmaVersion: 2020,      // Use the latest ecmascript standard
        sourceType: 'module',   // Allows using import/export statements
        ecmaFeatures: {
            jsx: true           // Enable JSX since we're using React
        }
    },
    settings: {
        react: {
            version: 'detect'   // Automatically detect the react version
        }
    },
    env: {
        browser: true,          // Enables browser globals like window and document
        amd: true,              // Enables require() and define() as global variables as per the amd spec.
        node: true              // Enables Node.js global variables and Node.js scoping.
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }]  // Use our .prettierrc file as source
    }
};

Running ESlint

You need to add the script to your package.json file.

  "scripts": {
    "lint": "eslint --fix .",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },

Now simply run

npm run lint

Targeting Next.js

For using Eslint with Next.js not a lot of changes are needed, we'll add two rules -

For handling the need for having react in context while writing JSX code since Next.js doesn't require that.
For handling accessibility related errors raised by the jsx-a11y plugin.
In Next.js we use the Link component for wrapping the <a></a> tag. Instead of passing href attribute to <a></a> we pass it as prop to Link instead. This raises a very common accessibility issue of an anchor tag with no href, and we don't want any eslint errors so we need to figure out a way to handle this situation.

Simply go to your .eslint.js and add our custom rules for it.

{
    rules: {
        'react/react-in-jsx-scope': 'off',
        'jsx-a11y/anchor-is-valid': [
            'error',
            {
                components: ['Link'],
                specialLink: ['hrefLeft', 'hrefRight'],
                aspects: ['invalidHref', 'preferButton']
            }
        ]
    }
}

Targeting TypeScript

For TypeScript, we need to make some additions to our devDependencies.

npm i -D @typescript-eslint/eslint-plugin \     # For extending our rules to work with prettier
         @typescript-eslint/parser              # To enable eslint to parse typescript code

Now we need to modify the .eslintrc.js file -

Add a top level property to our config to handle typescript code parsing

module.exports = {
    parser: '@typescript-eslint/parser'
};

Add the following new items to the extends array.

{
    extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
    ]
}

Finally

This is what your .eslintrc.js should look like after Typescript and Next.js additions.

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    settings: {
        react: {
            version: 'detect'
        }
    },
    env: {
        browser: true,
        amd: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'   // Make sure this is always the last element in the array.
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
        'react/react-in-jsx-scope': 'off',
        'react/prop-types': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        'simple-import-sort/sort': 'error',
        'jsx-a11y/anchor-is-valid': [
            'error',
            {
                components: ['Link'],
                specialLink: ['hrefLeft', 'hrefRight'],
                aspects: ['invalidHref', 'preferButton']
            }
        ]
    }
};

Bonus Content

eslint-plugin-simple-import-sort

Do you find yourself worrying about the order of your import statements. Here's a solution to let eslint worry about all that.

npm i -D eslint-plugin-simple-import-sort

Before -
After -

Update your .eslintrc.js file to make use of this plugin. Add a top level property plugins.

module.exports = {
    plugins: ['simple-import-sort']
};

husky + lint-staged

To make sure you're code is formatted and has no linting errors you'll have to run npm run lint every time. We should be able to automate this somehow.

Let's go -

npm i -D husky \        # A tool for adding a pre-commit hook to git, It will run a certain command every time you commit
         lint-staged    # A tool for running a certain list of commands over files that staged for committing in git

Now in your package.json add the following at the top level.

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "./**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
    ]
  }
}

Conclusion

Hope you learned something new. Eslint is endlessly customizable and you should explore more to find some plugins and configs that best benefit your project.

All the code snippets can be found here as a Gist on GitHub

Forem: Arpit

Suspense in React 18

What is Suspense?

How to suspend a component

How to write a suspender function

Nested Suspense Boundaries

How to add "signin with apple" to your website

Why Use Apple

What We're Aiming For

Initial Setup

App ID

Service ID

The Frontend

The Backend

Further Reading

useDebounce hook in React, Improve performance of your React app with Debouncing

Show me the code

Why use debouncing?

Mouse location coordinates

The useDebounce() hook

Conclusion

ESlint and Prettier for React apps (Bonus - Next.js and TypeScript)

ESlint

Prettier

Getting started

.eslintignore and .prettierignore

.prettierrc

.eslintrc.js

Running ESlint

Targeting Next.js

Targeting TypeScript

Finally

Bonus Content

eslint-plugin-simple-import-sort

husky + lint-staged

Conclusion

The `useDebounce()` hook