DEV Community: Dheeraj Purohit

Debouncing De-coded

Dheeraj Purohit — Fri, 14 Apr 2023 07:43:49 +0000

Hello and welcome to my blog. Today, we are going to write a debounce function from scratch and I will explain the code line by line.

Definition

Debouncing is a technique used to optimize asynchronous operations, such as fetch calls to APIs and scroll events. In simple terms, debouncing delays the processing of an event.

Input Element without Debouncing

The following code demonstrates an input element without debouncing:

For every user input (keyup/keydown) event, the event listener ("onClick") calls the event handler function (in our case, the handleChange function). For a small application, this won't cause any performance delays, but for large data websites like Flipkart and Meesho, the repeated function call can cause performance delays.

Optimization

To optimize the input element, we can implement the following changes:

Instead of setting the event value on every change, we can delay the process of setting the event value by a certain waiting time (in milliseconds).
Inside the handleChange function, we are setting the input value on every user input. However, we just need to delay the process of setting that event value to the query (setQuery(e.target.value)).

Debounce Implementation

We are going to build the debounce function step by step. The first step is to delay the function call. To do this, we can use the timer function. However, we need to make a function call after some delay, which is where the setTimeout function comes in.

Here is the code implementation following the above steps:

 const debounce = (cb, wait) => {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            cb(...args);
        }, wait);
    };
  };

Here is a breakdown of what each line does:

The debounce function returns a function, as it will be called multiple times.
The debounce function accepts a callback function and a wait time for delay.
As discussed, we are delaying the callback function execution call by the wait time .
The callback can be a fetch request or a setter function.
To execute the callback, we need to make sure previous setTimeouts are cleared .
The user can pass another event before the previous timer gets completed, so we need to clear the timer to handle that case.

Input Element with Debouncing

Here is an example of what the input element looks like with debouncing:

We can see that there is a slight delay.
we achieved the goal

That brings an end to this blog. Thanks for reading and happy coding!

Props Revisited

Dheeraj Purohit — Wed, 14 Dec 2022 12:51:39 +0000

Hello and welcome to this blog I am writing this blog as a revision for react
So today we are going to re-visit a topic in react call props

So the first question is why do we need props ?

props make our data , component reusable
props are immutable
data passed from outside of component

How to pass props at a very basic level

<CustomComponent name="radhe-krishna"/>

so here we are passing prop -> name in custom component
where name is the key and radhe-krishna is value
Internally every jsx element transpiles to object(POJO)
therefore , props are nothing but objects with key value pair

How to access props in a component ?

Consuming props in a Component

function CustomComponent(props) {
  return <div>{props.name}</div>;
}

prop is an object , so to access the values of props we can use dot operator
But why props.name ?
remember we wrote our key as name
so basically we are using that key to access the value(prop) we defined in custom component
As we already know component transpile to object ? right! so props is pre-defined key-name inside JSX object
whenever we pass any props to custom component , we can access the prop using props.propName

do you know before react we having been using props in native html elements like anchor(href),img(src)

can we use custom props in native `DOM` elements ?

Repeat After me, NO! we can't pass custom props to native dom elements

Basic Introduction Completed!

Advance Props Guide

Before learning more about props , we can have one small basic props exercise, so here you go

- open code sandbox (react environment)
- make a custom component call `Info.jsx`
- render the custom component in app
- pass basic details `firstname, lastname, age, city, profession` as a prop
- consume that information in `Info` component and display

I myself is doing this mini-exercise while writing this article 😃🥳

My solution for exercise

If you did it ? Well Done! you know props
If got stuck with non-string props or destructuring no worries we will cover this together, continue reading 😊

A Friendly Water Reminder if you haven't

What did you learn new with that exercise ?

Passing non-string props, multiple props, consuming multiple props
Let me dissect it step by step
From the previous exercise, I passed props to custom component in this way :

 <Info
        firstName="Dheeraj"
        lastName="Purohit"
        age="23"
        city="Mumbai"
        profession="Developer"
      />

Well Everything was in double quotes ""
Also called as String Props
We could do it differently for non-string props like age or any boolean props

Non-String and Multiple Props

A) Non-String

 <Info
        firstName="Dheeraj"
        lastName="Purohit"
        age={23}
        isIndian={true}
        city="Mumbai"
        profession="Developer"
      />

Did you noticed we added {} braces around non-string props values
hey but still it looks weird right ? we are passing multiple props affecting the readability.

B) Multiple Props

export default function App() {
  const propsData = {
    firstName: "Dheeraj",
    lastName: "Purohit"
  };

  return (
    <div className="App">
      <Info {...propsData} />
    </div>
  );
}

For Multiple props we can store our props value in object
propsData is an object having our props value
We are passing multiple props to Info component using object spread operator, so simple and readable right!

javaScript info for spread syntax

PAY ATTENTION!

3) Consuming multiple Props and Object as a Prop

A) Consuming Multiple Props

export function Info(props) {
  const { firstName, lastName, age, city, profession, isIndian } = props;

  return (
    <div>
      <ul>
        <li>{firstName}</li>
        <li>{lastName}</li>
        <li>{age}</li>
        <li>{city}</li>
        <li>{profession}</li>
        <li>{isIndian ? "Indian" : "Non-Indian"}</li>
      </ul>
    </div>
  );
}

we can consume multiple props using object destructuring
const { firstName, lastName, age, city, profession, isIndian } = props
after destructuring we can directly use the name of props in UI part of (after return element)

B) Using Multiple Props (Object) without destructuring

there are multiple patterns followed in react , so destructuring is one of them
we can also access prop value by using props.keyName.propsName
Lets see how to do that

export default function App() {
  const propsData = {
    firstName: "Dheeraj",
    lastName: "Purohit"
  };

  return (
    <div className="App">
      <Info propsData={propsData} />
    </div>
  );
}

we are passing props our old key value pair
propsData is key for props
now lets consume it

export function Info(props) {
  return (
    <div>
      <ul>
        <li>{props.propsData.firstName}</li>
        <li>{props.propsData.lastName}</li>
      </ul>
    </div>
  );
}

remember i mentioned we are going to use props.keyName.propsName
so here we are directly using props
re-iterating props is general key for accessing props propsData is our keyName and propsName are firstName and lastName

Refactoring time

we have learned something new , so to make it concrete try to refactor the previous exercise and see how readable our code becomes.

Ending Note!
- i might have missed some parts of props, but tried to put it here as a part of my revision
- if you find this article helpful, like, share with others who is learning react
- if you find any spelling mistake, wrong term used do let me know in comments and your feedback about this blog

Happy Coding
Jai Shri Krishna🙏💜

Optimized React Search Bar 🔯

Dheeraj Purohit — Sun, 13 Nov 2022 09:27:56 +0000

Recently while learning react I came across a term called debouncing ??? so what does it mean ?
let's decode it together and understand how we can use debouncing in optimizing our search/ filter component

Let's Learn , Build and Share

Learn

Debouncing🏀

Debouncing refers to an optimization technique used to regulate the timeframe/interval after which a task will be executed.
for example, in search bar every state change (onChange) will cause the component re-render multiple times based on input given.
not really ~~good~~ if our component, re-renders such multiple time

Problem Statement for search component

on every event(onChange) state gets updated and component re-renders...
we can optimize it by providing a slight delay in state update using debouncing.

Build

talk is cheap, show me the code

Absolutely! let's deep dive into code right away, we are going to build an search bar which will filter data based on given input and display the corresponding data for it (search pokemon name and display the character accordingly)

for build part i am going to use codesandbox
Use React + typescript template
follow along 😊

Steps to be followed

html for view to be rendered
setup event handlers, states(can you guess what will be our states ?)
making an api call after render (effects)
add debouncing (hook) to limit the state update



export default function App() {
  return (
    <div className="App">
      <input type="text" />
      <ul>
        {/* here we will map our data and display */}
        <li>Pokemon Name</li>
        <li>
          <img src="#" alt="pokemon" />
        </li>
      </ul>
    </div>
  );
}

Output so far:

states, event handlers, types (its good to start including ts in code, event small bits can be helpful to learn typescript)



import { useState } from "react";
import "./styles.css";

type Pokemon = {
  name: string;
  image: string;
};

export default function App() {
  const [filter, setFilter] = useState<string>("");
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);

  return (
    <div className="App">
      <input
        value={filter}
        type="text"
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {pokemonData.map((pokemon) => (
          <li key={pokemon.name}>
            <h1>{pokemon.name}</h1>
            <img src={pokemon.image} alt={pokemon.name} />
          </li>
        ))}
      </ul>
    </div>
  );
}

the code is pretty straight forward
we are using filter state variable for storing input value (e.target.value) remember ?
pokemonData state variable will be used for storing an array of objects coming from api
some types are included (use TS documentation if it seems confusing)

Api Calls with Side Effects (useEffect)🔥



  useEffect(() => {
    // will be called after every state (filter) update
    console.log("called");

    const getPokemonData = async () => {
      const pokemonList = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${filter}`
      );

      const pokemonListToJson = await pokemonList.json();

      return {
        ...pokemonListToJson,
        name: pokemonListToJson.name,
        image: pokemonListToJson.sprites?.front_shiny
      };
    };

    getPokemonData().then((pokemon) => setPokemonData([pokemon]));
  }, [filter]);

here comes the OG part where we are calling an api
useEffect takes two params - (callback function, dependency array)
so our dependency array is [filter], which means on every updates done by setFilter , filter state variable will be updated (user input) and cause the callback function to be called inside effect
in callback function we are making an async call with async-await syntax (pretty simple to use, have a quick glance on syntax if you are not familiar with it)
once we get data we store that object in pokemonData array with the setter function setPokemonData().

Output of view after adding useEffect hook

Chimchar

Gengar

everything works fine till now,

so where's the problem

let me take you to the problem (re-rendering)

its a log for query="gengar" where our side-effects were called six time causing component re-render on each change made to filter state variable
this can drastically affects the performance of our app on large-scale

Solution

Debounce

to debounce our input we will use useDebounce hook
Installation :- npm i use-debounce
if using codesandbox, add dependency from bottom left panel by typing use-debounce

add debouncing (hook) to limit the state update



import { useEffect, useState } from "react";
import "./styles.css";
import { useDebounce } from "use-debounce";

type Pokemon = {
  name: string;
  image: string;
};

export default function App() {
  const [filter, setFilter] = useState<string>("");
  const [debouncedFilter] = useDebounce(filter, 500);
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);

  useEffect(() => {
    // will be called after every state (filter) update
    console.log("side effect called");

    const getPokemonData = async () => {
      const pokemonList = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${filter}`
      );

      const pokemonListToJson = await pokemonList.json();

      return {
        ...pokemonListToJson,
        name: pokemonListToJson.name,
        image: pokemonListToJson.sprites?.front_shiny
      };
    };

    getPokemonData().then((pokemon) => setPokemonData([pokemon]));
  }, [debouncedFilter]);

  return (
    <div className="App">
      <input
        value={filter}
        type="text"
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {pokemonData.map((pokemon) => (
          <li key={pokemon.name}>
            <h1>{pokemon.name}</h1>
            <img src={pokemon.image} alt={pokemon.name} />
          </li>
        ))}
      </ul>
    </div>
  );
}

import useDebounce in your file
useDebounce accepts a value and delay
we have passed filter(search value) to useDebounce(filter,500) with a delay of 500ms
debouncedFilter state variable will store the filter value passed into debounce hook.
take your time to understand the flow , how we are passing the data into debounce hook
and finally time to change our dependency arr, earlier our side effect was called everytime filter state variable is updated
now side-effect will be called when debouncedFilter will update on a interval of 500ms.
so we achieved some sort of optimization in our search bar
state will be updated on every 500ms and not one every input change done by user.

Final Code Sandbox Solution

xvi2tj.csb.app

Thank you for making this far!
Today we covered a lot be it states, effects, de-bouncing, and of-course got to know about pokemon

So congratulations!🎉
keep learning keep building 🤘

You can connect with me :

Twitter	LinkedIn	Github

React for beginners

Dheeraj Purohit — Sat, 15 May 2021 09:52:51 +0000

Hello today we are going to build a todo list app in react by which you can understand basics of react how it works

we can use code sandbox CodeSandbox here to get started with react it provides an template to build our web apps faster.

To start with your todo app create a new sandbox by selecting react template.

After creating an sandbox react-template checkout how files are organized in react and this structure is going to be common in react.

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

For our todo list application all our code is to be done in app.js.

So Let's Get Started...

1) Adding Input Element to our App

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
       // heading
        <div className="heading">
          <h1>TO-DO App</h1>
       </div>


      // form element to take input from user

        <form className="formtodo">
          <input placeholder="Enter Your Text Here..."
            type="text"
            id="todoValue"
          ></input>
          <button type="submit">Add Todo</button>
        </form>


    </div>
  );
}

2) Adding onChange and onSubmit to input

App.js

import "./styles.css";

export default function App() {

function handleSubmit(){
// event handler function
}

function changeHandler(e){
// event handler function
}

return (
    <div className="App">
       // heading
        <div className="heading">
          <h1>TO-DO App</h1>
       </div>


      // form element to take input from user
      // adding onSubmit and onChange event listener.

        <form className="formtodo" onSubmit={handleSubmit}>
          <input 
            onChange={changeHandler}
            placeholder="Enter Your Text Here..."
            type="text"
            id="todoValue"
          ></input>
          <button type="submit">Add Todo</button>
        </form>


    </div>
  );
}

Here we have declared two event listener method onChange and onSubmit to handle user input and these event listener method will call event handler functions to further process the input of user.

3) Adding useState hook

What is a hook? hook is an special function which allow us to add and update state variables.so here we are going to use useState hook to store and update our list of tasks.

App.js

import "./styles.css";
import {useState} from 'react';

export default function App() {
const [todoValue, setTodoValue] = useState('');
const [todos, settodos] = useState([]);

function handleSubmit(event){
// event handler function
event.preventDefault(); // this will prevent default behaviour of form on submit
}

function changeHandler(event){
// event handler function
setTodoValue(event.target.value);
}

return (
    <div className="App">
       // heading
        <div className="heading">
          <h1>TO-DO App</h1>
       </div>


      // form element to take input from user
      // adding onSubmit and onChange event listener.

        <form className="formtodo" onSubmit={handleSubmit}>
          <input 
            onChange={changeHandler}
            placeholder="Enter Your Text Here..."
            type="text"
            id="todoValue"
          ></input>
          <button type="submit">Add Todo</button>
        </form>


    </div>
  );
}

We are taking current input value by (event.target.value) and assigning that current input value to state variable (setTodoValue) in changeHandler function

4) Add Task

App.js

import "./styles.css";
import {useState} from 'react';

export default function App() {
const [todoValue, setTodoValue] = useState('');
const [todos, settodos] = useState([]);

function handleSubmit(event){
// event handler function
event.preventDefault(); // this will prevent default behaviour of form on submit

if (todoValue === undefined ||
    todoValue === "" ||
    todoValue?.trim() === ""){
      alert("You are lazy!!! enter proper value.");
    }else {
        const todo = {
        value: todoValue,
        done: false
      };

      // spreading of previous value of todos
      settodos([...todos, todo]);
      document.getElementById("todoValue").value = "";
      // console.log(todoValue);
      settodoValue("");
      // console.log(todoValue)
    }


}

function changeHandler(event){
// event handler function
setTodoValue(event.target.value);
}

return (
    <div className="App">
       // heading
        <div className="heading">
          <h1>TO-DO App</h1>
       </div>


      // form element to take input from user
      // adding onSubmit and onChange event listener.

        <form className="formtodo" onSubmit={handleSubmit}>
          <input 
            onChange={changeHandler}
            placeholder="Enter Your Text Here..."
            type="text"
            id="todoValue"
          ></input>
          <button type="submit">Add Todo</button>
        </form>

       <div className="output">
        {todos &&
          todos.map((task, i) => {
            return (
              <div className="todo-list" key={task.value} id={i}>
                <button>
                  {task.value}
                </button>              
              </div>
            );
          })}
      </div>

   </div>
  );
}

we are taking input value by (event.target.value) and assigning that value to state variable(setTodoValue(e.target.value)).on submit of task handleSubmit function will be called and will check for blank values if not then it will make an object of keys(value,done)in else block of handleSubmit function and add that to state array using settodos([...todos,todo])spreading of array method.

For displaying our task-list mapping of todos array is done.
for other operation like line-through and delete we need to access the index {i} while mapping through todos array.

5)Delete Task and line-through it

App.js

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [todoValue, settodoValue] = useState("");

  const [todos, settodos] = useState([]);

  const handleDone = (e) => {
    const { id } = e.target.parentElement;
    todos[id].done = !todos[id].done;
    // console.log(todos[id].done, todos[id].value);
    settodos([...todos]);
  };

  function handleSubmit(e) {
    e.preventDefault();

    if (
      // todoValue === <strong>[&rlm;&rlm;&lrm;]</strong> ||
      // todoValue?.trim() == " ‏‏‎ " ||

      todoValue === undefined ||
      todoValue === "" ||
      todoValue?.trim() === ""
    ) {
      alert("You are lazy!!! enter proper value.");
    } else {
      const todo = {
        value: todoValue,
        done: false
      };
      // spreading of previous value of todos
      settodos([...todos, todo]);
      document.getElementById("todoValue").value = "";
      // console.log(todoValue);
      settodoValue("");
      // console.log(todoValue)
    }
  }

  function hanleDelete(e) {
    const { id } = e.target.parentElement;
    console.log(id);
    console.log(e.target.parentElement);
    todos.splice(id, 1);
    settodos([...todos]);
  }

  function changeHandler(event) {
    settodoValue(event.target.value);
    // console.log(event.target.value);
  }

  return (
    <div className="App">
      <div className="heading">
        <h1>TO-DO App</h1>
      </div>

      <div>
        <form className="formtodo" onSubmit={handleSubmit}>
          <input
            placeholder="Enter Your Text Here..."
            type="text"
            id="todoValue"
            onChange={changeHandler}
          ></input>

          <button type="submit">Add Todo</button>
        </form>
      </div>

      <div>
        {todos &&
          todos.map((task, i) => {
            return (
              <div className="todo-list" key={task.value} id={i}>
                <button
                  // if task.done is true then apply "done"  to classname else apply "not-done".. task.done will be changed to true on click over it

                  className={task.done ? "done" : "not-done"}
                  onClick={handleDone}
                >
                  {task.value}
                </button>
                {/* {task.value} */}
                <button onClick={hanleDelete}>Delete</button>
              </div>
            );
          })}
      </div>
    </div>
  );
}

For Delete operation on click button will call handle delete and this event handler function takes task id and it uses splice method to remove that cliked {id} Task from the array and it updates the todos array after splice method.

For line-through operation on click button will call handleDone and in that function it will toggle the key "done:false" to its opposite value"done:true" and reset that change "done" value to todo array by settodos([...todos]).for this operation we have defined conditional className and used css line-through property.

Style.css

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300i,400,400i,700");

* {
  padding: 0;
  margin: 0;
}

.heading {
  color: #332d36;
  font-weight: 300;
  font-size: 2.5rem;
  text-align: center;
}
body {
  background: skyblue;
}

.App {
  font-family: sans-serif;
  text-align: center;
  /* background: skyblue; */
  padding: 1rem;

  font-family: "Roboto Condensed", sans-serif;
}

button,
input {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

.done {
  text-decoration: line-through;
}

input {
  padding: 1rem;
  border-radius: 5px;
  text-align: left;
  cursor: text;
  background: whitesmoke;
  /* outline-width: 0.1rem; */
  box-shadow: 1px 2px 5px 1px;
}

[type="submit"] {
  padding: 1rem;
  margin-left: 0.5rem;
  background: whitesmoke;
  border-radius: 10px;

  box-shadow: 1px 4px 1px 1px;
}

[type="submit"]:active {
  box-shadow: 1px 2px 1px 1px;
}
.todo-list {
  background: wheat;
  padding: 1rem;
  margin: 1rem auto;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
  /* overflow: scroll; */
  display: grid;
  grid-template-columns: 4fr 1fr;
}

.formtodo {
  /* background: whitesmoke; */
  padding: 1rem;
  margin: 1rem auto;
  max-width: 550px;
  display: grid;
  grid-template-columns: 4fr 1fr;
}

.not-done,
.done {
  border-radius: 10px 0 0 10px;
  border: none;
  text-align: left;
  padding: 1rem;
}

So that's complete our todo list app , sharing my codesandbox link for your reference.

Lord Shiva CSS-Image Art

Dheeraj Purohit — Thu, 11 Mar 2021 13:06:44 +0000

DEV Community: Dheeraj Purohit

Debouncing De-coded

Definition

Input Element without Debouncing

Optimization

Debounce Implementation

Input Element with Debouncing

Props Revisited

How to pass props at a very basic level

How to access props in a component ?

Consuming props in a Component

can we use custom props in native DOM elements ?

Advance Props Guide

I myself is doing this mini-exercise while writing this article 😃🥳

A Friendly Water Reminder if you haven't

What did you learn new with that exercise ?

Non-String and Multiple Props

A) Non-String

B) Multiple Props

3) Consuming multiple Props and Object as a Prop

A) Consuming Multiple Props

B) Using Multiple Props (Object) without destructuring

Optimized React Search Bar 🔯

Learn

Debouncing🏀

Problem Statement for search component

Build

Steps to be followed

Output so far:

states, event handlers, types (its good to start including ts in code, event small bits can be helpful to learn typescript)

Api Calls with Side Effects (useEffect)🔥

Output of view after adding useEffect hook

so where's the problem

Solution

add debouncing (hook) to limit the state update

Final Code Sandbox Solution

React for beginners

App.js

So Let's Get Started...

1) Adding Input Element to our App

App.js

2) Adding onChange and onSubmit to input

App.js

3) Adding useState hook

App.js

4) Add Task

App.js

5)Delete Task and line-through it

App.js

Style.css

Lord Shiva CSS-Image Art

can we use custom props in native `DOM` elements ?