DEV Community: Siddharth Roy

Developer Portfolios To Check out

Siddharth Roy — Sun, 20 Feb 2022 06:43:34 +0000

A Portfolio website is a necessary for every Web developer and when you don't have a portfolio website it's a good idea to get some inspiriation from other's websites to help create your own.

Here are some of my favourite protfolio websites from awesome Web Developers.

Verse

He is a full stack developer and what I like most about his website is how minimal and starightforward it is.

Rafael Caferati

He is an award-winning full-stack web developer and UI/UX javascript specialist. His website is has lots of cool animataions and a built in game that destroys his website, it's pretty cool.

Pierre Nel

An another straightforward minimalistic website but has a 3D interactive element that looks nice.

You probably know about this one but I still included in just In case someone didn't know, his website is very popular and the animation on his home page is so freaking cool, he also changes it to something new every once in a while.

Brittany Chiang

Coolest looking website in this list, her website looks futuristic like Cyberpunk except it dosn't have a lot of bugs unlike the game, the website is also Opensource so you can clone it and use it for your own portfolio if you add the attribution.

Seyi

The most unique looking website is the list, I haven't seen any website like this before, her website is full of big text with on scroll animations which looks pretty neat ngl.

Anurag Hazra

He is a frontend developer and has been coding since 6th grade just like me, his website has this cool material design look that I like a lot.

Adenekan

He is a Frontend developer, UX architect and Javascript engineer, his website is also very straightforward but has really cool animations, especially that glitch animation on his header text so freaking cool, I like that a lot.

Hope you like this list, if you know some more awesome portfolio websites share them in comments.

Build a free blog with Next.js and Netlify CMS

Siddharth Roy — Thu, 17 Feb 2022 03:04:38 +0000

Table of contents
What is Next.js
What is Netlify CMS
Why Next.js and Netlify CMS
Getting Started
Home Page
Listing Blogs
Blog Page
Connecting Netlify CMS
The end

What is Next.js

Next.js is a React Framework for building fast SEO-friendly websites. It supports serverside rendering, static site generation, optimizations, and much more. Basically, you can write serverside web apps using React which is necessary for building a blog because every page will be pre-rendered which is necessary for SEO. You will learn more about Next.js and how it works in this tutorial below.

What is Netlify CMS

It's a git-based Headless CMS build using React. It provides a rich text editor, real-time preview, media uploads all for free If you are hosting your site on Netlify.

Why Next.js and Netlify CMS

If you are a React Developer and want to build a website with a CMS but hate WordPress then Next.js with Netlify CMS is the best option for you.

If you want to check the final product, go ahead! here is the live site and the repo.

Getting Started

Getting set up Next.js is simple, enter this command and it will set up a basic Next.js project for you:

npx create-next-app nextjs-blog
# or
yarn create next-app nextjs-blog

After the setup is complete cd into the folder and run this command to start the app in the development server:

cd nextjs-blog
yarn dev
# or
npm dev

Visit localhost:3000 to view your app

If you look at the folder you will see 3 folders:

pages
public
styles

They are pretty self-explanatory, I don't think I need to explain what they do.

Inside the pages folder, you will notice an API folder. This is for writing REST API and we will not use this folder for this project so you can delete that.

The _app.js this is the entry point of our app just like index.js in create-react-app.

The index.js returns a react component and it will render when you visit the front page of the app.

Routing in Next.js is different from traditional create-react-app, we do not use react-router here instead we create a new react component in the pages folder with the name of route as the filename. For example, create a new file testpage.js in the pages folder with the following:

export default function Testpage() {
  return (
    <div>
      <p>Hello</p>
    </div>
  )
}

Here the name of the function doesn't matter.

Now if you visit localhost:300/testpage you will see this

To learn more about pages check out Next.js Docs

Each page is associated with a route based on its filename.

Home Page

Now it's time to make our Home Page to show the list of blogs.

First, replace everything in the index.js with this:

import styles from '../styles/Home.module.css'

export default function Home() {
  return (<div className={styles['container']}>
    <h1 className={styles['header']}>Welcome to my blog</h1>
    <p className={styles['subtitle']}>This is a subtitle idk what to type here</p>
    <ul className={styles['blog-list']}>
      <li>A cool blog</li>
      <li>How to train a dragon</li>
      <li>How to catch a pokemon</li>
    </ul>
  </div>)
}

If you are wondering what is happening in the first line, Next.js allows us to import CSS files as a module then you can access the classes as a key from styles. The name of the CSS file must end with .module.css for it to work. This allows you to use the same CSS class name in different files without worrying about collisions.

Then replace everything in the Home.module.css file in the styles folder with this:

.container {
  text-align: center;
  padding-top: 10rem;
  color: #445566;
}

.header {
  font-size: 3rem;
}

.subtitle {
  margin-bottom: 2rem;
}

.blog-list {
  text-align: start;
  margin: auto;
  width: max-content;
}

.blog-list a {
  color: rgb(4, 165, 165);
  text-decoration: underline;
}

Now it should look like this

Listing Blogs

Now It's time to add some dummy blogs and list them on Home Page.

First, make a new folder at the root of the project called content.

Note: The name of this folder doesn't matter, you can rename it to anything but make sure to modify the code below accordingly.

Inside the content folder create another folder named blogs this is where we are going to store all our blogs in markdown files.

Inside the blogs folder create a file named my-first-blog.md and fill it with this:

---
title: "My First Blog"
date: 24, August, 2021
---

# Welcome to my blog

This is an markdown file with some front matter.
Yes you have key value pair in yaml format covered by --- on the of markdown file.
The yaml style key value pair on the top is called front matter.

## Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

> a blockquote

Before listing our newly created blog on my Home Page we have to install a library to parse the "front matter".

npm install gray-matter
# or
yarn add gray-matter

Then modify the index.js file to look like this:

import fs from 'fs'
import matter from 'gray-matter'
import Link from 'next/link'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home({ blogs }) {
  return (<div className={styles['container']}>
    <Head>
      <title>Demo Blog</title>
    </Head>
    <h1 className={styles['header']}>Welcome to my blog</h1>
    <p className={styles['subtitle']}>This is a subtitle idk what to type here</p>
    <ul className={styles['blog-list']}>
      {blogs.map(blog => (
        <li key={blog.slug}>
          <Link href={`/blog/${blog.slug}`}>
            <a>{blog.date}:{blog.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  </div>)
}

export async function getStaticProps() {
  // List of files in blgos folder
  const filesInBlogs = fs.readdirSync('./content/blogs')

  // Get the front matter and slug (the filename without .md) of all files
  const blogs = filesInBlogs.map(filename => {
    const file = fs.readFileSync(`./content/blogs/${filename}`, 'utf8')
    const matterData = matter(file)

    return {
      ...matterData.data, // matterData.data contains front matter
      slug: filename.slice(0, filename.indexOf('.'))
    }
  })

  return {
    props: {
      blogs
    }
  }

}

Explanation:

In a typical create-react-app, all the rendering happens at the client-side but Next.js allows us to pre-render pages and it has two forms Static Generation (Using getStaticProps) and Server Side Rendering (Using getServerSideProps). Learn more
In the getStaticProps function, we are listing all the files in the blogs folder, parse the front matter and slug based on filename, and return them.
In the Home component, we are simply listing all the blogs from the blogs array that is given from getStaticProps and using Link Component from Next.js for fast client-side page transition.
We are using Head component from next/head to set the title of the page.

Let's check how it looks on the browser.

Looks good but If you click on that link, it will show a 404 page. Let's fix that.

Blog Page

Our blog page is a dynamic page and to create a dynamic page in Next.js first create a folder named blog in the pages folder then inside blog create a file [slug].js this will match to /blog/:slug route.

Before we write anything, we need to install a library to render markdown.

 yarn add react-markdown@6.0.3
 # or
 npm install react-markdown@6.0.3

Note: It's important to install that specific version because later versions don't work with Next.js

Now put this into the [slug].js file.

import fs from 'fs'
import ReactMarkdown from 'react-markdown'
import matter from 'gray-matter'
import Head from 'next/head'

export default function Blog({ frontmatter, markdown}) {
  return (
    <div>
      <Head>
        <title>Demo Blog | {frontmatter.title}</title>
      </Head>
      <h1>{frontmatter.title}</h1>
      <span>{frontmatter.date}</span>
      <hr />
      <ReactMarkdown>
        {markdown}
      </ReactMarkdown>
    </div>
  )
}

export async function getStaticProps({ params: { slug } }) {
  const fileContent = matter(fs.readFileSync(`./content/blogs/${slug}.md`, 'utf8'))
  let frontmatter = fileContent.data
  const markdown = fileContent.content

  return {
    props: { frontmatter, markdown }
  }
}

export async function getStaticPaths() {
  const filesInProjects = fs.readdirSync('./content/blogs')

  // Getting the filenames excluding .md extension
  // and returning an array containing slug (the filename) as params for every route
  // It looks like this
  // paths = [
  //   { params: { slug: 'my-first-blog' }},
  //   { params: { slug: 'how-to-train-a-dragon' }},
  //   { params: { slug: 'how-to-catch-a-pokemon' }},
  // ]
  const paths = filesInProjects.map(file => {
    const filename = file.slice(0, file.indexOf('.'))
    return { params: { slug: filename }}
  })

  return {
    paths,
    fallback: false // This shows a 404 page if the page is not found
  }
}

Explanation:

In the getStaicProps we are simply getting the slug param and parsing the front matter and markdown from the file.
Because we are using getStaticProps on a dynamic page, Next.js expects us to provide the list of paths using getStaticPaths that have to be rendered at build time by returning the paths array with the required params in each.
In the Blog component, we are using react-markdown to convert markdown to HTML.
And again we are using the Head component to set the title for SEO.

Now if you visit our blog it will look like this:

I will not go into the styling here because the blog is getting too long. But if you want to see the final version with styling included, go ahead.

Connecting Netlify CMS

Netlify CMS only works with websites that are hosted on Netlify. First, push your code to Github then log in to Netlify, and click "New site from git" and follow the prompts to select your repo. All the build settings should already be filled out for you.

Click on deploy and within a minute your site will be live.

Now finally we can connect Netlify CMS to our blog. Create a folder named admin inside public folder, Inside admin folder create two files index.html and config.yml with the following:

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: "public/uploads" # Where media files will be stored
public_folder: "/uploads" # Where the media files can be accesed from the server
publish_mode: editorial_workflow # For Drafts

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "content/blogs" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime", date_format: "DD.MM.YYYY", time_format: "HH:mm", format: "LLL"}
      - {label: "Body", name: "body", widget: "markdown"}

Learn more about how it works here.

For this to work, we also need to import the Netlify Identity widget in the head tag of every page. To do that create _document.js inside pages folder with this:

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Netlify Widget */}
          <script async src="https://identity.netlify.com/v1/netlify-identity-widget.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
          <script dangerouslySetInnerHTML={{
            __html: `
              if (window.netlifyIdentity) {
                window.netlifyIdentity.on("init", user => {
                  if (!user) {
                    window.netlifyIdentity.on("login", () => {
                      document.location.href = "/admin/";
                    });
                  }
                });
              }
          `}}/>
        </body>
      </Html>
    )
  }
}

export default MyDocument

Learn more about _document.js In Netlify Docs

Push this to Github and Netlify will automatically re-build the site for you.

Open the site setting in Netlify and enable Identity.

And after that also enable Git Gateway on the same page.

Now if you visit your website and go to the /admin page you will be greeted with Log In and Sign Up Prompt. Go ahead and Sign Up and confirm your email. After you have successfully created your account close the registration in the Site settings so no one can make an account and access the admin panel.

The end

There you go you have made a Next.js powered Markdown blog, backed with a free CMS. If you did everything correctly you will see an admin panel upon visiting /admin page.

Whenever you update or create a blog Netlify CMS will push the change to Github and Netlify will re-build your site.

If you got stuck here is the link to the repo.

How to build an Express and Node.js app with Typescript

Siddharth Roy — Wed, 16 Feb 2022 15:11:41 +0000

In this tutorial, you will learn how to set up a Node.js and Express project with Typescript and live auto-reloading. Note that this method also works for any kind of Node.js apps not just Node.js with Express.

Before getting started, note that this article assumes that you have basic knowledge of Javascript, Node.js, Typescript, Express.js

Setting Up

Create a new directory for our project and name is typescript-express and cd into the folder.

mkdir typescript-express
cd typescript-express

Now initialize our Node project using this command

npm init -y

The -y flag generates package.json with default values. Instead of asking for information for every field for package.json

Now we can add the dependencies.

Adding Dependencies

We need to add two frameworks Express and Typescript to our project. To do so run the following command.

npm install express
npm install typescript --save-dev

Because we are using Typescript we also need to install the types provided by Express.

npm install @types/express --save-dev

The Typescript-related dependencies are installed as devDependencies because we only need them when we build our app not when we run the app.

Configuring Typescript

Before we use Typescript we need to configure it. You will need to create a tsconfig.json file at the root directory to indicate that the directory is a Typescript project.

To create a tsconfig.json file simply run this command:

tsc --init

This command will create the tsconfig.json file with the default configuration. This file will contain a lot of settings, most of which are commented out. However, there are some settings that are important to know:

target This specifies which ECMAScript version your code will compile to. By default, this is set to ES5 which is supported by most browsers. This allows you to use modern Javascript features without compromising browser support.
module This specifies what module code generator to use. By default it uses common.js.
outDir This specifies where the compiled js files should be.
rootDir This specifies where your ts files are stored.

Now create a new folder src and create a file server.ts with this content:

import Express from 'express'

const app = Express()
const port = 3000

app.get('/', (req, res) => {
  res.send("Hello From Express and Typescirpt")
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

And change the values of these two fields in tsconfig.json to the ones below:

...
"outDir": "./build", /* Redirect output structure to the directory. */
"rootDir": "./src",  /* Specify the root directory of input files. Use tocontrol the output directory structure with--outDir. */
...

Now if you run tsc command in the root directory a new directory build will popup containing the compiled js files.

Run node build/server.js to run your app.

If you run tsc --watch it will automatically compile your ts files to js whenever you make changes to your ts files.

Setting up auto-reload

Add two new dependency nodemon and concurrently to your project.

npm install nodemon concurrently --save-dev

nodemon will re-run your node app whenever the source files change.
concurrently will run both nodemon and tsc --watch at the same time.

Change the ourDir in your tsconfig.json to ./tmp.

...
"outDir": "./tmp",
...

Add these scripts in your package.json file.

...
"scripts": {
  "build": "tsc --outDir build",
  "serve": "concurrently --kill-others \"tsc --watch\" \"nodemon ./tmp/server.js \"",
  "start": "node build/server.js"
},
...

And remove the "main": "index.js" line from package.json.

Your package.json now should look like this:

{
  "name": "typescript-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc --outDir build",
    "dev": "concurrently --kill-others \"tsc --watch\" \"nodemon ./tmp/server.js \"",
    "start": "node build/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "concurrently": "^6.2.1",
    "nodemon": "^2.0.12",
    "typescript": "^4.4.3"
  }
}

npm run build will build your app for production use.

npm run start will run your app for production use.

npm run dev will run your app for development with auto-reloading enabled.

All React Hooks Explained

Siddharth Roy — Wed, 16 Feb 2022 03:05:35 +0000

Since React 16.8 the most common way to build a react component is using function because now we can have all the features of class components in functional components using hooks.

But why use a functional component instead of a class-based component?

Using a functional component with hooks reduces the line of codes and makes our code look more clean and readable.

In this blog, you are going to learn how to use the most used built-in react hooks and how to make a custom hook from scratch.

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef

`useState`

const [state, setState] = useState(initialState)

If you are used to class-based components you know that functional components don't state.

useState allows you to have state in functional components.

// const [value, setValue] = useState(initialValue)
const [name, setName] = useState('Siddharth')

console.log(name) // => Siddharth

setName('React') // sets the name to "React" and re-render the component

// Value of name after re-render

console.log(name) // => React

The useState hook is a function like every other hook. It takes an initial value and returns an array containing the value and a function to change the value.

On first render the value is set to initialValue.

The setValue function is for updating the value. It takes the new value as the first argument and triggers a re-render on the component.

Here is an example to understand it better:

import { useState } from 'react'

function App() {
  console.log('Component render')
  const [number, setNumber] = useState(32)

  function updateNumber() {
    setNumber(Math.random())
  }

  return (<>
    <p>{ number }</p>
    <br />
    <button onClick={updateNumber}>Update number</button>
  </>)
}

export default App;

NOTE: It's doesn't have to be named as value and setValue, you can name it anything you want but value and setValue style is preferred among all developers.

If the new value is based on the previous value then you can do this:

const [number, setNumber] = useState(0)

 function updateNumber() {
   // Do this
   setNumber(prevNumber => prevNumber + 1)
   // not this
   setNumber(number + 1)
 }

If you are storing an object inside a state then always use the object spread syntax to make a copy otherwise the component won't re-render.

const initialUserState = {
  name: 'Siddharth Roy',
  age: 17
}

const [user, setUser] = useState(initialUserState)

// Do this
setUser(prevState => {
  let newState = prevState
  newState.age = prevState.age + 1
  return {...prevState, ...newState} // Make a new copy using spread syntax
})
// After re-render user.age is 18


// Not this
setUser(prevState => {
  let newState = prevState
  newState.age = prevState.age + 1
  return newState
})
// Component won't re-render

The reason behind this is React uses Object.is for comparing new value to previous value and if they are the same It won't re-render, and Object.is does not check what's inside the object.

let obj1 = { name: 's' }
let obj2 = { name: 's' }

Object.is(obj1, obj2) // => false

obj2 = obj1

Object.is(obj1, obj2) // => true

// Using spread operator to copy the object
obj2 = { ...obj1 }

Object.is(obj1, obj2) // => false

NOTE: Spread operator won't copy nested objects, you will have to copy them manually.

`useEffect`

useEffect(didUpdate)

The useEffect hook has many use cases, it is a combination of componentDidMount, componentDidUpdate, and componentWillUnmount from Class Components.

Here is a simple demo of useEffect hook:

import { useState, useEffect } from 'react'

function App() {
  const [number, setNumber] = useState(0)

  useEffect(() => {
    console.log('This runs') // This will run when it mounts and update
  })

  return (<>
    <p>{ number }</p>
    <br />
    <button onClick={() => setNumber(prevNum => prevNum + 1)}>Increase Number</button>
  </>)
}

export default App;

The useEffect hook is a function that takes a function as its first argument and that function will run when the component mounts and update

As you saw the function ran the first time when the component got mounted and whenever it updated.

This function in the first argument of useEffect hook will only run when the component gets mounted and updated.

It also takes an array as a second optional argument and it behaves differently based on the array.

Like for this example, the function will run only run when the component mounts.

import { useState, useEffect } from 'react'

function App() {
  const [number, setNumber] = useState(0)

  useEffect(() => {
    console.log('Component Mounted') // Only runs when the component gets mounted
  }, []) // <-- Give an empty array in second argument

  return (<>
    <p>{ number }</p>
    <br />
    <button onClick={() => setNumber(prevNum => prevNum + 1)}>Increase Number</button>
  </>)
}

export default App;

The array we passed on in the second argument is called dependency list, when we omit the list the function run when the component mounts and when the component update (eg. When a state change), when we put an empty array in the second argument it only runs when the component gets mounted.

You can also put state inside the dependencies list and it will only run when the component gets mounted and when the state changes.

import { useState, useEffect } from 'react'

function App() {
  const [number, setNumber] = useState(0)
  const [message, setMessage] = useState('Hi')

  useEffect(() => {
    console.log('Component Mounted') // Only runs when the component gets mounted
  }, []) // <-- Give an empty array in second argument

  useEffect(() => {
    console.log('Component mounted or message changed')
  }, [message])

  useEffect(() => {
    console.log('Component mounted or number changed')
  }, [number])

  return (<>
    <p> { message} </p>
    <p>{ number }</p>
    <br />
    <button onClick={() => setMessage(prevMsg => prevMsg + 'i')}>Increase Hi</button>
    <button onClick={() => setNumber(prevNum => prevNum + 1)}>Increase Number</button>
  </>)
}

export default App;

You can put multiple states in the dependency list but do note that if you are accessing any state from inside the function in useEffect hook then you have to put that state in the dependencies list.

useEffect(() => {
  // Do stuffs
}, [state1, state2, state3])

// Don't do this
useEffect(() => {
  // Doing something with state1
}, []) // <= Not providing state1 in dependencies list

Now the last thing left is the cleanup function, this function is return by the function from the first argument and will run when the component gets unmounted.

useEffect(() => {
  // Initiate a request to API and update a state
  API.requestUserData()

  return () => { // Cleanup function
    // Cancel the request when the component gets unmounted
    API.cancelUserDataRequest()
  }
}, [])

Sometimes when we run an async function when the comp gets mounted if the function tries to update a state after the comp gets unmounted it can cause memory leaks so it's better to stop that from happening using the cleanup function.

`useContext`

const value = useContext(MyContext)

Normally if you want to share a state between components you would have to move the state to the uppermost component and then pass it down using props of every component. This method might be ok for small scale project but for a big scale project this can be tedious so to help with that useContext allow you to have a global state accessible from any component without passing down the state.

There are two functions to note when using Context API

// Create a context with a default value
const context = createContext(defaultValue) // defaultValue is optional

const value = useContext(conext) // Get the value from context

Here is an example using Context API

In App.js:

import { useState, createContext } from 'react'
import Component1 from './Component1'
import Component2 from './Component2'
import Adder from './Adder'

const Context = createContext()

function App() {
  const [number, setNumber] = useState(0)

  return (<Context.Provider value={{number, setNumber}}>
    <p>Number: { number }</p>
    {/* Any component inside this component can access the value of the context */}
    {/* We can also provide the value of the context here */}

      <Component1> {/* Dummy component */}
        <Component2> {/* Dummy component */}
          <Adder />
        </Component2>
      </Component1>

  </Context.Provider>)
}

export { Context };
export default App;

In Adder.js:

import { useContext } from 'react'
import { Context } from './App'

export default function Adder() {
    const contextValue = useContext(Context)

    return (<div style={{border: '1px solid black'}}>
        <p>Inside Adder Component</p>
        <p>Number: { contextValue.number }</p>
        <button onClick={() => contextValue.setNumber(prevNum => prevNum + 1)}>Add Number</button>
    </div>)
}

The result:

Explanation

In App.js we are creating a context and using the Provider Component inside the Context object returned by createContext as the uppermost component. Any component inside Context.Provider Component can access the value of the Context
We are also passing the number and setNumber from App.js as the value of the Context using the value prop of the Context.Provider component
We need to export this Context object to be used inside the other components when using useContext
In Adder.js we are simply importing the Context object and using it with useContext hook to get the value of the context
The object returned by useContext contains the value we provided in the value prop of the provider component

Note that whenever the value of context change the entire component tree gets re-rendered and can affect performance. If you don't want that behavior it's better to use external solutions for global state management like react-redux that only re-render the desired component.

You can also have multiple context and context providers if you want.

`useReducer`

const [state, dispatch] = useReducer(reducer, initialArg, init)

This is an alternative to useState, it takes an additional function called reducer, it's similar to how redux handles state.

useReducer is useful when you have a complex state, like an object with multiple sub-values.

Here is a simple counter example from React Docs using useReducer:

import { useReducer } from 'react'

const initialState = {count: 0}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1}
    case 'decrement':
      return {count: state.count - 1}
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  )
}

export default App

Here is another example using complex state:

import { useReducer } from 'react'

const initialState = {
  username: 'Siddharth_Roy12',
  age: 17,
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment_age':
      return {...state, age: state.age + 1}
    case 'decrement_age':
      return {...state, age: state.age - 1}
    case 'change_username':
      return {...state, username: action.payload}
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      <p>Username: { state.username }</p>
      <p>Age: { state.age }</p>

      <button onClick={() => dispatch({type: 'decrement_age'})}>-</button>
      <button onClick={() => dispatch({type: 'increment_age'})}>+</button>
      <input
        type="text"
        value={state.username}
        onChange={(e) => dispatch({
          type: 'change_username',
          payload: e.target.value
        })}
      />
    </>
  )
}

export default App;

Lazy initialization

You can also create the initial state lazily. To do this, you can pass an init function as the third argument. The initial state will be set to init(initialArg).

It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:

import { useReducer } from 'react'

const initialCount = 0

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1}
    case 'decrement':
      return {count: state.count - 1}
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialCount, init)
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  )
}

export default App

`useCallback`

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Usually, if you have an inline function in a react component, whenever that component re-render that function will also get re-created

The useCallback hook takes an inline function and a dependencies list and returns a memoized version of that function. That function will only recreate when its dependencies change.

You can visualize the function re-creation using a Set

NOTE: Set can only have unique elements. Object.is is used to check and remove duplicate elements.

Without useCallback:

import { useState } from 'react'

const functionsCounter = new Set()

function App() {
  const [count, setCount] = useState(0)
  const [otherCounter, setOtherCounter] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }
  const decrement = () => {
    setCount(count - 1)
  }
  const incrementOtherCounter = () => {
    setOtherCounter(otherCounter + 1)
  }

  functionsCounter.add(increment)
  functionsCounter.add(decrement)
  functionsCounter.add(incrementOtherCounter)

  console.log(functionsCounter.size)

  return (
    <>
      Count: {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={incrementOtherCounter}>incrementOtherCounter</button>
    </>
  )
}

export default App;

With useCallback:

import { useState, useCallback } from 'react'

const functionsCounter = new Set()

function App() {
  const [count, setCount] = useState(0)
  const [otherCounter, setOtherCounter] = useState(0)

  const increment = useCallback(() => {
    setCount(count + 1)
  }, [count])
  const decrement = useCallback(() => {
    setCount(count - 1)
  }, [count])
  const incrementOtherCounter = useCallback(() => {
    setOtherCounter(otherCounter + 1)
  }, [otherCounter])


  functionsCounter.add(increment)
  functionsCounter.add(decrement)
  functionsCounter.add(incrementOtherCounter)

  console.log(functionsCounter.size)

  return (
    <>
      Count: {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={incrementOtherCounter}>incrementOtherCounter</button>
    </>
  )
}

export default App;

The use cases of the hook are very small, you will most likely never have to use this hook.

`useMemo`

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

The useMemo hooks take a function to compute a value and a dependency array and return a memoized value. This will only re-compute the value when its dependencies have changed.

This hook is useful when you are doing expensive calculations inside a component every time it renders.

An example without useMemo:

function DemoComponent() {
  const [state1, setState1] = useState(3)
  const [state2, setState2] = useState(Math.PI)

  const someValue = computeExpensiveValue(state1, state2) // Takes 0.6ms on every render

  return (<>
    { someValue }
  </>)
}

With useMemo:

function DemoComponent() {
  const [state1, setState1] = useState(3)
  const [state2, setState2] = useState(Math.PI)

  const someValue = useMemo(() => {
    return computeExpensiveValue(state1, state2) // This only runs when the state1 or state2 changes
  }, [state1, state2])

  return (<>
    { someValue }
  </>)
}

`useRef`

const refContainer = useRef(initialValue)

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.

The most common use case of this hook is to store a reference to a DOM Element.

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus()
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Another use case is to store a mutable value and it will persist during the entire life cycle of the component, but do note that whenever you change the .current property the component won't re-render.

Custom hook from scratch

Now that you have learned how to use all react hooks It's time to build your own hook from scratch.

A custom hook is just a regular javascript function that uses the other hooks provided by React to extract component logic into a reusable function.

For example, look at this component

function App() {
  const mounted = useRef(false)

  useEffect(() => { // To check if component is mounted or not
        mounted.current = true

        return () => { 
            mounted.current = false
        }
    }, [])

  // To check if the component is mounted or not check mounted.current
  if (mounted.current) {
    ...
  }
}

This component uses two hooks to check if the component is mounted or not. This is useful when you are running a long async function and the component can dismount at any time.

We can extract this logic into a reusable function.

function useIsMounted() { // React hook name must start from use
  const mounted = useRef(false)

  useEffect(() => {
        mounted.current = true

        return () => { 
            mounted.current = false
        }
    }, [])

  return () => mounted.current
}

Then use it like this

function App() {
  const isMounted = useIsMounted()

  // To check if is mounted
  if (isMounted()) {
    ...
  }
}

Now our code looks more cleaner and we can use the same logic in many components.