DEV Community: Yash Nirmal

A Simple Guide to Making a Custom React Hook

Yash Nirmal — Mon, 06 Nov 2023 07:01:26 +0000

Introduction

Today we'll work on creating a custom counter hook that encapsulates counter logic and allows us to build reusable and efficient components.

Our custom counter hook will provide functionalities to increase, decrease, and reset a counter value. Additionally, it will expose the current count value, allowing components to display it and interact with it effortlessly.

Code

1. useCounter.js

To begin our journey, let's create a new file in your favorite code editor and name it something like useCounter.js(you can name your hook anything just make sure to put 'use' in the beginning like useMyHook.js, useHookName, etc).

Now, let's implement our custom counter hook using the power of React's useState hook. Inside, write the following code

// useCounter.js

import { useState } from 'react';

export const useCounter = (value = 0) => {
  const [count, setCount] = useState(value);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(value);
  };

  return { count, increment, decrement, reset };
};

In this code snippet, we import the useState hook from React. Our useCounter custom hook accepts an optional value parameter, with a default value as 0

Inside the hook, we create a count state variable using useState, initialized with the value. We then define three functions: increment, decrement, and reset. These functions use the setCount function to update the count state variable.

The increment function increases the count value by 1, decrement decreases it by 1, and reset sets it back to the value.

Finally, our custom hook returns an object containing the count value, as well as the increment, decrement, and reset functions. By returning this object, we enable any component using our custom hook to access and control the counter's state easily.

2. Using our Custom Counter Hook

Now, let's see our custom counter hook in action! Create a new react component (I have named my component CounterComponent.js), and let's build a simple counter component that leverages the power of our custom hook.

import React from 'react';
import { useCounter } from 'path/to/useCounter';

export default function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

In this component, we import our custom hook useCounter and invoke it to initialize the count variable, as well as the increment, decrement, and reset functions.

We then render the current count value within a <h2> tag, and provide three buttons: "Increment," "Decrement," and "Reset." By associating the respective functions with the buttons' onClick event handlers, we allow users to interact with the counter and trigger the desired actions.

Conclusion

Woohoo! We have successfully built our first custom hook in React. Now you can effortlessly create numerous counters throughout your application without duplicating code or compromising maintainability.

Thanks for being till the end. Checkout my other blogs below👇

https://dev.to/yashnirmal

Browser storage - Localstorage, cookies and session

Yash Nirmal — Thu, 02 Nov 2023 07:00:27 +0000

Introduction

In web development, there are a lot of times when we have to store some user data on the browser storage to make our website more user-friendly. Data like user preferences(like dark or light theme, website language, etc.), session management, and user tokens. This makes knowing about browser storage an essential part of web development.

This blog aims to provide a detailed overview of browser storage mechanisms, specifically localStorage, cookies, and sessions. We will explore their differences, use cases, and provide code examples to help you understand and utilize them effectively in your web applications.

What is Browser Storage?

Before diving into specific storage mechanisms, it's essential to understand the concept of browser storage. Browser storage refers to the ability of web browsers to store and retrieve data on the client side, i.e., the user's device. This data can persist across browser sessions and is accessible by web applications.

1. LocalStorage

LocalStorage is an API provided by modern web browsers that allow web applications to store key-value pairs persistently on the client side. The data stored in localStorage remains intact even after closing the browser or restarting the device.

Storing and Retrieving Data

To store data in localStorage, you can use the setItem() method, providing a key-value pair. To retrieve data, use the getItem() method, passing the key associated with the desired value.

// Storing data in localStorage
localStorage.setItem("username", "JohnDoe");

// Retrieving data from localStorage
const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

Tips and Best Practices

Use localStorage for storing non-sensitive data, such as user preferences or cached data.
Remember that localStorage has a storage limit of around 5MB per domain. Avoid storing excessively large or unnecessary data.

2. Cookies

Cookies are small pieces of data that websites store on a user's device. They are sent back and forth between the web server and the browser on each request, allowing the server to maintain stateful information about the user.

Storing and Retrieving Data:

Cookies can be set by the server or manipulated directly by JavaScript. To set a cookie, you need to include a Set-Cookie header in the server's response. To read a cookie value, use the document.cookie property.

// Setting a cookie
document.cookie = "username=JohnDoe; expires=Sun, 26 May 2024 00:00:00 UTC; path=/";

// Retrieving a cookie value
const cookies = document.cookie.split("; ");
const usernameCookie = cookies.find

(cookie => cookie.startsWith("username="));
const username = usernameCookie.split("=")[1];
console.log(username); // Output: JohnDoe

Tips and Best Practices

Use cookies when you need to maintain session-related information or pass data between the client and the server.
Be cautious with storing sensitive information in cookies. Consider encryption or session tokens to enhance security.

3. Sessions

Sessions provide a way to store user-specific data on the server-side while associating it with a unique session identifier stored on the client-side (usually as a cookie). Session data is typically stored in server memory, a database, or an external data store.

Storing and Retrieving Data

To store and retrieve session data, the server generates a session ID and associates it with the user's data on the server-side. The session ID is sent back to the client and stored as a cookie. On subsequent requests, the client sends the session ID, allowing the server to identify and retrieve the associated session data.

// Server-side pseudocode (using Express.js)
const sessions = {};

app.post("/login", (req, res) => {
  // Perform authentication and user retrieval
  const user = { id: 1, username: "JohnDoe" };

  // Generate a session ID
  const sessionId = generateSessionId();

  // Store user data in session
  sessions[sessionId] = user;

  // Set the session ID as a cookie
  res.cookie("sessionId", sessionId);

  // Redirect to the home page
  res.redirect("/");
});

// Retrieving session data
app.get("/", (req, res) => {
  const sessionId = req.cookies.sessionId;
  const user = sessions[sessionId];

  // Use the user data as needed
});

Tips and Best Practices:

Sessions are suitable for storing sensitive user data securely on the server-side.
Implement proper session management, including session expiration and secure session handling practices.

Which storage you should choose?

This depends mainly on 2 things your use-case and how much security you need. Let's talk about both

1. What is your use-case?

localStorage: Ideal for storing non-sensitive user preferences or caching data on the client-side.
Cookies: Useful for maintaining session-related information, user identification, and tracking.
Sessions: Recommended for storing sensitive user data securely on the server-side.

2. Security and Privacy

localStorage: Data stored in localStorage is accessible by any script running in the same origin. Be cautious with sensitive information.
Cookies: Can be marked as secure and have additional security options. However, cookies are vulnerable to attacks like cross-site scripting (XSS) and cross-site request forgery (CSRF).
Sessions: Storing data on the server-side provides better security compared to client-side storage mechanisms. However, proper session management is crucial to prevent session hijacking and other vulnerabilities.

Conclusion

In this article, we explored localStorage, cookies, and sessions, discussing their differences, use cases, and best practices with code examples.

Thanks for being till the end. Checkout my other blogs below👇

https://dev.to/yashnirmal

Also, if you guys want me to write a blog on any other javascript topic, write in the comments. Also, share your views on how this article was.

A simplified guide to Async/Await

Yash Nirmal — Thu, 02 Nov 2023 06:47:30 +0000

Introduction

Asynchronous programming is a crucial concept in JavaScript, allowing developers to execute tasks without blocking the main execution thread. There are a few approaches to handling asynchronous tasks in javascript, but the best one and also the newest one is async/await. async/await can sometimes also be tricky especially if you are new to JS. In this blog, we will explore the async/await syntax in the simplest way possible.

Understanding Asynchronous JavaScript

JavaScript is a single-threaded language, meaning it can only execute one task at a time. However, there are certain tasks, such as making HTTP requests, reading/writing files, or waiting for user input, that can be time-consuming and may cause the program to halt if executed synchronously. Asynchronous programming addresses this issue by executing these time-taking tasks concurrently with the rest of the program, allowing other parts of the program to continue running.

Introducing async/await:

To simplify asynchronous code and make it more readable, ECMAScript 2017 (ES8) introduced the async/await syntax. It provides an easy way to write asynchronous code that closely resembles synchronous code.

Async Functions

An async function is a special function that contains asynchronous code. It allows the use of the await keyword inside it. The await keyword can only be used within an async function, making it an essential part of asynchronous JavaScript programming.

To declare an async function, you can use the async keyword before the function declaration. For example:

async function fetchData() {
  // Asynchronous code goes here
}

Await Keyword

The await keyword can be used to pause the execution of an async function until the asynchronous task is completed. It helps in writing asynchronous code that looks and behaves more like synchronous code, enhancing code readability. Consider the following example that fetches data from an API:

async function fetchData() {
    console.log("Printed before await")
      // await keyword stops the execution of the next lines written after it until the async task(fetch request is not fulfilled)
    const response = await fetch('https://fakestoreapi.com/products');
    const data = await response.json();

    console.log("Printed only after the async fetch request is completed")
  }

fetchData()

In the above code snippet, the await keyword is used to wait for the fetch() function to complete and return a response. Then, the await keyword is used again to wait for the JSON data to be extracted from the response.

Error Handling

Async functions can also handle errors using try-catch blocks. If an error occurs during the execution of the await expression, the control flow jumps to the catch block, allowing error handling. Here's an example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

In the code above, any error occurring during the fetch() or response.json() operations will be caught and logged in the catch block. This makes error handling more straightforward and avoids deeply nested error callbacks.

Sequential Execution

While parallel execution is beneficial for independent tasks, there are scenarios where we need to execute asynchronous operations sequentially, where each operation depends on the result of the previous one. Async/await allows us to achieve this easily. Here's an example:

async function fetchData() {
    try {
      const result1 = await fetch("https://fakestoreapi.com/products");
      const data1 = await result1.json();

      // below fetch call is dependent on above fetch call, since it takes the ouput of the above fetch call
      // below fetch is only executed once the above code execution is complete
      const result2 = await fetch(`https://fakestoreapi.com/products/${data1[0].id}`);
      const data2 = await result2.json();

      console.log(data2);
    } catch (error) {
      console.error('Error:', error);
    }
}

fetchData()

In the above code, the 2nd fetch is taking the input of the first fetch call.

Async/Await with Promises

Async/await is built on top of promises and can be used in conjunction with them. If you have existing code that uses promises, you can still benefit from async/await syntax. Here's an example:

function fetchData() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

In the code above, fetchData() returns a promise, and it can be seamlessly integrated with async/await by using the await keyword.

Conclusion

The async/await syntax simplifies asynchronous code by providing a more readable and manageable approach, reducing callback complexity. By using async functions and the await keyword, developers can write asynchronous code that closely resembles synchronous code, making it easier to understand and maintain.

Incorporate async/await into your JavaScript projects to improve code quality, enhance productivity, and unlock the full potential of asynchronous programming.

Also, if you guys want me to write a blog on any other javascript topic, write in the comments. Also, share your views on how this article was.

Thanks for being till the end. Follow me for more.