DEV Community: SangeetaGogoi

Most commonly used React Hooks

SangeetaGogoi — Sat, 16 Oct 2021 13:24:57 +0000

We are going to learn about React hooks in this blog.
Let us start with its introduction:

Hooks are new addition to React that lets us use state, and other React features such as Lifecycle methods, without writing a class.

Types of Hooks in React are:

1.State Hook
Using the useState hook lets us add a React state to our functional component.The useState function is a built-in hook that can be imported from the react package.

Importing useState hook from react

& Declaring a State Variable:

In a functional component we directly call the useState hook inside our component.

import React, {useState} from "react";

function Example(){
const [time, setTime] = useState(0);
//..
}

useState hook returns a pair of values: the current state and a function that updates it. This is why we write const [time, setTime] = useState().

Reading a State

In a functional component we can use 'time' as :

  <p>You clicked {time} times</p>

Updating a state

<button onClick={() => setTime(time + 1)}>
    Submit
</button>

Putting together the whole code:

import React, {useState} from "react";

function Example(){
const [time, setTime] = useState(0);

 <p>You clicked {time} times</p>
<button onClick={() => setTime(time + 1)}>
    Submit
  </button>
}

2. Effect hook

The purpose of the useEffect hook is to allow us to perform side effects within a functional components. Examples of side effects we will typically perform in a React application are: data fetching, setting up a subscription, and manually changing the DOM in React components.

It accepts two arguments:

1.callback function
2.Dependencies Array

useEffect(callback[, dependencies]);

We can put side-effect logic into the callback function, then use the dependencies argument to control when we want the side-effect to run. That’s the purpose of useEffect().

The dependencies of useEffect()

Three cases with dependencies array:
1. No dependency array :

import { useEffect } from 'react';

function App(){
useEffect(() => {

    });
}

In this case, the callback gets fired after the initial rendering and everytime any of the component state changes.

2. Empty dependency array :

import { useEffect } from 'react';

function App(){
 useEffect(() => {

    }, []);
}

In this case, the callback gets fired only once after the initial rendering.

3. With dependencies :

import { useEffect } from 'react';

function App(){
useEffect(() => {

    }, [dependency1, dependency2]);
}

In this case, the callback gets fired after the initial rendering and every time any of the dependencies in the dependencies array changes.

Summary :

useEffect(callback, dependencies) invokes the callback after initial mounting, and on later renderings, if any value inside dependencies has changed.

3. Ref hook

useRef() is JavaScript function, which creates and returns a mutable JavaScript object.
This hook accepts some value and returns an object with the given value.

Syntax
Importing the ref hook and setting up looks like:

import {useRef} from 'react';

const refContainer = useRef(initialValue);

Use cases

1.Getting access to DOM nodes
The use case of useRef() is getting access to DOM nodes. If we want to pass the value we get from useRef() as a ref prop on any React element, React will set the .current property of an element to the corresponding DOM node. This allows us to do things like grab input values or set focus, for example in the Form below:

import {useRef} from 'react';

const Form =() =>{

const nameRef = useRef();

//Here variable Name contains the current value of input field 
const name = nameRef.current.value; 

return(
    <>
      <label>
        Name:
        <input
          placeholder="name"
          type="text"
          ref={nameRef}  
        />
      </label>
      //Here we added an event which will set the input to focus when user clicks on the button
      <button onClick={() => nameRef.current.focus()}>
        Focus Name Input
      </button>
  </>
)
}

2.Storing Values

A unique way to implement a useRef() hook is to use it to store values instead of DOM references. These values can either be a state that does not need to change too often or a state that should not trigger full re-rendering of the component. This can be used when we want to implement toggle function, for example:

let toggled = useRef(false);

  const handleToggle  = () => {
    toggled.current = !toggled.current;
  }

return(
<>
   <label onMouseMove={handleToggle}></label>
</>
)

4.Context hook

useContext hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level. Context defined will be available to all the child components without involving props.

Importing the hook from the React library:

import {useContext} from 'react';

We call useContext() function, which accepts context object as argument and returns current context value:

const contextValue = useContext(MyContext);

The context object should be created above the useContext() hook before the hook is called (or imported from another file).

Usage of useContext() in functional component is same as we would use Context API, except that the hook works with a MyContext.Provider and MyContext.Consumer component in one call.

Let us consider, we are building app where we have a button and by clicking on it the status of authentication is changed from Yes to No.

Firstly we need to create Context:

// Creating the context object and passing the default values. 

export const authContext = React.createContext({status:null,login:()=>{}});

Now we import Context to our file and use it's values anywhere we find it necessary:

import {AuthContext} from './authContext';
import {useContext} from 'react';

export const Auth = () =>{

const auth = useContext(AuthContext); 

return ( 
    <> 
      <h1>Are you authenticated?</h1> 
      {auth.status ?  <p>Yes you are</p> :  <p>No you are not</p> 
       } 
      <button onClick={auth.login}>Click To Login</button> 
    </> 
  ); 
}

Summary

React’s useContext hook makes it easy to pass data throughout your app without manually passing props down the tree.

References For this blog

Lesser used React Hooks

SangeetaGogoi — Sat, 16 Oct 2021 13:18:17 +0000

In this blog we are going to talk about React hooks that are not used commonly.

1. useMemo Hook :

The useMemo is a hook used in the functional component of react that returns a memoized value.In react also, we use this concept, whenever in the React component, the state and props do not change the component and the component does not re-render, it shows the same output.

Syntax :

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

useMemo takes in a function and an array of dependencies.

Usage of useMemo :

const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])

2. useCallback Hook :

The useCallback hook is used when we have a component in which the child is rerendering again and again without need.

Syntax :

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

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

Purpose of useCallback

function MyComponent() {
  // handleClick is re-created on each render
  const handleClick = () => {
    console.log('Clicked!');
  };

  // ...
}

handleClick is a different function object on every rendering of MyComponent.

But in some cases you need to maintain a single function instance between renderings:

A functional component wrapped inside React.memo() accepts a function object prop
When the function object is a dependency to other hooks, e.g. useEffect(..., [callback])
When the function has some internal state, e.g. when the function is debounced or throttled.

That’s when useCallback(callbackFun, deps) is helpful: given the same dependency values deps, the hook returns (aka memoizes) the function instance between renderings:

import { useCallback } from 'react';

function MyComponent() {
  // handleClick is the same function object
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  // ...
}

3.useReducer Hook :

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.

Syntax

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

It accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.

Here is the countReducer example;

const initialState = { count: 0 }

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

Specifying the initial State

Two ways to initialized the useReducer state;

1. Basic :

We can just give it as a second argument to useReducer call;

const [state, dispatch] = useReducer(
  countReducer,
  { count: 0 } // second argument
);

2. Lazy Initialization :

const initState = (defaultCount) => ({ count: defaultCount })

const Counter = ({ counter }) => {
    const [state, dispatch] = useReducer(
      countReducer,
      counter, // second argument
        initState // third argument
    );

    // Rest of the component...
}

Usage
After we initialize it we just need to call dispatch functions that we are getting from useReducer hook and use it as a handler inside our elements.

React guarantees that dispatch function identity is stable and won’t change on re-renders.

const Counter = ({ counter }) => {
    const [state, dispatch] = useReducer(countReducer, 0);

    return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

REST API in Express (ES6)

SangeetaGogoi — Sat, 16 Oct 2021 13:17:08 +0000

What is a REST API

From Redhat
A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.

To create a Nodejs project (for a runtime environment) we will create a folder called rest-api and run the command.

npm init - y

Once that is done, we will install few packages

npm i --save express cors mongoose

Discussing the packages

Express: It is used to write the main code for the REST API
Cors: Used to make requests from a different domain. Eg: Request from frontend which is hosted in http://localhost:3000 to the backend which is http://localhost:5000
Mongoose: Mongoose is an ORM package which we will need to communicate with MongoDB.

To run ES6 import code instead of require we will add this piece of code to our package.json

"type": "module"

Paste the following code

import express from 'express';
import mongoose from 'mongoose';
import cors from 'cors';

import authRoutes from './auth.routes.js';

const app = express();
const port = process.env.PORT || 8000

app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cors())

authRoutes(app);

mongoose.connect(process.env.mongoURI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Connected to Database");
}).catch(err => {
    console.log('Could not connect to the database', err);
    process.exit();
});

app.listen(port, () => {
    console.log('Backend is running on port: ' + port)
})

Explaining the code step by step

import express from 'express';
import mongoose from 'mongoose';
import cors from 'cors';

First we are going to import the libraries that we have installed

import authRoutes from './auth.routes.js';

Here we are importing a file, which we will create soon.

const app = express();
const port = process.env.PORT || 8000

In the first line we are creating an instance of express to use through out the app
In the second line we are declaring a port variable to that takes value from an .env file or the value is 8000

app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cors())

app.use(express.urlencoded({extended: true })) is a method inbuilt in express to recognize the incoming Request Object as strings or arrays.

app.use(express.json()) is a method inbuilt in express to recognize the incoming Request Object as a JSON Object

app.use(cors()) is using cors as a middleware for incoming requests from a different origin.

authRoutes(app);

authRoutes(app) here we calling authRoutes function passing the app instance.

mongoose.connect(process.env.mongoURI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Connected to Database");
}).catch(err => {
    console.log('Could not connect to the database', err);
    process.exit();
});

app.listen(port, () => {
    console.log('Backend is running on port: ' + port)
})

These lines of code are used to connect to the mongodb and also check if it's running on which port.

import { register, login } from './auth.controller.js';

const authRoutes = (app) => {
  app.route('/register')
    .post(register)
  app.route('/signin')
    .post(login)
}

export default authRoutes

Here we are routing the requests based on the method that is incoming.

import bcrypt from 'bcryptjs';
import User from './User.model.js';

export const register = (req, res) => {
  const { email, password, name, dob, gender } = req.body.userDetails
  const userData = {
    email, password, name, dob, gender
  }
  if (!email || !password || !name) {
    return res.status(422).json({ error: "Please add all the credentials" })
  }
  User.findOne({ email })
    .then((data) => {
      if (data) {
        res.send({ error: 'Email already registered' });
      } else {
        bcrypt.hash(password, 10, (err, hash) => {
          userData.password = hash;
          User.create(userData, (err, data) => {
            res.status(200).json({ msg: 'Successfully registered' });
          })
        })
      }
    })
    .catch((err) => res.send({ error: err }))
};

export const login = (req, res) => {

  const { email, password } = req.body.userDetails;
  User.findOne({ email: email })
    .then((user) => {
      if (!user) {
        res.send({ error: 'Account not found' })
      } else {
        if (!bcrypt.compareSync(password, user.password)) {
          res.send({ error: "You entered a wrong password" })
        } else if (bcrypt.compareSync(password, user.password)) {
          delete user.password;
          res.status(200).json({ user: user.toJSON() });

        }
      }
    })
    .catch((err) => res.json({ error: err }))
}

I will not go into the details too much but here we have written two function for login and register.

While registering we are doing basic check if email, password and name are present or not. Before registering to our app, we will check if he is already present or not in the database. If he isn't present we will register him and use bcrypt to encrypt his password and save to database.

While logging in we are checking if the user is present or not. If not, we send an 'Account not found' error. If present, we pull out his data from database, remove his password and send back the data to the frontend.

import mongoose from 'mongoose';

const Schema = mongoose.Schema;

const UserSchema = Schema({
  name: {
    type: String,
    maxlength: 50,
  },
  email: {
    type: String,
    trim: true,
    unique: true,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
  gender: {
    type: String
  },
  dob: {
    type: Date
  }
})

const User = mongoose.model('User', UserSchema)
export default User;

Lastly, this is the User schema for all the users.