Forem: Amarjit Singh

Understanding the useReducer hook in React

Amarjit Singh — Sat, 10 Jul 2021 06:17:16 +0000

What is useReducer?

useReducer is one of the additional hooks that shipped with React 16.8 . It is an alternative to useState hook and helps in managing complex state logic that involves multiple sub-values or when the next state depends on the previous one. When combined with useContext and other hooks, it can be a good alternative to redux.
Also, useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

How to use useReducer hook?

Just like any other hook in React, you first need to import it from react.

  import {useReducer} from 'react';

Now, just like the useState hook, useReducer hook also returns two things in an Array : the current state value and a dispatch function to which you can pass an action and invoke later.

const [state, dispatch] = useReducer(reducer, initialState)

We use Array destructuring to get the state and dispatch.
The useReducer takes two parameters. The first one is the reducer function and second is the initialState.

Reducer Function :

A "reducer" is generally a function that accepts two parameters and returns a single value.
A simple example would be the reducer function that we pass to the reduce() method in JavaScript.

let array = [1, 2, 3];
let reducer = (total, number) => {
  return total + number;
}
let sum = array.reduce(reducer, 0);
console.log(sum) // 6

The Reducer function that we pass to useReducer is also similar.

const initialState = { count: 0 }
 // The reducer function

function countReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    case 'RESET':
      return {count: state.count = 0}
    default:
     return { count: state.count  }
  }
}

The reducer function above takes two parameters, first is the current state and second is the action which tells us the operation to be performed.
Here, we have used a Switch Statement and based on the value of action.type we perform the corresponding operation on the state.

Dispatching the action

Now, in order to call the Reducer function to perform an operation on the state we use the dispatch function.

export function Counter() {
  const [state, dispatch] = useReducer(countReducer, initialState)

  return (
    <div>
      Count: {state.count}
       <button onClick={() => dispatch({ type: 'INCREMENT'})}>+</button>
       <button onClick={() => dispatch({ type: 'DECREMENT'})}>-</button>
       <button onClick={() => dispatch({ type: 'RESET'})}>Reset</button>
    </div>
  );
};

When we call the dispatch function, the current state is automatically passed as the first argument. Therefore, we only pass the action object, which has the type of action we want to perform on the state.

Conclusion:

The above example is a basic implementation of useReducer. However, it can be used to perform complex state logic. In that case, both our state and action objects will be a collection of many key value pairs.

In my next blog, I will explain on how to use useReducer with useContext for global state management.

I hope you learnt a lot from this blog. Try implementing what you have learnt in your projects. If you enjoyed this post, I’d be very grateful if you’d share it. Comment below if you have any doubts or questions.

Thank you for Reading!

Understand Hoisting in JavaScript once and for all

Amarjit Singh — Thu, 08 Jul 2021 11:10:29 +0000

What is Hoisting?

Hoisting is a JavaScript behavior in which a function or variable can be used before declaring it. JavaScript moves the function and variable declarations to the top of their scope just before executing it, Due to which we can access them even before its declarations.
Let's understand it by going through some examples.

Variable Declarations:

When using `var` keyword :

Below is an example where we have declared a counter variable and set its value to 1. However we are trying to console.log it before its declaration.

console.log(counter); // undefined
var counter = 1;

On executing we get the counter value as undefined. This is because JavaScript only hoists declarations.
JavaScript hoists the declaration of counter and initializes its value as undefined. Therefore, the code looks something like this in the execution phase.

var counter;
console.log(counter); // undefined
counter = 1;

When using `let` or `const` keyword :

When using let or const keywords, JavaScript hoists the declarations to the top but it will not be initialized.

console.log(counter);
let counter = 1;

Therefore when we try to console.log counter before initializing it, we will get ReferenceError

ReferenceError: Cannot access 'counter' before initialization

The same thing happens with the const keyword.

Function Declarations:

Like Variables, JavaScript also hoists function declarations. It means that it moves the function declarations to the top of the script.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

function add(a, b){
   return a + b;
}

Now the above example won't result in error even though we are calling the add() function before defining it.
The code looks something like this during execution:

function add(a, b){
   return a + b;
}

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

When using an Arrow Function or Anonymous Function:

In the below example we change add from a regular function to an anonymous function.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

var add = function(x,y) {
   return a + b;
}

Now, when JavaScript hoists the declaration of add variable it initializes it as undefined. Therefore, we get an error like this

TypeError: add is not a function

Now, You might be wondering what will happen if we use let instead of var.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

let add = function(x,y) {
   return a + b;
}

We will get an error again but this time the error message will be different as JavaScript will hoist the declaration of add but it will not be initialized.

Uncaught ReferenceError: greet is not defined

The same thing will happen if we use an Arrow Function because Arrow functions are nothing but syntactic sugar for defining function expressions.

Some Tips to avoid Hoisting:

Declaring your variables at the top is always a good rule.
You can also use Strict Mode.
In the case of variables, it is better to use let than var.

Hoisting in JavaScript is an important concept to understand as it might lead to bugs and unexpected behavior in your code.
That's it, I hope you learnt a lot from this blog. If you enjoyed this post, I’d be very grateful if you’d share it. Comment below if you have any doubts or questions.

Thank you for Reading!🙂

Basic Guide to use React Router v6

Amarjit Singh — Wed, 07 Jul 2021 05:53:40 +0000

Single Page Applications in React require a means of routing to navigate on to different views without refreshing the webpage. This can be done using React Router.
If you don't know how router works in React, I suggest you read about it and then follow this guide to get updated with the latest version of it.
The v6 of React Router is still in beta mode. This Blog is going to give you a peek into some of the new features that the library is coming out with.

1. `<BrowserRouter>`

We first need to import <BrowserRouter>. It is an interface which is required to use React Router. Here we have used an alias Router which makes it easier to write. We import it in our index.js file and wrap it around our <App/>

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
    <Router>
      <App />
    </Router>,
  rootElement
);

Its syntax is much similar to that of context APIs. It means that the App Component and its children will now have access to the Router APIs.

2. `<Routes>` and `<Route>`

Routes is a new element and an upgrade from previous Switch Component. It includes features like relative routing and linking, automatic route ranking and so on.
A Route has two main props, path which is nothing but the URL path and element which is the component to be rendered when the current URL matches the path.
Below is an example where we have three Route

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/menu" element={<Menu />} />
  <Route path="/about" element={<About />} 
</Routes>

3. `<Link>` and `<NavLink>`

When we use a simple <a href="abc.com">Some Link</a> for navigating it leads to refreshing of the webpage. To avoid this React Router provides a Link element.
A Link is an element that lets the user navigate to another page by clicking or tapping on it.
It has a prop to where we provide the path to which it should navigate.

import React from 'react';
import { Link } from 'react-router-dom';

export function Navbar() {
  return (
    <nav>
      <Link to="/home"> Home </Link>
      <Link to="/about"> About </Link>
    </nav>
  )
}

Link and NavLink are very similar and the only difference is that Navlink knows whether or not it is active. This is useful when you want to apply a style to the link which is active.

import React from 'react';
import { NavLink } from 'react-router-dom';

export function Navbar() {
  return (
    <nav>
      <NavLink to="/home" activeStyle={{textDecoration:"underline" , color:"red"}}> Home </Link>
      <NavLink to="/about" activeStyle={{textDecoration:"underline" , color:"red"}}> About </Link>
    </nav>
  )
}

4. `useNavigate hook`

The useNavigate hook lets you navigate programmatically . This is useful any time you need to navigate imperatively, e.g. after the user submits a form or clicks on a button.

import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  let navigate = useNavigate();
  let [error, setError] = React.useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    let result = await submitForm(event.target);
    if (result.error) {
      setError(result.error);
    } else {
      navigate('success');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      // ...
    </form>
  );
}

5. `useParams hook`

The useParams hook is used to access the URL params. It is very useful in case you want to make an Individual ProductPage for products in an Ecommerce App.

<Route path="/products/:id" element={<ProductPage />} />

When used in a nested route it returns an object of all the params in the URL. Below is a simple implementation on how to use useParams to access the URL params.

import React from 'react';
import { useParams } from 'react-router-dom';
import { products } from './data/products';

export function ProductPage() {
  const { id } = useParams()
  const product = products.find(el => el.id === id)
  return (
     <li key={product.id}>
        <h3>{product.name}</h3>
        <p>{product.description}</p>
        <p>{product.price}</p>
     </li>
  );
}

I hope you learnt a lot from this blog. Now, you can try implementing the latest version of React Router in your projects. You can also check the docs for more information.

If you enjoyed this post, I’d be very grateful if you’d share it. Also, This is my first blog. I am open to any suggestions. Comment below if you have any doubts or questions.

Thank you for reading!