DEV Community: Ashish Kankal

Next 13 Migration Case Study: useRouter vs useRouter

Ashish Kankal — Sun, 18 Jun 2023 11:15:57 +0000

In this article, we will learn how to share components between the Pages and the App Router which uses useRouter hook.

Next 13 has released the new App router.

The Next.js 13 App Router offers several advantages over the previous Pages Router, including:

Nested layouts: The App Router allows you to define layouts that can be nested within each other, making it easier to create complex and reusable UIs.
Server components: The App Router allows you to fetch data directly in server components, which can improve performance and SEO.
Streaming: The App Router supports streaming of data, which can improve the user experience for applications that require real-time updates.
Error handling: The App Router provides a more robust error handling mechanism than the Pages Router.
Parallel routes: The App Router allows you to define parallel routes, which can improve performance for applications that have multiple paths that can be navigated to at the same time.

And many more...

Migrating to App Router

Migrating to App Router is not a one-step process. It has few steps involved (mentioned here) and might be complex depending on the application code.

useRouter vs useRouter

Looks same!
The useRouter hook is used in the components used inside pages directory as:

import { useRouter } from 'next/router'

However, in the new App Router, the useRouter hook needs to be imported from next/navigation

import { useRouter } from 'next/navigation'

This makes it difficult to share components between pages and app directory.

How to share Components between App router and Pages router?

Its still possible to share components between pages and app directory. This can be achieved by creating a custom hook and the context.

Creating a context

We will need to create a context which will store the information whether the page is inside pages directory or app directory.

// lib/next-router-context
"use client";

import { createContext } from "react";

export const NextRouterContext = createContext({});

const NextRouterContextProvider = ({ children, value }: any) => (
  <NextRouterContext.Provider value={value}>
    {children}
  </NextRouterContext.Provider>
);

export default NextRouterContextProvider;

Creating a custom `useRouter` hook

The custom useRouter hook will export the usePageRouter or useAppRouter based on the context set in NextAppRouterContext:

//hooks/useRouter.ts
"use client";
import { useContext } from "react";
import { NextAppRouterContext } from "./NextAppRouterContext";
import { useRouter as usePageRouter } from "next/router";
import { useRouter as useAppRouter } from "next/navigation";

const useRouter = () => {
  const context = useContext(NextAppRouterContext);
  const router = context === "app" ? useAppRouter : usePageRouter;
  return { ...router(), context };
};

export default useRouter;

Final Step

Wrap the children in the pages and app directory with NextAppRouterContext.Provider:

Page Router

// pages/_app.js
import NextRouterContextProvider from "@/lib/next-router-context";

 export default function MyApp({ Component, pageProps }) {
  return (
    <NextRouterContextProvider value="page">
      <Component {...pageProps} />
    </NextRouterContextProvider>
  )
}

App Router

/// app/layout.tsx
import NextAppRouterContextProvider from '@/lib/next-router-context'
import '@/styles/globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAppRouterContextProvider value="app">
        {children}
        </NextAppRouterContextProvider>
        </body>
    </html>
  )
}

And Thats it! Now you can share the components between the pages and app router. Just import the custom useRouter defined as above.

Checkout the complete example here

RESTful vs RESTless systems

Ashish Kankal — Tue, 06 Jun 2023 17:49:33 +0000

What is REST?

REST, or Representational State Transfer, is an architectural style for designing distributed hypermedia systems. It is based on the use of HTTP verbs to represent different actions, such as:

GET for retrieving data
POST for creating data
PUT for updating data, and
DELETE for deleting data

RESTful systems use URIs to identify resources, and they use HTTP headers to provide additional information about the resource, such as its content type.

Advantages of using RESTful systems:

Scalability: RESTful systems are scalable because they are based on the use of HTTP, which is a well-established and widely-supported protocol.
Flexibility: RESTful systems are flexible because they can be used to create a wide variety of applications.
Reusability: RESTful systems are reusable because they can be used to create different parts of an application independently.

RESTless systems are not fully RESTful. They may use HTTP verbs and URIs, but they may not use them in a consistent way. For example, a RESTless system might use the GET verb to create data, or the POST verb to retrieve data.

Hence, RESTful is a great choice for building web services. It is easy to learn and use, and it provides a solid foundation for building scalable and maintainable applications. If you are looking for a way to build web services, I highly recommend using RESTful.

Top 6 Iteration Methods in Javascript

Ashish Kankal — Tue, 06 Jun 2023 17:37:59 +0000

In JavaScript, there are a variety of iteration methods that can be used to loop through arrays, objects, and other iterable data structures. These methods allow you to perform tasks such as iterating over each element in a collection, filtering elements based on a condition, and reducing a collection to a single value. Lets look at some of the frequently used methods:

for...of loop

The for...of loop is a versatile iteration method that can be used to iterate over any iterable object, such as an array, object, or generator function.

Here is an example of how to use the for...of loop to iterate over an array and print out each element:

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}

forEach() method

The forEach() method is a method that can be used to iterate over an array and execute a function for each element in the array.

Here is an example of how to use the forEach() method to iterate over an array and print out each element:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  console.log(number);
});

map() method

The map() method is a method that can be used to iterate over an array and create a new array based on the results of a function.

Here is an example of how to use the map() method to create a new array that contains the square of each number in the original array:

const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(number => number * number);
console.log(squares);

reduce() method

This method reduces an array to a single value by applying a provided function to each element in the array.

Here is an example of how to use the reduce() method to compute the sum of the array numbers:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

filter() method

filter method can be used to filter out elements from an array based on a specific criteria. This can be very useful for a variety of tasks, such as data validation, filtering search results, and more.

Here is an basic example of filter, in which strings array is filtered for the elements which has length greater than or equals to 5:

const strings = ["hello", "world", "goodbye"];

const longStrings = strings.filter(string => string.length >= 5);
console.log(longStrings); // ["hello", "world"]

some() method

some takes an array and a function as arguments. The function is called on each element of the array;

If the function returns true, the method returns true.
If the function returns false for all elements of the array, the method returns false

Here is the example explaining the usage of some(...):

const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true

every() method

every takes an array and a function as arguments. The function is called on each element of the array, and

If the function returns false for any element, the method returns false.
If the function returns true for all elements of the array, the method returns true

Here is the example explaining the usage of every(...):

const numbers = [1, 2, 3, 4, 5];

const allEvenNumbers = numbers.every(number => number % 2 === 0);
console.log(allEvenNumbers); // false

Lifecycle methods alternative in React functional components

Ashish Kankal — Mon, 05 Jun 2023 18:06:45 +0000

Lifecycle methods are functions that are called during different stages of a component's lifecycle. They can be used to perform tasks such as fetching data, setting up event listeners, and cleaning up resources.

Here are some of the most common lifecycle methods:

componentDidMount(): This method is called after the component has been mounted to the DOM. It is a good place to do things like fetch data or set up event listeners.
componentDidUpdate(): This method is called after the component has been updated. It is a good place to do things like re-render the component or update the state.
componentWillUnmount(): This method is called before the component is unmounted from the DOM. It is a good place to do things like clean up resources or unsubscribe from event listeners.

How to reproduce the behaviour using hooks?

In React 16.8, React introduced Hooks, which are a new way to use state and lifecycle features in functional components. Hooks are designed to be more flexible and easier to use than lifecycle methods, so they are the recommended way to write React components.

Executing code on mount using hook (componentDidMount)

import React, { useEffect } from 'react';

const MyFunctionalComponent = () => {
  useEffect(() => {
    // This code will run only once when the component mounts
    // Perform any side effects here, such as API calls or event subscriptions

  }, []); // The empty dependency array ensures that this effect only runs once

  return (
    <div>Hello World!</div>
  );
}

Remember: The Empty Dependency Array

Executing code on props update using hook (componentDidUpdate)

import React, { useEffect } from 'react';

const MyFunctionalComponent = ({prop1, prop2}) => {
  useEffect(() => {
    // The dependency array ensures that this effect runs when either prop1 or prop2 is updated.

  }, [prop1, prop2]);

  return (
    <div>Hello World!</div>
  );
}

Executing code before unmount using hook (componentDidUpdate)

import React, { useEffect } from 'react';

const MyFunctionalComponent = () => {
  useEffect(() => {

    return () => {
      // This code will run when the component is unmounted
      // Perform any cleanup tasks here, such as canceling API requests or unsubscribing from events
    };

  }, []);

  return (
    <div>Hello World!</div>
  );
}

Example illustrating all the three side-effects together

const UpCounterExample =()=> {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This effect will run once after the component mounts,
    // and then again whenever the `count` state variable changes.
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [count]);

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
    </div>
  );
}

In this example, the useEffect hook is used to create a timer that increments the count state variable every second. The useEffect hook takes two arguments: a callback function and an array of dependencies. The callback function is executed whenever any of the dependencies change. In this case, the only dependency is the count state variable.

Conclusion

Hooks are a powerful tool that can be used to improve the performance and readability of React components. They allow you to perform side effects in a way that is both predictable and efficient. By understanding how hooks work, you can write more reusable and maintainable code.

Here are some additional points to consider:

Hooks are a relatively new feature in React, so there may be some learning curve involved. However, the benefits of using hooks are well worth the effort.
There are a number of different hooks available, each with its own specific purpose. It is important to choose the right hook for the job.
Hooks can be used to improve the performance of React components by reducing the number of unnecessary re-renders.
Hooks can also be used to improve the readability of React components by making it easier to understand how they work.

If you are new to React, I encourage you to learn more about hooks. They are a powerful tool that can help you write better React code.

Understanding Promises in JS

Ashish Kankal — Mon, 05 Jun 2023 17:42:24 +0000

What are Promises?

Promises are a way of handling asynchronous code in JavaScript. Asynchronous code is code that runs in the background and doesn't return until it's finished. This can be things like loading a web page, fetching data from a database, or making an API call.

Promises let you write code that's more organised and easier to read. They also make it easier to handle errors.

How do Promises Work?

A promise is an object that represents the eventual completion or failure of an asynchronous operation. It has three states: pending, fulfilled, and rejected.

When a promise is pending, it hasn't finished yet.
When a promise is fulfilled, it has finished successfully.
When a promise is rejected, it has finished unsuccessfully.

You can create a promise using the new Promise() constructor. The constructor takes a function as its argument. This function is called the promise's resolver. The resolver function is responsible for setting the promise's state to fulfilled or rejected.

Lets understand the promise by the following example:

const promise = new Promise((resolve, reject) => {
  // Do something asynchronous here.
  // After the execution is finished, call `resolve()` or `reject()`.
});

How to Use Promises?

Once you have a promise, you can use it to do things like:

Wait for the asynchronous operation to finish.
Check the status of the asynchronous operation.
Handle errors that occur during the asynchronous operation.

To wait for the asynchronous operation to finish, you can use the then() method. The then() method takes two functions as its arguments. The first function is called when the promise is fulfilled. The second function is called when the promise is rejected.

Here's an example of how to use the then() and catch() method:

// Resolve a promise with a value
const promise1 = new Promise((resolve, reject) => {
  resolve('Hello, world!!');
});

promise1.then(value => console.log(value)); 
// logs "Hello, world!!"

// Reject a promise with an error
const promise2 = new Promise((resolve, reject) => {
  reject(new Error('Something went wrong'));
});

promise2.catch(error => console.log(error)); 
// logs "Something went wrong"

Conclusion

Promises are a powerful tool for handling asynchronous code in JavaScript. They make your code more organised and easier to read. They also make it easier to handle errors.

If you're new to promises, I encourage you to learn more about them. There are many resources available online, including tutorials, articles, and blog posts.

I hope this blog post has helped you understand promises.

DEV Community: Ashish Kankal

Next 13 Migration Case Study: useRouter vs useRouter

Migrating to App Router

useRouter vs useRouter

How to share Components between App router and Pages router?

Creating a context

Creating a custom useRouter hook

Final Step

RESTful vs RESTless systems

What is REST?

Advantages of using RESTful systems:

Top 6 Iteration Methods in Javascript

for...of loop

forEach() method

map() method

reduce() method

filter() method

some() method

every() method

Lifecycle methods alternative in React functional components

How to reproduce the behaviour using hooks?

Executing code on mount using hook (componentDidMount)

Executing code on props update using hook (componentDidUpdate)

Executing code before unmount using hook (componentDidUpdate)

Example illustrating all the three side-effects together

Conclusion

Understanding Promises in JS

What are Promises?

How do Promises Work?

How to Use Promises?

Conclusion

Creating a custom `useRouter` hook