
This is an example post, with a [link](https://nextjs.org) and a React
component:

<TestComponent name="next-mdx-remote" />

The title and description are pulled from the MDX file and processed using
`gray-matter`. Additionally, links are rendered using a custom component passed
to `next-mdx-remote`.

Go back [home](/).


This frontmatter description will appear below the title

Example Post


When dealing with elements that provide an "out of flow" reading order, focus
trapping can be useful for users with assistive technology.

## What is the issue with modals and popovers?

Modals and Popovers are dialogs that introduce a new "layer", or overlay, of
content that is meant to be consumed when initiated. Sighted users can visually
see what is meant to be focused on and either read or take action. Sighted users
can close the dialog and be on their way. The issue becomes apparent when using
assistive technology such as a screen reader. Unsighted users are not aware that
the content in the dialog should be interacted with and dismissed. The

## What is focus trapping and what does it solve?


Improve accessibility with “focus trapping” for modals and popovers.

Focus Trapping for Better Web Accessibility


Creating search functionality is crucial to a website&apos;s user experience.
Using Algolia we can easy create a searchable index to help create this
experience.

One of the key advantages of Algolia is its real-time indexing and syncing
capabilities. As our website evolves and new content is added, Algolia ensures
that the search index is always up to date.

Let&apos;s build this out with Next.js and Typescript.

## Step 1: Create an Algolia Index populated with data

First we&apos;ll need to set up and populate an Algolia index in an automated
way. To achieve this we&apos;ll create a script that runs on every build so we
are confident we have the latest searchable items (We are doing this on every
build. You may need to change when this runs depending on the type of
website/application you are building).

### Create an index in Algolia

<img
  src={"/images/posts/algolia/create-index.png"}
  style={{
    width: "100%",
    maxWidth: "540px",
    marginLeft: "auto",
    marginRight: "auto",
  }}
/>

First create an index in Algolia&apos;s dashboard. After creating an index grab
the API keys and place them in your `.env` file like so:

```
// .env
NEXT_PUBLIC_ALGOLIA_APP_ID={APP_ID}
NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY={SEARCH_ONLY_API_KEY}
ALGOLIA_SEARCH_ADMIN_KEY={ADMIN_API_KEY}
```

### Create a script to build out index

Now that we have an index set up in Algolia we can populate it with any data we
want. We can do this in an automated way so we don&apos;t have to think about it
on every deploy. Create a directory called `scripts` and add a file called
`build-algolia-search.ts` in it. In this file we&apos;ll do this:

```
// scripts/build-algolia-search.ts

import dotenv from "dotenv"
dotenv.config()
import algoliaSearch from "algoliasearch"

export interface SearchObject {
  objectID: string // objectID is needed for Algolia
  title: string
  description: string
  slug: string
  date: string
  thumbnail?: string
}

async function getAllPostsTransformed(): Promise<SearchObject[]> {
  const allPosts = await fetchAllPosts() // 👈 This function is specific to your application. Grab data from Markdown/Contentful/CMS etc.

  // return an array of objects to be added to Algolia.
  return (
    allPosts?.map((post) => {
      return {
        objectID: post.id, // objectID must be unique and consistent on each build
        title: post.title,
        description: post.subTitle,
        slug: post.slug,
        date: post.createdAt,
        thumbnail: post.image.fields.file.url,
      }
    }) || []
  )
}

;(async function () {
  dotenv.config()
  try {
    const posts = await getAllPostsTransformed()
    const client = algoliaSearch(
      process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
      process.env.ALGOLIA_SEARCH_ADMIN_KEY!
    )
    const searchIndex = client.initIndex("search")
    const algoliaSearchIndexResponse = await searchIndex.saveObjects([...posts]) // Add any more data needed to this array
    console.log(
      `⭐️⭐️ Successfully added ${algoliaSearchIndexResponse.objectIDs.length} records to Algolia search. ⭐️⭐️`
    )
  } catch (err) {
    console.error(err)
  }
})()
```

Next we can install the needed dependencies with yarn:

```
yarn add algoliasearch dotenv
```

And finally we can add an npm script to run:

```
// package.json
...
"scripts": {
  ...
  "build": "next build && npm run buildsearch",
  "buildsearch": "npx ts-node --skip-project  ./scripts/build-algolia-search.ts",
  ...
},
...
```

Run `yarn buildsearch` to run the script and you should see your index populated
with data in the Algolia Dashboard. We also updated our `build` script so that
it also runs `buildsearch` on deployments.

## Creating an API route to search from

Now that we have an index with data set up we can now create an API route to
search our data from. Create a search api route in the api routes directory

```
// pages/api/search.ts

import type { NextApiRequest, NextApiResponse } from "next";
import algoliaSearch from "algoliasearch";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const query = req.query;
  const { term } = query;
  const client = algoliaSearch(process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!, process.env.ALGOLIA_SEARCH_ADMIN_KEY!);
  const index = client.initIndex("search");
  index
    .search(term as string)
    .then(({ hits }) => {
      res.status(200).json(hits);
    })
    .catch((err) => {
      console.log(err);
    });
}
```

Now visiting `localhost:3000/api/search?term=test` will show a json response
with the search results for the term "test". You can create a UI to request
search from this new API route.


Build search with Algolia and Next.js using TypeScript.

Algolia Search with Next.js


One of the most popular features of Next.js is the ability to create API routes
for front end applications. They provide a nice and easy way to provide backend
support. Sometimes it may be a good idea to split out the API and UI into
separate projects. Using the
[Vercel npm package](https://www.npmjs.com/package/vercel) makes this possible
and very easy to do.

### Setting up the project

First create an empty folder with a new package.json and install the vercel
package.

- `mkdir vercel-api-test`
- `cd vercel-api-test`
- `npm init -y`
- `npm i vercel`

Then let’s add a dev script to start up our local server with vercel.

```
// package.json
...
"scripts": {
  "start": "vercel dev"
},
...
```

Now run the script to set up and run the server:

`npm start`

- Vercel will ask you to Set up and develop. Type `Y` to continue. (Note: you
  must be signed in to your vercel account)
- Select the team or individual that you want to proceed with. (This may not ask
  you if you only have a single individual account)
- Link to existing project? Enter `N` to create a Vercel new project and give it
  a name (Or press enter to use the existing project name).
- In which directory is your code located? Leave it as `./`
- It will set up your project and ask you to confirm default settings. We will
  want to remove the build step since we won’t need it for this example. Type
  `y`
- Select Build Command as a setting you want to overwrite. Then press enter so
  that there is no Build Command.
- You will now have your API running on `localhost:3000`

<img
  src={"/images/posts/vercel-api/vercelsettings.png"}
  style={{ maxWidth: "540px" }}
/>

### Creating Routes

By default Vercel will look for a `/api` folder so let’s create that with a new
api route called `hello.ts`. Same as Next.js each file in the api folder will be
a new api route endpoint. Keep in mind these are serverless functions that are
spun up/down as they are needed.

> Note: Underscore prefixed files in the api directory, e.g. `_test.ts` will not
> create a new route.

<img
  src={"/images/posts/vercel-api/vscoderoutes.png"}
  style={{ maxWidth: "300px" }}
/>

In `hello.ts` we can use the same example provided by Next.js but adapted for
the `vercel` library.

```
import { VercelRequest, VercelResponse } from "@vercel/node";

type Data = {
  name: string;
};

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({ name: "John Doe" } as Data);
}
```

> Note: Vercel will handle Typescript files natively as well as Go, Python and
> Ruby and create serverless functions. Pretty nifty!

Now if we visit `http://localhost:3000/api/hello` we will see our response.

<img
  src={"/images/posts/vercel-api/hello1.png"}
  style={{ maxWidth: "340px", border: "1px solid #eee" }}
/>

#### Accessing Query Params

Query params can be accessed from the `req.query` object. For example, we can
change our code to take in a name as a query param.

```
import { VercelRequest, VercelResponse } from "@vercel/node";

type Data = {
  name: string;
};

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({ name: req.query.name || "" } as Data);
}
```

Now if we visit `http://localhost:3000/api/hello?name=Jake` we will see the
correct response.

<img
  src={"/images/posts/vercel-api/hello2.png"}
  style={{ maxWidth: "340px", border: "1px solid #eee" }}
/>

#### Accessing Route Params

Route params work similar to Next.js. Create a folder for the route and then a
file with the param wrapped in square brackets.

<img
  src={"/images/posts/vercel-api/vscoderouteparam.png"}
  style={{ maxWidth: "300px" }}
/>

Then it's as easy as accessing the query param on the `req.query` object.

```
import { VercelRequest, VercelResponse } from "@vercel/node";

type Data = {
  user: string;
};

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({ user: req.query.user } as Data);
}
```

Visiting `http://localhost:3000/api/user/john-doe` will give us the correct
response.

<img
  src={"/images/posts/vercel-api/routeparam.png"}
  style={{ maxWidth: "340px", border: "1px solid #eee" }}
/>

### Environment Variables

Environment variables work the same in all Vercel apps.

Simply create a `.env` file and the variables can be accessed in the API routes
with `process.env.SECRET`, for example.

### CORS

To control CORS in this API create a `vercel.json` file at the root of the
project and add this config:

```
{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}
```

This config will allow any and all access. Adjust as needed to your application.

### Deployment

I will not go in depth on deployments but it’s just a matter of connecting your
Git repo to Vercel!

Let me know if you found this article helpful!


Create an API endpoint on Vercel with Typescript.

Vercel API without Next.js


Routing and redirecting in Next.js can be trivial on the client side, but doing
this on the server side may not be as straight forward. Previously you would
need to determine if the request was client side or server side in
`getInitialProps` then manage the response by setting the correct headers and
manually writing out the http response object. Now as of Next.js 10+ they have
introduced an easy way to do this.

## Redirecting Server Side with Next.js

The idea is to return an object with a `redirect` key in `getServerSideProps`:

```jsx
// HelloWorld.js
export default function HelloWorld() {
  return <p>Hello World</p>
}

export async function getServerSideProps(ctx) {
  // Custom function to determine user authentication
  const isAuthenticated = await getUser(ctx)

  if (!isAuthenticated) {
    return {
      redirect: {
        permanent: false, // determines 308/307 status response code
        destination: "/", // where to redirect user
      },
    }
  }
  return {}
}
```

This `redirect` object allows you to set a `destination` and whether it is a
`permanent` redirect or not. `destination` is the new route that the user will
be redirected to. `permanent` will determine if the redirect will use a
[308 status response code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/308)
or
[307 status response code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/307).


Using getServerSideProps() to redirect user on server side in Next.js.

Next.js Server Side Redirect


Next.js with Chakra UI has become my go-to front end stack for creating websites
and web apps. Chakra UI’s simple API coupled along with styled system props
has made my workflow much faster. 




## Next.js Link and Chakra UI Link
Like most front-end frameworks, Next.js has a special Link component that is
used for navigating between routes. You wan't to make sure you use Chakra UI's 
Link so that you can maintain consistent styling in your app.

```jsx
import NextLink from 'next/link'
import { Link } from '@chakra-ui/react'

<NextLink href={'/'} passHref>
  <Link>Link</Link>
</NextLink>
```

Wrapping the Chakra UI Link with NextLink and adding the `passHref` prop will
allow the href to be passed as a prop to the Link and will have the NextLink
route handler.

## Detecting Active Link with Next.js

If you have a link that you want to style if it's the current active page then
you can use the `useRouter `hook that comes with Next router.

```jsx
import { useRouter } from 'next/router'

const router = useRouter()
const isActive = router.pathname === '/'

<NextLink href={'/'} passHref>
    <Link color={isActive ? 'red' : 'blue'}>Link</Link>
</NextLink>
```


How to use Next.js link properly with Chakra UI.

Using Next.js Link with Chakra UI Link


When building and consuming APIs you will often hear of a “contract”. What is
it? Basically an API contract is a document that describes how the API works.
Yep that's it. But it's importnat to know that it's also an agreement from API
developers that the product they put out works how they say it does. Any changes
to the API should be reflected in the contract otherwise anyone who consumes it
will not be aware.

> An API contract is the documentation that describes how the API works and how
> it should be used.

## Why is an API contract needed?

When making changes to an API those changes should be communicated out and
documented to avoid unexpected behavior from clients that consume it.

Imagine you have an app that depends on some data from an API. Let’s say the API
developers decide to rename a field or the type of response your client
application will break.

API versioning is a tactic for making breaking changes to an API. For example
the api endpoint `https://myrecipes.com/api/v2/recipes` represents that this api
is on version 2. This also allows us to assume there is a version 1. Clients can
continue to use `v1` and not have their app break. Newer functionality can be
developed on `v2` or `v3` etc.

## What does an API contract look like?

There are many forms of documentation for API contracts.
[Stripe’s API documentation](https://stripe.com/docs/api) is an amazing example
of how an API contract should be done, but not every API can have the resources
to create that.

[Swagger](https://swagger.io/) is a popular solution for supporting API
documentation. This [Cat Store example](https://petstore.swagger.io/) shows how
even some basic information like GET, POST, PUT and DELETE methods can go a long
way in explaining the functionality of an API.

## Conclusion

API contracts are a document that describes your API. As an API developer it’s
important to make sure your API contract is up to date and accurate for anyone
consuming your API.


How is an API contract useful to the development process?

What is an API contract?


When using Next.js you’ll most likely need to override the global `App`
component to get access to some features like persisting state, or global
layouts. This can be done by creating a file`_app.js` directly in the
` ./pages/` folder. If this file exists, then Next.js will use this instead of
the default App.

## A basic example of \_app.js

A basic example of overriding the default `App` in with no extended
functionality:

```jsx
// _app.js
const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default MyApp
```

The `Component` prop is the page view that will be rendered. We can use this to
pass our own props to or wrap with layout/context components. The `pageProps`
prop is the props that each page will receive when rendered. It is important to
remember to pass these along.

## Using \_app.js with a custom layout

An example of wrapping `App` with a custom layout component.

```jsx
// _app.js
import Layout from "../components/layouts/"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp
```

With this example any additional components that are used in `_app.js` will be
rendered on every page. this is a good way to do custom layouts without having
to wrap each page component in your `/pages` directory.

## Using \_app.js with Providers

An example of wrapping `_app.js` with a theme provider.

```jsx
// _app.js
import { ThemeProvider } from "@chakra-ui/core"
import Layout from "../components/layouts/"
import theme from "../components/theme"

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  )
}

export default MyApp
```

Wrapping `Component` with Providers allows the persisting of data across pages
and deeply nested components. In this example our theme style data is accessible
anywhere within our app.

## Using `_app.js` with Auth Provider

An example of wrapping `_app.js` with an auth provider. This method will require
each page render to be server-side rendered.

```jsx
// _app.js
import App from "next/app"
import { ThemeProvider } from "@chakra-ui/core"
import { AuthProvider, getUser } from "../components/helpers/AuthProvider"
import Layout from "../components/layouts/Layout"
import theme from "../components/theme"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <ThemeProvider theme={theme}>
      <AuthProvider myAuth={auth}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthProvider>
    </ThemeProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const auth = await getUser(appContext.ctx)
  return { ...appProps, auth: auth }
}

export default MyApp
```

The `getInitialProps` method is run on page render which allows an auth token to
be grabbed and authenticated. Access to our auth data is now available anywhere
within the application.

> Note: Per the
> [Next.js docs](https://nextjs.org/docs/advanced-features/custom-app), using `getInitialProps` in 
> `_app.js` disables the ability to perform automatic static optimization,
> causing every page in your app to be server-side rendered.

Use _app.js to extend react applications in Next.js.

Next.js _app.js example


When using Next.js you may need to send authenticated api requests using user
credentials via cookies. The `getInitialProps()` method allows us to do this, but the issue
comes when you try to make the requests both server side and client side with
Axios. The `context` object that comes with `getInitialProps` comes in handy and
can supply the cookie headers when making the request server side. We can use
optional chaining to check whether our request object and headers exist,
otherwise we'll pass undefined. With Axios we can use the
`withCredentials: true` option to make this happen with client side requests.
The result looks like this:

```jsx
Component.getInitialProps = async (ctx) => {
  try {
    const response = await axios({
      method: "get",
      url: `http://localhost:3000/api/`,
      headers: ctx?.req?.headers?.cookie ? { cookie: ctx.req.headers.cookie } : undefined,
      withCredentials: true,
    })
    return { data: response.data }
  } catch (error) {
    if (ctx.res) {
      console.log(error.message)
      ctx.res.writeHead(302, {
        Location: "/",
      })
      ctx.res.end()
    }
  }
}
```

I wrapped the Axios get call in a [Try...Catch statement](/how-to-use-try-catch-in-javascript) 
to handle any API errors thrown. From there you can choose to redirect the user if the request is
made server side.

How to send authenticated requests with Next.js and Axios using cookies.

Sending cookies with Next.js and Axios 🍪


When using authentication in a Next.js app you want to have a seamless
experience. Doing user authentication server side can prevent unnecessary
spinners within your app. We can create server side rendered authentication in
Next.js using React Context in an `_app.js` file. By wrapping our entire
application in an auth context, we can validate users server side and have
access to the current user within any component.

This method should work for any backend authentication solution you have. The
process goes as followed:

1. Create an `AuthContext` provider to contain your authentication logic and
   provide methods for dealing with losing in/out and getting user info
1. Wrap your application with our `Auth.Provider` in `_app.js`.
1. Use the `useContext` hook to get user data from within your components.

## Auth Context

First create a context for us to store authentication data. React Context gives
us access to Provider and Consumer components to set and retrieve data anywhere
within our app.

```jsx

import axios from 'axios';
import { createContext } from 'react';
import router from 'next/router';

const AuthContext = createContext();

export const getUser = async (ctx) => {
  return await axios
    .get(`${process.env.NEXT_PUBLIC_API_URL}/token`, {
      headers: ctx.?req?.headers?.cookie ? { cookie: ctx.req.headers.cookie } : undefined,
      withCredentials: true,
    })
    .then((response) => {
      if (response.data) {
        return { status: 'SIGNED_IN', user: response.data };
      } else {
        return { status: 'SIGNED_OUT', user: null };
      }
    })
    .catch((error) => {
      return { status: 'SIGNED_OUT', user: null };
    });
};

export const AuthProvider = (props) => {
  const auth = props.myAuth || { status: 'SIGNED_OUT', user: null };
  const login = async (email, password) => {
    // Use any auth service methods here
    return await axios({
      method: 'post',
      url: `${process.env.NEXT_PUBLIC_API_URL}/login`,
      data: { email, password },
      withCredentials: true,
    })
      .then(() => {
        router.push('/');
        console.log('user signed in');
      })
      .catch((error) => {
        console.error('Incorrect email or password entered.);
      });
  };
  const register = async (email, password) => {
    return await axios({
      method: 'post',
      url: `${process.env.NEXT_PUBLIC_API_URL}/register`,
      data: { email, password },
      withCredentials: true,
    })
      .then(function (response) {
        router.push('/');
		  console.log('user registered');
      })
      .catch(function (error) {
        console.error(error.message);
      });
  };
  const logout = async () => {
    return await axios
      .get(`${process.env.NEXT_PUBLIC_API_URL}/logout`, { withCredentials: true })
      .then(() => {
        router.push('/');
        console.log('user logged out');
      })
      .catch((error) => {
        console.error(error.message);
      });
  };
  return <AuthContext.Provider value={{ auth, logout, register, login }} {...props} />;
};

export const useAuth = () => React.useContext(AuthContext);
export const AuthConsumer = AuthContext.Consumer;

```

We now have a Context Provider with all the methods needed for handling user
authentication.

## Wrapping application with \_app.js

Create a `_app.js` in the pages directory. This allows us to have access the
root of our react app. Here we can wrap our whole application with our Auth
Provider.

We will use `getInitialProps` to make a call to our `/token` endpoint to check
if a user exists with our current cookies. If there is no valid session `user`
will be set to `null` and status will be `SIGNED_OUT`

```jsx
import App from "next/app"
import { AuthProvider, getUser } from "../components/contexts/AuthContext"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <AuthProvider myAuth={auth}>
      <Component {...pageProps} />
    </AuthProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const auth = await getUser(appContext.ctx)
  return { ...appProps, auth: auth }
}

export default MyApp
```

## Use `useContext()` hook to access AuthContext data

Now we can access our auth data and methods anywhere within our app. The
`useContext` hook makes this especially simple.

```jsx
// Navigation.jsx
function Navigation() {
  const { auth } = useAuth()
  if (auth.status === "SIGNED_OUT") {
    return <LoggedOut />
  }
  if (auth.status === "SIGNED_IN") {
    return <LoggedIn user={auth.user} />
  }
}
```

### Login/Register

We have access to `login` and `regsiter` methods from our context.

```jsx
const LoginPage = () => {
  const { login, register } = useAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const handleLogin = async (e) => {
    e.preventDefault()
    // Log in or Register here
    login(email, password)
    // register(email, password)
  }
  return (
    <form onSubmit={handleLogin}>
      <Text as={"h1"} fontSize={28} fontWeight={"bold"}>
        Log in
      </Text>
      <FormControl>
        <FormLabel htmlFor="email">Email</FormLabel>
        <Input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </FormControl>
      <FormControl>
        <FormLabel htmlFor="email">Password</FormLabel>
        <Input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </FormControl>
      <Button type={"submit"}>Log In </Button>
    </form>
  )
}
```

### Log out

Logging out is just as easy. We have access to our `logout` method.

```jsx
const LoggedIn = () => {
  const { logout } = useAuth()
  return <Button onClick={logout}>Logout</Button>
}
```

By using React Context in our Next.js app we can get access to user auth not
only in the client but server side too.


Use React Context to access auth data server side with Next.js.

Server Side Auth with Next.js, Context and Hooks


You may encounter times when the performance of your JavaScript is affected by
too many function calls. This can happen, for example, when you have event
handlers on an input field and you type too fast, or an even handler on a window
resize event, which causes the function to be called on every pixel resize.
These repetitive function calls can be drastic to the performance of your
application. The good news is this can be mitigated by using debouncing and
throttling.

## What is Debouncing and Throttling in JavaScript?

Debouncing and throttling are higher order functions used to increase the
performance of your JavaScript function calls by limiting or slowing down the
number of continous invocations. This may seem complicated, but the basic idea
is: limit the number of times you call a function. Throttling and debouncing
both do this but there are subtle differences between the two.

> Throttling limits the number of times a function is called but calls the
> function continously while spacing out the invocation intervals.

> Debouncing waits until a continous function call is stopped for an amount of
> time, then it invokes the function.

As illustrated, clicking on the download buttons many times will have different
effects depending on if throttled, debounced or not limited at all.

<img src={"/images/throttle-debounce.gif"} />
{/* <ThrottlingAndDebouncing /> */}

Getting to the point, here what the throttle and debounce function codes look
like.

### Throttle Function

```js
const throttle = (fn, milliseconds) => {
  let inThrottle
  return function () {
    const args = arguments
    const context = this
    if (!inThrottle) {
      fn.apply(context, args)
      inThrottle = true
      setTimeout(() => (inThrottle = false), milliseconds)
    }
  }
}
// Wrap the function you want to throttle along with the time in milliseconds you want to delay each call.
throttle(clickHandler, 1000)
```

### Debounce Function

```js
const debounce = (fn, milliseconds) => {
  let debounceTimer
  return function () {
    const context = this
    const args = arguments
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => fn.apply(context, args), milliseconds)
  }
}

// Wrap the function you want to debounce along with the time in milliseconds you want to wait before calling.
debounce(clickHandler, 1000)
```

As you can see, they are both "higher order functions" that wrap any function
with a time limit. Using `setTimeout` they can decide when to invoke the
function based on the time delay parameter.


Improve performance by limiting function calls in JavaScript with Debouncing and Throttling.

Debounce and Throttle Functions in JavaScript


When handling state in your react components you might often reach for the
`useState` hook. That is handy for simple state values that only pertain to that
component, but when you need to deal with complex state objects that can be used
and updated across multiple components within your application, the `useReducer`
hook can come in handy.

> TL;DR &ndash; The `useReducer` hook is for setting and managing state logic
> that is too complex for the `useState` hook. It accepts a reducer function to
> handle state updates.

## When to use useReducer over useState?

- When you are dealing with complex state objects
- If multiple components can update state
- If next state depends on previous state
- Your overall react app architecture is complex

## Basic usage of useReducer

The useReducer hook takes a reducer function and some initial state and returns
an array with a state variable and dispatch function. In comparison to setState
the state variable is the current state and the dispatch function is used to set
state. The big difference is that setState in the useState hook takes the new
state whereas the dispatch acception an action.

### What is a reducer action?

A reducer action is a JavaScript object that describes the state change. A
`type` property is required on all actions as this is what will tell the reducer
how to update state (this is conventionally written as an uppercase string). An
optional `payload` property is used to send some additional data that pertains
to the state change.

> A reducer action is a JavaScript object that describes the state change.

Putting this all together we can write a simple component that uses `useReducer`
for setting the first name:

```jsx
const initialState = { firstName: "" }

const reducerFn = (state, action) => {
  switch (action.type) {
    case "SET_FIRST_NAME":
      return {
        ...state,
        firstName: action.payload,
      }
    default:
      return state
  }
}

const Component = () => {
  const [state, dispatch] = useReducer(reducerFn, initialState)
  return (
    <div>
      <div>{state.firstName}</div>
      <button
        onClick={() => dispatch({ type: "SET_FIRST_NAME", payload: "Dwight" })}
      >
        Set name
      </button>
    </div>
  )
}
```

## Does useReducer replace Redux?

The useReducer hook by itself does not replace Redux because it does not create
a global store. You can have multiple state objects in your react application
that are isolated from each other, which violates Redux's
[single source of true principle](https://redux.js.org/understanding/thinking-in-redux/three-principles#single-source-of-truth).

Combining `useReducer` with `React.Context` can get you closer to replicating
most of Redux’s functionality because you can store all of your state in a
global context.

## Using useReducer with React.Context

Combining `React.Context` with `useReducer` allows you to have global state with
reducer state updates. This is a great alternative to Redux that’s built right
into React.

```jsx
import { createContext, useReducer, useContext } from "react"

const todosDefaultState = {
  todos: [],
}

function todosReducer(state = todosDefaultState, action = {}) {
  switch (action.type) {
    case "NEW_TODO":
      return { ...state, todos: [...state.todos, action.payload] }
    case "COMPLETE_TODO":
      const updatedTodos = state.todos.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, done: true }
        } else {
          return todo
        }
      })
      return { ...state, todos: updatedTodos }
    default:
      return state
  }
}

const StoreContext = createContext(null)

export function StoreProvider({ children }) {
  const [todosState, todosDispatch] = useReducer(
    todosReducer,
    todosDefaultState
  )
  return (
    <StoreContext.Provider value={{ todosState, todosDispatch }}>
      {children}
    </StoreContext.Provider>
  )
}

export const useStore = () => useContext(StoreContext)
```

You can wrap your entire application with the `StoreContext.Provider` component
and have direct access to it's state and dispatch functions.


How to use the useReducer hook in React


There are times when you write code that has a chance to produce errors. This
can be from external reasons like user input error or maybe an API call. When
your code throws an error or an exception your code execution will be stopped.
Using a try…catch statement can help with these scenarios causing your code to
continue running after an error is thrown.

> TL;DR Wrap any code that could potentially produce errors in a try catch block
> to handle any thrown errors and avoid stopping the execution of your code.

## How to use the “try…catch” statement

Code that is run in the try block will first run. if any errors or exceptions
are thrown, the catch block will “catch” them so they can be handled.

We can manually throw an error to explain how the try catch statement works:

```js
try {
  throw new Error("Hello I'm an error 😈")
} catcn (error) {
  console.error(error);
}

// console: Hello I'm an error 😈
```

Code can continue to run after an error is thrown because it is caught and
handled. Unhandled errors and exceptions will immediately stop the execution of
our code. This is what makes the use of try catch statements useful.

## A practical example using “try…catch”

We can catch a possible api error with the async await syntax inside of our
try…catch.

```js
async function getUser() {
  try {
    const username = document.querySelector("input").value
    const res = await axios.get(`http://example.com/posts/${username}`)
    return await res.json()
  } catch (error) {
    console.error(error.message)
  }
}
```

We can catch any errors that may happen in our try block, whether it’s a missing
input selection or api failure, our catch block will handle the error and will
allow our code to continue to be run.


Catching errors using try catch blocks in JavaScript.

How to use try...catch statement in JavaScript


The most powerful thing about JavaScript is that you can use it to manipulate
web pages. No other programming language has this capability. A foundational
part is being able to select specific elements of a web page.

Understanding what’s known as the “DOM Tree” will help understanding this
method.

<img src={"/images/dom-tree.svg"} />

All elements on a page are represented in a tree-like structure. The `document`
is the top most parent and all elements under it are children. Each element is
referenced as a “node”, which is an object that contains the data for that HTML
element.

## .querySelector()

The `.querySelector()` method is a simple way to select elements of a page.

By using the `.querySelector()` method on the `document` you can target any HTML
node on the page. It takes one parameter, a string of
[CSS selector syntax](https://www.w3schools.com/cssref/css_selectors.asp), and
`returns` the first node that matches the provided selector.

```
const title = document.querySelector(‘.article-title’);
//<h2>My Title</h2>
```

Keep in mind that it only returns one element, which is the first one that was
matched while traversing the DOM tree. If you want to return every element that
matches the provided selection use the `.querySectorAll()` method.

## .querySelectorAll()

The `.querySelectorAll()` method returns an array of all elements that match the
provided selector.

```
const title = document.querySelectorAll(‘.article-title’);
// [h2.article-title, h2.article-title, h2.article-title];
```

## Scoped querySelector

When using `document.querySelector()` the traversal starts at the `document`
node. This can be a really expensive operation if the document has many nodes.
If you know the specific elements you want to select live under a specific node
then you can start at that node. This is because the querySelector method is
inherited through all html DOM nodes.

> Important! All dom nodes inherit the .querySelector() and .querySectorAll()
> methods.

```
const articlesWrap = document.querySelector('.all-articles-wrap');
const allArticlesTitles = articlesWrap.querySelectorAll('.article-title');
```

By running the `.querySelectorAll()` method on the `articlesWrap` node the
traversal starts at that node rather than searching the whole document tree.
This can greatly improve the performance of this operation.


How does the document.querySelector() method work?

How to use the querySelector method in javascript.


There are times when you need to access data from DOM elements. You can attach
the data to any attribute name you want but using the `data-` prefix will yield
some additional functionality that can be quite powerful.

```html
<div class="person" data-first-name="John">…</div>
```

## Getting Data Attributes on HTML Nodes

You can access a special JavaScript object on any html node called `dataset`
This object represents the attributes on the HTML element that are prefixed with
`data-`

Data attributes are stripped of the `data-` prefix and added to the `dataset`
object.

```html
<div class="person" data-first-name="John" data-last-name="Smith">…</div>
```

```js
const person = document.querySelector(".person")
console.log(person.dataset)

// { firstName: 'John', lastName: 'Smith' }
```

> Note: Data values are stored and retrieved as strings.

Depending on how the data attribute is named will depend on how it is set to the
dataset object:

- kebab-case `data-first-name` → `dataset.firstName`
- camelCase `data-lastName` → `dataset.lastname`
- snake_case `data-middle_name` → `dataset.middle_name`

## Setting Data Attributes in JavaScript

Adding values to the dataset object will result on their respective attributes
on the html node.

```html
<div class="animal">...</div>
```

```js
const animal = document.querySelector(".animal")
animal.dataset.type = "lion"
```

Result:

```html
<div class="animal" data-type="lion">...</div>
```

## Summary

Accessing and setting data attributes is a powerful technique to manage data
between the DOM and JavaScript.


How to get and set data attributes on HTML elements with JavaScript.