DEV Community: Ritesh Kumar

Next js + 3D elements with spline

Ritesh Kumar — Thu, 18 Apr 2024 19:56:04 +0000

                      INTRODUCTION

Integrating 3D elements into Next.js projects using Spline can transform your web development experience. Spline, a powerful tool for designing and animating 3D graphics, can be seamlessly incorporated into Next.js, a React-based framework. This combination not only enhances the visual appeal of your applications but also engages users with interactive and immersive experiences. Learn how to elevate your web projects by integrating 3D designs from Spline into your Next.js applications.

          Start by introducing the key technologies.

Next.js: A powerful React framework for building server-side rendering and static web applications.
Spline: A tool to create and manipulate 3D scenes that can be directly used in web applications.
PNPM: An efficient package manager that saves disk space and boosts installation speed.

      Step-by-Step Integration of Spline into Next.js

Setting Up Your Next.js Project:

Start by creating a new Next.js project using the command below. This setup utilizes npx, which is included with npm 5.2+ and higher.



npx create-next-app my-3d-dashboard
cd my-3d-dashboard

Choosing a Package Manager:

For managing dependencies, you can choose from npm, Yarn, or PNPM. Here, we'll use PNPM for its efficiency in handling node modules.



pnpm i

Running Your Development Server:

To start the development server and begin working on your project.



pnpm dev

This command serves your project at http://localhost:3000, making it accessible via a web browser.

Add Spline-React Library:

To incorporate Spline models into your Next.js project, you'll first need to add the Spline-React library, which facilitates the embedding of Spline models into React applications. Install the library using PNPM:



pnpm add @splinetool/react-spline

Embed the Spline Model:

With the library installed, you can now embed your Spline model into a Next.js component. Here's a simple example of how to do it:



import Spline from '@splinetool/react-spline';

export default function Home() {
    return (
        <div style={{ height: '100vh' }}>
            <Spline scene="https://prod.spline.design/i8eNphGELT2tDQVT/scene.splinecode" />
        </div>
    );
}

Optimizing Performance:

Using 3D models can be resource intensive. To ensure your Next.js application remains performant:

Lazy Load Components: Consider lazy loading the Spline component using Reacts Suspense and lazy features to split the bundle and only load the 3D model when needed.
Use Efficient File Formats: When exporting from Spline, choose options that optimize the file size without compromising the visual quality.

Implement Caching Strategies: Utilize service workers and caching strategies to cache the assets locally for faster subsequent loads.

Deployment and Scaling:

When you’re ready to deploy your Next.js application with Spline integration:

Choose a Suitable Hosting Platform: Platforms like Vercel (optimized for Next.js) or Netlify offer global CDN, asset compression, and more to improve load times.

Monitor Resource Usage: Keep an eye on the resource usage and optimize as necessary to handle increased traffic without degrading the user experience.

By integrating Spline into your Next.js projects, you can create visually engaging and interactive web experiences that stand out. Whether it’s for dashboard visualizations, interactive advertisements, or engaging educational content, the combination of Next.js and Spline offers a powerful toolkit for creative web development. Continue to explore and experiment with different 3D designs and animations to fully leverage the capabilities of both platforms.

Connect me on Twitter:-
https://twitter.com/nyctonio

Do check out my GitHub for source code: -
GitHub: - https://github.com/nyctonio/nextjs-spline-hero

Connect on linkdin:-
linkdin :- https://www.linkedin.com/in/nyctonio

Lets Explore LSM Tree

Ritesh Kumar — Fri, 10 Nov 2023 10:08:00 +0000

The LSM Tree, or Log-Structured Merge-Tree, is a data structure and algorithm used in computer science, particularly in database management systems. It's renowned for its efficiency in handling large volumes of write operations, making it a popular choice for write-intensive applications like logging systems, time-series databases, and NoSQL databases.

Understanding LSM Trees

Concept and Design

The LSM Tree was designed to address the inefficiency of random write operations in traditional database systems. In a standard database, every write operation can lead to random access on the disk, which is slow. LSM Trees turn these random writes into sequential writes, which are much faster.

The core idea of an LSM Tree is to initially write data in a memory buffer, which is fast. Once this buffer is full, its content is written to disk in a sequential manner. This process is called a "flush." The data on the disk is stored in multiple layers (also called "levels"), and each level is larger than the previous one.

Compaction and Merging

To manage these levels and avoid data duplication, LSM Trees use a process called "compaction." Compaction involves merging several sorted files into one while removing duplicates and deleted entries. This keeps the data on the disk organized and ensures efficient usage of storage space.

Read Operations

For read operations, LSM Trees can be less efficient than other data structures because the data might be spread across different levels. To mitigate this, LSM Trees often use additional structures like Bloom filters to quickly determine if a key is present in a level without having to search the entire dataset.

Why Use LSM Trees?

Advantages

High Write Throughput: LSM Trees are excellent for scenarios with a high volume of write operations. They reduce the need for random disk I/O by turning these into sequential writes.
Efficient Storage Utilization: Through compaction, LSM Trees effectively manage disk space, reducing redundancy and removing deleted data.
Tunability: They offer various tuning parameters, like the size of the memory buffer and the compaction strategy, allowing optimization based on specific application needs. Disadvantages
Read Performance: The read performance can be slower, especially if the data is spread across multiple levels. Write Amplification: Due to compaction, the same data might be written to the disk multiple times, leading to write amplification, which can wear out SSDs faster.

Use Cases

LSM Trees are widely used in NoSQL databases like Apache Cassandra and HBase, and logging systems where write performance is crucial. They are also suitable for time-series databases and applications dealing with large-scale logging or sensor data.

Conclusion

In summary, LSM Trees are a powerful tool for managing high volumes of write operations efficiently. While they have some trade-offs, particularly in read performance, their advantages in write throughput and storage management make them a popular choice in many modern database and storage systems. Their design is a testament to the ingenuity in computer science to solve specific challenges in data management, particularly in an era where data volume and velocity are ever-increasing.

Understanding Skip Lists

Ritesh Kumar — Thu, 09 Nov 2023 10:56:10 +0000

First Lets try to understand why do we need skip lists?

Lets suppose we have a sorted linked list which looks something like this 👇

1 --> 2 --> 3 --> 4 --> 5 --> 6 --> 7 --> 8 --> 9

Sorted linked lists are known for maintaining elements in a sorted order. Despite their simplicity, they have a critical limitation: searching for an element has a time complexity of O(n) because we have to move from one node to other and keep doing it till we don't get the desired value, which can be inefficient for large datasets.

So what can we do????

What we can do is we can create one more lane something like this 👇

1 --------------------------------------------- 9
|                       |                       |
1 --> 2 --> 3 --> 4 --> 5 --> 6 --> 7 --> 8 --> 9

Now if we want to search for 7 what we can do we will go from 1 to 5 and then we can search 7 so this will reduce the overall time complexity.

So basically skip lists were introduced as a scalable alternative to sorted linked lists and balanced trees. They allow for faster search operations, typically offering O(log n) complexity, by adding additional forward pointers and levels to the traditional linked list structure.

Implementing skip lists involves creating nodes with forward pointers that span multiple layers. The number of layers and the distance each pointer skips are usually determined randomly.

Skip lists are an elegant solution that combines the simplicity of linked lists with the efficiency of balanced search algorithms. They are a powerful tool for managing sorted data structures in a scalable and efficient manner.

Unlocking the Power of Consistent Hashing: The Key to Scalable 🚀, Fault-Tolerant Distributed Systems 💻

Ritesh Kumar — Tue, 07 Nov 2023 11:33:56 +0000

Consistent Hashing isn't just a buzzword 🫠, it's the secret sauce behind the magic of distributed computing. Imagine a world where your data effortlessly flows across a dynamic network of servers 📺, adapting seamlessly to scale and resilience. That's the promise of Consistent Hashing, the elegant technique that keeps modern systems cool, efficient, and ready for whatever challenges the digital cosmos throws their way.

Picture a cosmic ring, where data and nodes dance together. With a twist of the hash function, data finds its perfect partner on this celestial ring, ensuring even load distribution and zero hotspots. But here's where it gets cool: when a new server joins the party or an old one takes its leave, only a fraction of data needs to groove to a new beat, keeping disruption to a minimum.

So, let's dive deeply 👇

Why do we need a hashing function????

Ohk so let's start with very basic if you want to map N no of keys how will you do that ?. One of the very basic approach will be like this 👇

But the problem with this approach is that if we have a very big number of possible keys this approach will lead to a lot of Memory wastage.

We can fix this by using a hashing algorithm or a hashing function whatever you want to call it.

Hash functions are efficient because they need less memory and have fast lookup and insertion times, averaging O(1) complexity. They turn large or variable-sized inputs into a fixed-size output, making them space-efficient compared to direct address tables that need space for the entire range of possible keys. While worst-case time complexity can worsen, especially if many collisions occur, proper design keeps operations swift and memory use proportional to the actual number of entries, generally O(n).

First let's understand what normal hashing or called as static or modular hashing is suppose you have n servers and N no of keys so you will have [n-1] buckets the mapping of keys is done with a hashing function which will return index from 0 to n-1.

# modular hashing
hash = key % N of nodes

But here's the kicker: It's like a game of musical chairs. When you remove a chair (server), everyone has to find a new seat, and it's a hot mess. As the cluster size grows, this becomes unsustainable because the amount of work required for each hash change grows linearly with cluster size.

Consistent Hashing, on the other hand, introduces the concept of a virtual ring. It doesn’t really care if servers come and go. It's like having an elastic waistband on Thanksgiving—you can add or remove without a full wardrobe malfunction.

Consistent hashing is a distributed hashing scheme that operates independently of the number of servers or objects in a distributed hash table by assigning them a position on an abstract circle, or hash ring. The main advantage of consistent hashing is that when a server is added or removed, only a small proportion of keys need to be remapped, which is important for distributed systems, like databases, caches, and load balancers, where minimizing reshuffling is beneficial.

You can consider them as the users which are requesting some data from a servers and lets suppose we have N servers, A, B ,C...... and The servers are hashed onto the ring using H(x), placing each server at a point on the circle.

Every Request from user will be handled by the server next to it we can move clockwise or anticlockwise doesn't matter.

Adding a Server

When a new server is added to a consistent hashing ring, the keys that are now closer to the new server's hash value will be reassigned to it. Here's the math behind it:

Calculate the hash of the new server, let's call it H(new_server).
Find the location on the ring where H(new_server) falls.
Any keys that fall between H(new_server) and the next server on the ring in a clockwise direction will be reassigned to new_server.

The number of keys that need to be reassigned depends on the distribution of the keys and the position of the new server on the ring. If the keys are evenly distributed, the number of keys that need to be moved is approximately K/N, where K is the total number of keys and N is the total number of servers after adding the new server.

Removing a Server

When a server needs to be removed, a similar but reverse process occurs:

Calculate the hash of the server to be removed, H(removed_server).
Find the server's location on the ring.
Reassign all keys that were assigned to removed_server to the next server on the ring in a clockwise direction.

Again, if keys are evenly distributed, the number of keys that need to be moved is approximately K/N, where K is the total number of keys and N is the total number of servers after removing the server.

To achieve a balanced key distribution among servers, we implement a clever technique: we give multiple identifiers (angles) to each server on the hash circle. Instead of single identifiers like A, B, and C, we would use a series of identifiers for each A0 through A9, B0 through B9, C0 through C9 spaced out around the circle. The number of identifiers per server, which we call the 'weight', can vary based on the server's capacity and the specific requirements of the system. If, for example, server B is twice as capable as the others, it would receive double the identifiers, thereby statistically handling twice the number of objects.

Let's break it down. Your keys do a little hash dance and land on a spot on the ring. When you add a new server, it just squeezes in, causing minimal movement of those keys—they just scoot over a bit.

Connect me on Twitter :- Twitter 🤝🏻

Do check out my Github for amazing projects:- Github 🤝🏻

Connect me on LinkedIn :- Linkedin 🤝🏻

Read my another article :-
Parallax In Next.js using React-Scroll-Parallax 😉

Stateful vs Stateless Architecture

What is Alternative Data - Complete Guide 📊

Ritesh Kumar — Mon, 07 Nov 2022 11:19:20 +0000

The Leverage

The data give you power and the more data you have, the more leverage you have. Many investors already see that alternative data have been just as essential as fundamental data for their financial analysis and insights.

Alternative data have been used in many different industries to improve customer experience, increase revenue and reduce costs. One example would be a large retail chain that uses alternative data to help customers find the best deals on products they want to buy. Another example would be an online retailer that uses alternative data to determine which product categories are selling the most and what type of offers are most effective at attracting new customers.

1. What are Alternative data?

Alternative data are non-traditional data that can give a lot of indications and insight's. Examples of alternative data sets include credit card transaction data, product reviews, Social media, Web traffic etc.

2. How it can be used?

Nowadays, more the 50 percent of hedge funds and investment firms are using alternative data to gain some competitive edge, with consumer patterns, expert networks and web-crawled data being the most commonly used methods. the analysis with these alternative data is getting better day by day by the use of modern technologies like AI-ML.

3. Types of Alternative data.

Social Media Data
Web/ Mobile Data
Credit Card data
Geolocation data
Public data

To Learn and know more about alternate data please refer to this great article by Proxycurl Read This

4. How can you use Proxycurl for getting alternative data?

Proxycurl is a strong data company with a demonstrable capacity for handling unstructured data. Its core strength in data enrichment capabilities of people and companies - offering insights into people, profiles, company profiles, work & personal email addresses and contact, jobs info, and more sets it apart.
Proxycurl provides a wide variety of API's through which you can fetch a lot of available endpoints to access data of companies, peoples, companies etc.

You can learn more on their documentation Read Here

Conclusion

Alternative data can be used in a lot of fields and the insights it provides can be useful for a lot of companies. With the technologies available today getting these data would have never been easier.

How To Make A Typescript + NodeJS Express Project with eslint, EJS and Restart On Typescript Server Changes

Ritesh Kumar — Mon, 27 Jun 2022 17:11:32 +0000

Start with a clean project

pnpm init
or
npm init -y

Install some dependencies

pnpm add -save-dev eslint @types/node @types/express typescript ts-node-dev
pnpm add --save express ejs 

or 

npm install -save-dev eslint @types/node @types/express typescript ts-node-dev
npm install --save express ejs

make a new folder for your project

mkdir src
touch src/app.ts

src/app.ts

import express from 'express';
const app = express();
const port = 3000;
app.use(express.json());
app.use(express.static("public"));
app.set("view engine", "ejs");

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`http://localhost:${port}`);
});

create a new folder for your public folder

create a new folder of views

Create tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist"
    },
    "lib": [
        "es2015"
    ]
}

Now we will run eslint’s initialization command to interactively set up the project:

npx eslint --init

Now You have to answer some questions to finish the initialization process:

How would you like to use ESLint?: To check syntax and find problems
What type of modules does your project use?: JavaScript modules (import/export)
Which framework does your project use?: None of these
Does your project use TypeScript?: Yes
Where does your code run?: Node
What format do you want your config file to be in?: JavaScript

Finally, you will be prompted to install some additioanl eslint libraries. Choose Yes. The process will finish and you’ll be left with the following configuration file:

Now we will use ts-node-dev for watching the changes in our typescript server file

As we already installed the dev dependency we do not have to do much we just have to add the start script in our package.json file

Lets Change our package.json and add some lines

add main

"main": "dist/app.js",

add lint and start in scripts

"lint": "eslint . --ext .ts",
"start": "ts-node-dev src/app.ts"

Finally It should look like this

{
  "name": "typescript-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .ts",
    "start": "ts-node-dev src/app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "@typescript-eslint/parser": "^5.30.0",
    "eslint": "^8.18.0",
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.7.4"
  },
  "dependencies": {
    "ejs": "^3.1.8",
    "express": "^4.18.1"
  }
}

Now start the project with pnpm or npm

pnpm start
or
npm start

Hurray you have a new project! 🎉

Connect me on Twitter :- Twitter 🤝🏻

Do check out my Github for amazing projects:- Github 🤝🏻

Connect me on LinkedIn :- Linkedin 🤝🏻

Read my another article :-
Parallax In Next.js using React-Scroll-Parallax 😉

Stateful vs Stateless Architecture

Ritesh Kumar — Sun, 19 Jun 2022 20:50:45 +0000

Hey everyone today I want to discuss something about Stateful vs Stateless Architecture ok 🤔 so.. if I had to simplify these terms I would say that stateless is something which can survive a system restart. But its not that simple so lets dive deeper and try to learn the thing with an example 😃.

Lets consider that there is a person who wants to order something from an Ecommerce website. So the first thing that he will do is obviously singing in to that website with his web browser and as we all know that his or her browser will send a http request with some username password stuffs to the server of that Ecommerce site. But usually there is a something called as a load balancer sits in front of those servers and decides to send that request to
any one of the available servers.

lets consider that it send the request to server1 and then server1 requested the database to check if the username password is correct or not and after that it authenticates the user that yep, you are logged in. and the server stores a session of that user that he is logged in.

Now our user wants to add something to his cart and again his browser send that http request to the website but this time the load balancer decides to send this request to our server2 but as we know that there is no session for our user in the server2 so server2 responded with 403 (access denied) 😔 and asked our user to login again very frustrating right yep.

so that was the example of a stateful application but now lets change the situation when our user got authenticated by the server1 the server1 now did not stored a session of that user instead it returned a cookie to that user which our server again can use for the verification that the user was signed in or not obviously that cookie will have some expiration time.

And now in the case when our user will send another http request for adding something to his cart this time he will also send this cookie with the request so that if the load balancer send this request to any of the available servers now those servers can authorize the user and will not ask the user to authenticate again. So that pretty much it but still its not that easy that which one is better both have there own advantages and disadvantages.

I also explained it on youtube you can also check it out 👇🏼

Connect me on Twitter :- Twitter 🤝🏻

Do check out my Github for amazing projects:- Github 🤝🏻

Connect me on LinkedIn :- Linkedin 🤝🏻

Read my another article :-
Parallax In Next.js using React-Scroll-Parallax 😉

Parallax In Next.js using React-Scroll-Parallax 😉

Ritesh Kumar — Wed, 08 Jun 2022 07:16:22 +0000

Parallax a very 🆒 looking effect which can be achieved by changing the speed of the layers in the background 🌃.

Today lets explore how we can make a similar parallax effect in nextjs using a package called react-scroll-parallax 🥰.

https://react-scroll-parallax.damnthat.tv/docs/intro



npm i react-scroll-parallax

lets initialize our project using create-next-app



npx create-next-app --example with-tailwindcss parallax

I made a complete tutorial on youtube you can also check it out

now lets continue our blog

First of all replace all typescript file to JavaScript as the starter template comes configured with typescript 😞 or you can also write normal JavaScript 😲 inside the typescript file not a big deal

So first wrap our Component in _app.js with ParallaxProvider and as we are creating our parallax in horizontal scrolling so we have to mention the scrollAxis='horizontal'



import '../styles/globals.css'
import { ParallaxProvider } from 'react-scroll-parallax'

function MyApp({ Component, pageProps }) {
  return (
    <ParallaxProvider scrollAxis='horizontal'>
      <Component {...pageProps} />
    </ParallaxProvider>
  )
}

export default MyApp

the final effect that we want is something like this 👇🏻

So as there is our main scene and there are some different components like train, cloud and sun and we want to move the cloud and train with relative to our background image and we want to make sun to be static so we will use useRef and useParallax from react-scroll-parallax to achieve this we will create a const target which will store the outermost div and and then we will use useParallax to create the refs for the inner divs and pass speed and targetElement in the useParallax here is the code 👇🏻



import { useParallax } from "react-scroll-parallax";
import React, { useRef } from "react";
import Image from "next/image";

const index = () => {
  const target = useRef(null);
  const train = useParallax({
    speed: 500,
    targetElement: target.current,
  })

  const cloud = useParallax({
    speed: 200,
    targetElement: target.current,
  })

  return (
    <div ref={target} style={{
      backgroundImage: "url('/Scene.png')",
      backgroundSize: "cover",
      backgroundPosition: "center",
      width: '3000px'
    }} className="h-screen">
      <div className="fixed top-10 left-40">
        <Image src="/Sun.png" height={120} width={120} />
      </div>
      <div ref={train.ref} className="absolute"
        style={{
          top: '11vh',
          left: '30vw',
        }}
      >
        <Image src="/Train.png" height={350} width={700} />
      </div>
      <div ref={cloud.ref} className="absolute top-10">
        <Image src="/Cloud.png" height={200} width={1000} />
      </div>
    </div>
  );
}
export default index;

complete code in github -> https://github.com/nyctonio/yt-parallax-tutorial

🥳🥳🥳🥳🎊🎊🎊🎊 Hurrayyyyy!!!! you have created a parallax effect I would recommend you to check out some of these resources for more knowledge 👇🏻

Connect me on Twitter :- Twitter 🤝🏻

Do check out my Github for amazing projects:- Github 🤝🏻

Connect me on LinkedIn :- Linkedin 🤝🏻

Read my another article :- Authentication in nodejs with mongodb bcrypt and jwt web tokens

All React Hooks in A single Post

All React Hooks and Concepts In A Single Post!! 🤗

Ritesh Kumar — Sat, 02 Apr 2022 13:09:34 +0000

First of all React is a JS Library not a Complete Framework 🙂 so for making a complete web application you need to know a lot of other things 🤭 that you can use with React. In this Post I will cover React concepts, Hooks and some good practices Ofc... 😁
We use React to make reusable components that can be used in a logical way to make UI. Making components in React is as easy as making a function 🤩.
For Example 👇🏻 it is a simple react component in which we can pass data as arguments which can be easily referenced inside the functions



function Component(props){
    return <h1>{props.text}</h1>
}

Ohk But Now what are States in React??

The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders which basically allows us to manage changing data in an application 🆒.
Now Lets Learn about states using useState()

useState()



const component = () => {
    // Tip: use states only inside components
    // lets console.log the state and lets see what it returns
    console.log(useState(100));
    // this will return an array [100,f]
    // basically this returns a state and a function to update the state
    // we can destructure the array and get the state and the function
    const [state, setState] = useState(100);


    return (
        <div>
            hiiieeee
        </div>
    )
}

but you can't ☠️ directly update the value of state by using = operator as this will change the value but it will not re render the component so basically react wants 😩 that you pass the value in the setState function if you need to change the state.

passing functions inside the useState() 🤔



// you can also pass function in useState it will set the initial value to what function returns it is useful when you use computationaly high task as initial state
const [state, setState] = useState(() => {
        console.log("initial state");
        return 100;
});

passing functions inside the setState() 🙃



onClick={() => {
      // here value in the props is the state
      setState((value) => {
      //you can use this method when you need to update the state and you need the previous value of state
           return value + 1;
      });
}}

useEffect()

Use effect hook has 2 parts first one is a function and second one is dependency array which is optional



useEffect(()=>{},[])



// we will get a console log every time any state changes.

// for example if you have 2 states in your component and any of 
// them changes then we will get the console log

// this is something we mostly dont want.
useEffect(() => {
   console.log('change');
})

Your first useEffect() call will always run when your component gets mounted first time in the DOM.

Dependency array 🤠

We can specify the states inside the dependency array of useEffect() so that it will only monitor the changes of those states which are mentioned in the dependency array😮‍💨.



    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);
    useEffect(() => {
        console.log('state1 changed');
    }, [state1])

Remember: Do not update the state in which you used the useEffect() without a proper logic it will create an infinite loop 🥵

Cleanup function

useEffect always returns a cleanup function which you can use to remove unwanted behaviours thec leanup function does not only run when our component wants to unmount, it also runs right before the execution of the next scheduled effect read in detail



useEffect(() => {
        console.log(`state1 changed | ${state1}`);
        return () => {
            console.log('state1 unmounted | ', state1);
        }
    }, [state1])

you can fetch data from an api like this 👇🏻



useEffect(() => {
        const url = "https://jsonplaceholder.typicode.com/todos/1";
        const fetchData = () => {
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    setState(data.title)
                })
        }
        fetchData();
    }, []);

useContext()

The Context API provides data even to the deepest level of component in the react component tree without passing it in props



import { createContext } from "react";
import { useState } from "react";

const StoreContext = createContext();

const component = () => {
    const data = useState({
        name: 'Ritesh',
        email: 'nyctonio.dev@gmail.com',
    })[0];

    const Child = () => {
        return <div>
            <StoreContext.Consumer>
                {value => <h1>name is {value.name}</h1>}
            </StoreContext.Consumer>
        </div>
    }

    return (
        <StoreContext.Provider value={data}>
            <Child />
        </StoreContext.Provider>
    )
}

export default component;

You can wrap your top level component in Your Context Provider and use it inside a function by Context Consumer.What useContext do is it replaces Context Consumer and we can get data by using useContext directly.

See this example 👇🏻.



import { createContext, useContext } from "react";
import { useState } from "react";

const StoreContext = createContext();

const component = () => {
    const data = useState({
        name: 'Ritesh',
        email: 'nyctonio.dev@gmail.com',
    })[0];

    const Child = () => {
        const value = useContext(StoreContext);
        return <div>
            <h1>name is {value.name}</h1>
        </div>
    }

    return (
        <StoreContext.Provider value={data}>
            <Child />
        </StoreContext.Provider>
    )
}

export default component;

useReducer()

useReducer is used for state management in React it is somewhat similar to reducer function in javascript.

// useReducer function accepts 2 params reducer function and initialState

useReducer(reducer,initialState)

// reducer functions accepts 2 params currentState and action for that and returns a new State

reducer(currentState,action)

lets create a simple counter using useReducer



import { useReducer } from 'react'

const initialState = 0;
const reducer = (state, action) => {
    switch (action) {
        case 'increment':
            return state + 1;
        case 'decrement':
            return state - 1;
        default:
            return state;
    }
}

export default function main() {
    const [count, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch('increment')}>+</button>
            <button onClick={() => dispatch('decrement')}>-</button>
        </div>
    )
}

we can make it more complex by making our state an object



import { useReducer } from 'react'

const initialState = {
    firstCounter: 0,
    secondCounter: 0
};
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { ...state, firstCounter: state.firstCounter + action.value };
        case 'decrement':
            return { ...state, firstCounter: state.firstCounter - action.value };
        default:
            return { ...state };
    }
}

export default function main() {
    const [count, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            <p>Count: {count.firstCounter}</p>
            <button className='bg-gray-200 p-2' onClick={() => dispatch({ type: 'increment', value: 2 })}>
                increase by 2
            </button>
            <button className='bg-gray-200 p-2' onClick={() => dispatch({ type: 'decrement', value: 4 })}>
                decrease by 4
            </button>
        </div>
    )
}

Or We can use multiple useReducers 👇🏻



import { useReducer } from 'react'

const initialState = 0;
const reducer = (state, action) => {
    switch (action) {
        case 'increment':
            return state + 1;
        case 'decrement':
            return state - 1;
        default:
            return state;
    }
}

export default function main() {
    const [count, dispatch] = useReducer(reducer, initialState);
    const [count2, dispatch2] = useReducer(reducer, initialState);

    return (
        <div>
            <p>Count: {count}</p>
            <button className="bg-gray-100 p-2 m-2"
                onClick={() => dispatch('decrement')}>-</button>
            <button className="bg-gray-100 p-2 m-2"
                onClick={() => dispatch('increment')}>+</button>

            <p>Count2: {count2}</p>
            <button className="bg-gray-100 p-2 m-2"
                onClick={() => dispatch2('increment')}>+</button>
            <button className="bg-gray-100 p-2 m-2"
                onClick={() => dispatch2('decrement')}>-</button>
        </div>
    )
}

When to use useState and when useReducer ????

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks 😎.

useReducer() with useContext()

With the use of useContext and useReducer we can manage global states at any level of component tree try out this example 👇🏻




// main.jsx
import React from 'react'
import { useReducer } from 'react'
import ChildrenA from '../components/ChildrenA';

export const StateContext = React.createContext();
const initialState = 0;
const reducer = (state, action) => {
    switch (action) {
        case 'increment':
            return state + 1;
        case 'decrement':
            return state - 1;
        default:
            return state;
    }
}

export default function main() {
    const [count, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            <StateContext.Provider
                value={{ countState: count, countDispatch: dispatch }}>
                <ChildrenA />
            </StateContext.Provider>
        </div >
    )
}

// ChildrenA.jsx

import React from 'react'
import ChildrenB from './ChildrenB'
import { StateContext } from '../pages/main'
import { useContext } from 'react'

export default function ChildrenA() {
    const { countState, countDispatch } = useContext(StateContext)
    return (
        <div>
            In child A count state is {countState}
            <ChildrenB />
        </div>
    )
}

// ChildrenB.jsx

import React from 'react'
import { StateContext } from '../pages/main'
import { useContext } from 'react'

export default function ChildrenB() {
    const { countState, countDispatch } = useContext(StateContext)
    return (
        <div>
            <p>Count is {countState}</p>
            <button onClick={() => countDispatch('increment')}>+</button>
            <button onClick={() => countDispatch('decrement')}>-</button>
        </div>
    )
}

your both state will change simultaneously

useCallback()

lets see this code and try to understand the behaviour of functions in React



import React from 'react'

export default function main() {

    function Sum() {
        return (a, b) => a + b;
    }
    const func1 = Sum();
    const func2 = Sum();
    console.log(func1 === func2);

    return (
        <div>main</div>
    )
}

If you will run this code you will get false in console.log

Now with an example lets try to understand how we can use useCallback



// main.jsx
import React, { useState } from 'react'
import ChildrenA from '../components/ChildrenA';
import ChildrenB from '../components/ChildrenB';
import ChildrenC from '../components/ChildrenC';

const main = () => {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);

    const handleClickA = () => {
        setState1(state1 + 1);
    }

    const handleClickB = () => {
        setState2(state2 + 1);
    }

    return (
        <div className='flex flex-col justify-center items-center'>
            <ChildrenA value={state1} handleClick={handleClickA} />
            <ChildrenB value={state2} handleClick={handleClickB} />
            <ChildrenC />
        </div>
    )
}

// what react memo do is it re-render the component only when the props change
export default React.memo(main);

// ChildrenA.jsx
import React from 'react'

function ChildrenA({ value, handleClick }) {
    console.log('ChildrenA');
    return (
        <div>ChildrenA  {value}
            <button className='bg-gray-200 p-2 m-2' onClick={handleClick} >Click</button>
        </div>

    )
}

export default React.memo(ChildrenA);

// ChildrenB.jsx
import React from 'react'

function ChildrenB({ value, handleClick }) {
    console.log('ChildrenB');
    return (
        <div>ChildrenB {value}
            <button className='bg-gray-200 p-2 m-2' onClick={handleClick} >Click</button>
        </div>
    )
}

export default React.memo(ChildrenB);

// ChildrenC.jsx

import React from 'react'

function ChildrenC() {
    console.log('ChildrenC');
    return (
        <div>ChildrenC</div>
    )
}

export default React.memo(ChildrenC);

when you see console.log in your browser initially all three components renders but on clicking any click button only 2 components rerenders
Note: here we used React.memo() thats why ChildrenC do not got rerendered because the props do not changed but why on changing ChildrenA ChildrenB also gets re render

The reason is on rerender of main function the handleClick function do not remains the same as previous one I explained this above in the blog thats why React notices change in props so it rerenders both ChildrenA and ChildrenB.

To Solve this we will use useCallback

useCallback returns a memoized callback.

useCallback accepts a function and a dependency array same as useEffect

now lets change our code in main function and see the logs



// main.jsx

import React, { useState, useCallback } from 'react'
import ChildrenA from '../components/ChildrenA';
import ChildrenB from '../components/ChildrenB';
import ChildrenC from '../components/ChildrenC';

const main = () => {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);


    const handleClickA = useCallback(() => {
        setState1(state1 + 1);
    }, [state1])

    const handleClickB = useCallback(() => {
        setState2(state2 + 1);
    }, [state2])

    return (
        <div className='flex flex-col justify-center items-center'>
            <ChildrenA value={state1} handleClick={handleClickA} />
            <ChildrenB value={state2} handleClick={handleClickB} />
            <ChildrenC />
        </div>
    )
}

// what react memo do is it re-render the component only when the props change
export default React.memo(main);

now you can see everything is fine 👇🏻.

useMemo()

useCallback returns a memorized function similarly useMemo returns a memorized value for example we need to find the factorial and only recalculate when number changes not everytime when component re-renders so we will use useCallback



import React, { useState, useMemo } from 'react'

function factorialOf(n) {
    console.log('factorialOf(n) called!');
    return n <= 0 ? 1 : n * factorialOf(n - 1);
}

const main = () => {
    const [number, setNumber] = useState(2)
    const factorial = useMemo(() => factorialOf(number), [number])
    const [count, setCount] = useState(0)

    return (
        <div className='flex flex-col justify-center items-center'>
            {factorial}
            <button className='bg-gray-200 p-2 m-2' onClick={() => setNumber(number + 1)}>+</button>
            {count} <button className='bg-gray-200 p-2 m-2' onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
}

export default main;

useRef()

lets console log useRef and see what it returns

console.log(useRef(100));
// this will return something like this 👉🏻 {current: 100}

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

when you compare an normal object with itself in useEffect after a rerender those are not the same, and that will trigger the useEffect on that object you can run this code 👇🏻 and try out.



import { useEffect, useState, useRef } from "react";

const component = () => {
    const obj1 = { hi: 100 };
    const obj2 = useRef({ hi: 100 });
    console.log(obj1 === obj2.current);

    const [state, setState] = useState(() => {
        return 1;
    });

    useEffect(() => {
        console.log('obj1 changed | ', obj1);
    }, [obj1])

    useEffect(() => {
        console.log('obj2 changed | ', obj2.current);
    }, [obj2])


    return (
        <div onClick={() => {
            setState((value) => {
                return value + 1;
            });
        }} className="w-screen h-screen flex justify-center items-center text-4xl font-extralight">
            {state}
        </div>
    )
}

export default component;

you can also use useState to work similar to useRef
const obj = useState({current:10})[0];

🥳🥳🥳🥳🎊🎊🎊🎊 hurrayyyyy!!!!
you have covered all important hooks.

Connect me on Twitter :- Twitter 🤝🏻

Do check out my Github for amazing projects:- Github 🤝🏻

Connect me on LinkedIn :- Linkedin 🤝🏻

Read my another article :- Authentication in nodejs with mongodb bcrypt and jwt web tokens

Authentication in Node.js with MongoDB, bcrypt, and JWT web Tokens with cookies 🍪.

Ritesh Kumar — Sat, 21 Aug 2021 08:59:44 +0000

Adding authentication to an application is one of the most challenging 😖 but also a very important part for developers, but today I will teach you 🥰 how to do it, come on let's make an authentication page with me today in just 10 minutes ⚡.

1.Let's initialize npm and install all the necessary packages that we are going to use.



npm init -y
npm i express bcryptjs body-parser dotenv ejs jsonwebtoken mongoose cookie-parser

2.Now create 2 directories views and public and also create server.js file now your folder structure should look like this 👇.

3.Now include the packages in your server.js and create an express server

here we included all the packages and required code to configure our express server that we will need throughout the journey in this article 🤠.



const express = require('express');
const bodyparser=require("body-parser");
const mongoose= require('mongoose');
const jwt = require('jsonwebtoken');
var cookieParser = require('cookie-parser');
const port = process.env.PORT || 3000;
const app = express();
require('dotenv').config();
const bcrypt = require('bcryptjs');
const salt = 10;
app.set('view engine', 'ejs');
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static("public"));
app.listen(port,()=>{
    console.log(`Running on port ${port}`);
})

4.Now Create 3 files in the views folder 👇.

5.Now lets create our login signup and the protected page.



// signin.ejs
<form action="/login" method="post">
<label for="">Email</label>
<input type="email" name="email" id="">
<label for="">Password</label>
<input type="text" name="password" id="">
<button type="submit">SignIN</button>
</form>
<form action="/signup" method="get">
<button type="submit">
    Do not have an account
</button>
</form>



// signup.ejs
<form action="/signup" method="post">
<label for="">Email</label>
<input type="email" name="email" id="">
<label for="">Password</label>
<input type="text" name="password" id="">
<button type="submit">SignUP</button>
</form>



//home.ejs
This is the protected page

6.Now we will create our .env file and store our secret key of JWT and mongodb connection url and add to our server.



// get our urls and secrets
const JWT_SECRET=process.env.jwt;
const MONGODB_URL=process.env.mongodb;

// making connnection with our database
mongoose.connect(MONGODB_URL, {useFindAndModify: false,useNewUrlParser: true, useUnifiedTopology: true,useCreateIndex: true});

Now your server should look like this 👇.



const express = require('express');
const bodyparser=require("body-parser");
const mongoose= require('mongoose');
const jwt = require('jsonwebtoken');
var cookieParser = require('cookie-parser');
const port = process.env.PORT || 3000;
const app = express();
require('dotenv').config();
const bcrypt = require('bcryptjs');
const salt = 10;
app.set('view engine', 'ejs');
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static("public"));

// get our urls and secrets
const JWT_SECRET=process.env.jwt;
const MONGODB_URL=process.env.mongodb;

// making connnection with our database
mongoose.connect(MONGODB_URL, {useFindAndModify: false,useNewUrlParser: true, useUnifiedTopology: true,useCreateIndex: true});



app.listen(port,()=>{
    console.log(`Running on port ${port}`);
})

7.Now we will create Our Schema for User Authentication and our signup method.



// Schema For User Auth
const userSchema = new mongoose.Schema({
    email:{type:String,required:true,unique:true},
    password:{type:String,required:true}
},{collection:'users'}
const User= mongoose.model("User",userSchema);
)



app.post('/signup',async (req,res)=>{
    // geting our data from frontend
    const {email,password:plainTextPassword}=req.body;
    // encrypting our password to store in database
    const password = await bcrypt.hash(plainTextPassword,salt);
    try {
        // storing our user data into database
        const response = await User.create({
            email,
            password
        })
        return res.redirect('/');
    } catch (error) {
        console.log(JSON.stringify(error));
        if(error.code === 11000){
            return res.send({status:'error',error:'email already exists'})
        }
        throw error
    }
})

8.Now we will create our Login method here we will use JWT to create an auth token and store it in our browser as a cookie



// user login function
const verifyUserLogin = async (email,password)=>{
    try {
        const user = await User.findOne({email}).lean()
        if(!user){
            return {status:'error',error:'user not found'}
        }
        if(await bcrypt.compare(password,user.password)){
            // creating a JWT token
            token = jwt.sign({id:user._id,username:user.email,type:'user'},JWT_SECRET,{ expiresIn: '2h'})
            return {status:'ok',data:token}
        }
        return {status:'error',error:'invalid password'}
    } catch (error) {
        console.log(error);
        return {status:'error',error:'timed out'}
    }
}

// login 
app.post('/login',async(req,res)=>{
    const {email,password}=req.body;
    // we made a function to verify our user login
    const response = await verifyUserLogin(email,password);
    if(response.status==='ok'){
        // storing our JWT web token as a cookie in our browser
        res.cookie('token',token,{ maxAge: 2 * 60 * 60 * 1000, httpOnly: true });  // maxAge: 2 hours
        res.redirect('/');
    }else{
        res.json(response);
    }
})

9.And finally we will make routes for our remaining pages and check for auth for getting into our protected page



const verifyToken = (token)=>{
    try {
        const verify = jwt.verify(token,JWT_SECRET);
        if(verify.type==='user'){return true;}
        else{return false};
    } catch (error) {
        console.log(JSON.stringify(error),"error");
        return false;
    }
}



// get requests
app.get('/',(req,res)=>{
    const {token}=req.cookies;
    if(verifyToken(token)){
        return res.render('home');
    }else{
        res.redirect('/login')
    }
})

app.get('/login',(req,res)=>{
    res.render('signin');
})

app.get('/signup',(req,res)=>{
    res.render('signup')
})


app.listen(port,()=>{
    console.log(`Running on port ${port}`);
})

10.Finally Your server.js should look like this 👇.



const express = require('express');
const bodyparser=require("body-parser");
const mongoose= require('mongoose');
const jwt = require('jsonwebtoken');
var cookieParser = require('cookie-parser');
const port = process.env.PORT || 3000;
const app = express();
require('dotenv').config();
const bcrypt = require('bcryptjs');
const salt = 10;
app.set('view engine', 'ejs');
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static("public"));

// get our urls and secrets
const JWT_SECRET=process.env.jwt;
const MONGODB_URL=process.env.mongodb;

// making connnection with our database
mongoose.connect(MONGODB_URL, {useFindAndModify: false,useNewUrlParser: true, useUnifiedTopology: true,useCreateIndex: true});

// Schema For User Auth
const userSchema = new mongoose.Schema({
    email:{type:String,required:true,unique:true},
    password:{type:String,required:true}
},{collection:'users'}
)
const User= mongoose.model("User",userSchema);

app.post('/signup',async (req,res)=>{
    // geting our data from frontend
    const {email,password:plainTextPassword}=req.body;
    // encrypting our password to store in database
    const password = await bcrypt.hash(plainTextPassword,salt);
    try {
        // storing our user data into database
        const response = await User.create({
            email,
            password
        })
        return res.redirect('/');
    } catch (error) {
        console.log(JSON.stringify(error));
        if(error.code === 11000){
            return res.send({status:'error',error:'email already exists'})
        }
        throw error
    }
})


// user login function
const verifyUserLogin = async (email,password)=>{
    try {
        const user = await User.findOne({email}).lean()
        if(!user){
            return {status:'error',error:'user not found'}
        }
        if(await bcrypt.compare(password,user.password)){
            // creating a JWT token
            token = jwt.sign({id:user._id,username:user.email,type:'user'},JWT_SECRET,{ expiresIn: '2h'})
            return {status:'ok',data:token}
        }
        return {status:'error',error:'invalid password'}
    } catch (error) {
        console.log(error);
        return {status:'error',error:'timed out'}
    }
}

// login 
app.post('/login',async(req,res)=>{
    const {email,password}=req.body;
    // we made a function to verify our user login
    const response = await verifyUserLogin(email,password);
    if(response.status==='ok'){
        // storing our JWT web token as a cookie in our browser
        res.cookie('token',token,{ maxAge: 2 * 60 * 60 * 1000, httpOnly: true });  // maxAge: 2 hours
        res.redirect('/');
    }else{
        res.json(response);
    }
})

const verifyToken = (token)=>{
    try {
        const verify = jwt.verify(token,JWT_SECRET);
        if(verify.type==='user'){return true;}
        else{return false};
    } catch (error) {
        console.log(JSON.stringify(error),"error");
        return false;
    }
}



// get requests
app.get('/',(req,res)=>{
    const {token}=req.cookies;
    if(verifyToken(token)){
        return res.render('home');
    }else{
        res.redirect('/login')
    }
})

app.get('/login',(req,res)=>{
    res.render('signin');
})

app.get('/signup',(req,res)=>{
    res.render('signup')
})


app.listen(port,()=>{
    console.log(`Running on port ${port}`);
})

Hurray!! You have successfully added authentication in your website 🥳🥳🥳🥳.

Connect me on Twitter :-
https://twitter.com/nyctonio

Do check out my Github for source code :-https://github.com/nyctonio/jwtauth