DEV Community: Naveenchandar

Event Handling in React: A Beginner’s Guide

Naveenchandar — Thu, 24 Apr 2025 17:04:16 +0000

Handling events like clicks, form submissions, and key presses is a fundamental part of building interactive UIs. In this guide, we’ll break down how event handling works in React, the key differences from vanilla JavaScript, and best practices to keep your code clean and efficient.

What Are Events in React?

In React, events are triggered in response to user actions—just like in plain JavaScript. The difference? React wraps the native events in a synthetic event system, which provides a consistent interface across all browsers.

Basic Event Handling Syntax

Here’s what a simple click handler looks like in React:

function MyButton() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

onClick is camelCase (unlike HTML’s onclick)
You pass a function reference (not a string)

Common Event Types in React

Event	Description
`onClick`	Mouse click
`onChange`	Input value change
`onSubmit`	Form submission
`onKeyDown` / `onKeyUp`	Keyboard interaction
`onMouseEnter` / `onMouseLeave`	Hover effects

Handling Form Inputs

function FormExample() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

React gives full control over form elements by treating them as controlled components.

Passing Arguments to Event Handlers

You can pass arguments using arrow functions:

<button onClick={() => handleClick(id)}>Delete</button>

Or bind it (not recommended in functional components):

<button onClick={handleClick.bind(null, id)}>Delete</button>

Synthetic Events vs Native Events

React uses a synthetic event system which:

Works across all browsers consistently
Pools events for performance (though this behavior has been relaxed in React 17+)

You can still access the native event using e.nativeEvent if needed.

Best Practices

Use arrow functions or separate handlers to keep code readable
Avoid inline functions inside JSX unless needed for props
Clean up event listeners if manually attaching them (e.g., window.addEventListener).

Bonus Tip: Custom Events in React

Need to create custom interactions between components? Pass handlers via props:

function Parent() {
  function onChildClick() {
    console.log("Child clicked");
  }
  return <Child handleClick={onChildClick} />;
}

function Child({ handleClick }) {
  return <button onClick={handleClick}>Click me</button>;
}

Conclusion

Event handling in React is simple once you understand the syntax and mindset behind it. Whether you're managing input fields or creating advanced interactive components, React's synthetic events and modular approach make handling user actions clean and powerful.

Ready to level up? Try combining event handling with hooks like useEffect or context-based state updates to build even smarter UIs!

Happy coding! ✨

🔍 Preparing for React interviews?
I’ve put together a curated guide to help you master every important topic—from basics to advanced patterns.
👉 Check out the React Interview Guide

Throttling vs Debouncing in JavaScript

Naveenchandar — Sun, 13 Apr 2025 07:53:34 +0000

Optimizing performance is essential in building modern web applications. To deliver a smooth and responsive user experience, developers often rely on various techniques to boost efficiency. Among these, debouncing and throttling stand out as simple yet highly effective strategies used in JavaScript to enhance performance.

In this post, we'll explore what debouncing and throttling are, how they differ, and why they're important tools for managing performance in JavaScript applications.

What is Debouncing?

Delays function execution until a certain time has passed since the last call.
Best for: search inputs, auto-save, resize events.

Example:

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleInput = debounce((e) => {
  console.log("API call for:", e.target.value);
}, 300);

Let's say you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user enters a character, which could lead to a large number of unnecessary api calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time.

In the above example, debouncing ensures to call api only after user stopped typing for 300ms of time.

Throttling

Ensures a function is only called once per specified time interval.
Best for: scroll events, window resize, mouse movement.

Example:

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Usage
const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized');
}, 100);

window.addEventListener('resize', handleResize);

Let's say you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called once in a specified time interval.

Debouncing and Throttling in React

Using useCallback with custom debounce/throttle functions.
Optional: Introduce lodash.debounce or lodash.throttle.
using custom hooks to handle debounce or throttle which will be single point of contact and reusable across the project.

import { useEffect, useState } from 'react';

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 1000);

  useEffect(() => {
    fetch(apiCall)
  }, [debouncedSearchTerm]);

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
     <div className="container">
      <input
        type="text"
        placeholder="Search character..."
        value={searchTerm}
        onChange={handleChange}
      />
     </div>  
  )
}

IIFE in Javascript

Naveenchandar — Tue, 01 Apr 2025 12:49:32 +0000

Have you ever come across a function in JavaScript that's wrapped in parentheses and immediately executed? It might look strange at first, but it’s actually one of the most elegant patterns in JavaScript called as IIFE.

In this blog post, we'll break down what IIFE means, why it's useful, and how you can use it in your codebase.

What is an IIFE?

IIFE stands for Immediately Invoked Function Expression. It’s a function that runs immediately after it is defined.

Basic Syntax

(function() {
  console.log("IIFE runs!");
})();

You can also use an arrow function:

(() => {
  console.log("Arrow IIFE runs!");
})();

Why Use an IIFE?

1. Avoid Global Scope Pollution

Variables declared inside an IIFE can’t be accessed from the outside, keeping the global namespace clean.

2. Encapsulation

You can hide variables and functions from the outside world, which is great for creating private scopes.

3. Safe Initialization Code

IIFEs are often used for code that needs to run once and not leave any trace in the global scope.

Real-World Example

Here’s a simple counter module using an IIFE:

const counter = (function() {
  let count = 0;
  return {
    increment: () => ++count,
    getCount: () => count
  };
})();

console.log(counter.increment()); // 1
console.log(counter.getCount());  // 1

In this example, the count variable is private. Only the returned methods can interact with it.

Types of IIFE

Traditional Function IIFE

(function() {
  console.log("Traditional IIFE");
})();

Arrow Function IIFE

(() => {
  console.log("Arrow IIFE");
})();

IIFE in a React Component

You might not use IIFE very often in React, but here’s a useful scenario: rendering logic that should execute immediately inside JSX.

JSX Example

import React from 'react';

function UserGreeting({ user }) {
  return (
    <div>
      {(() => {
        if (user?.isLoggedIn) {
          return <h2>Welcome back, {user.name}!</h2>;
        } else {
          return <h2>Please sign in.</h2>;
        }
      })()}
    </div>
  );
}

export default UserGreeting;

Here, the IIFE is used inside JSX to conditionally render different outputs using more complex logic than what a ternary operator might allow.

Async IIFE Inside `useEffect`

A common React pattern is making API calls inside useEffect. Since useEffect doesn't accept async functions directly, developers often define an inner async function and then call it. Instead, you can use an IIFE:

Traditional Approach

useEffect(() => {
  const fetchApiCall = async () => {
    try {
      const { data } = await axios.get('apiurl');
      setData(data);
    } catch (error) {
      setError(error.message);
    }
  };

  fetchApiCall();
}, []);

Using IIFE

useEffect(() => {
  (async () => {
    try {
      const { data } = await axios.get('apiurl');
      setData(data);
    } catch (error) {
      setError(error.message);
    }
  })();
}, []);

✅ Why Use an IIFE Here?

Avoids having to separately define and call an inner function
Keeps the logic compact and scoped inside useEffect
Looks cleaner, especially for short one-off fetch operations

Common Use Cases

Wrapping library or plugin code
Avoiding variable conflicts
Creating isolated scope in loops
Polyfills
Async functions in useEffect (React)

IIFE vs Modern Alternatives

With the introduction of ES6, we now have better ways to manage scope:

Modules: ES6 modules have their own scope.
Block Scope: let and const allow block-level scoping.
Closures: More powerful and flexible for state management.

Even though these alternatives exist, understanding IIFEs is essential for reading legacy code and building a solid foundation in JavaScript.

Conclusion

IIFE is a classic pattern in JavaScript that solves real problems like variable scope management and safe initialization. Even in the modern JS ecosystem, it remains a valuable concept to understand and appreciate.

Next time you see a function wrapped in parentheses and immediately called, you’ll know exactly what's going on—and why it’s such a neat trick.

Happy coding!

Bonus Tip: Try converting some of your global-scope-heavy scripts into IIFEs and see the difference it makes in structure and readability.

Feel free to share your thoughts or use-cases for IIFE in the comments below!

'This' in Javascript

Naveenchandar — Fri, 14 Jan 2022 09:11:39 +0000

If you're a javascript developer, definitely you would've come across a mystery keyword this.

The keyword this can be major point of confusion, misery and general suffering in the life of a new JS developer.

Today we're going to see how this works in Javascript.

Basic definition :

this refers to the object that is executing the current function (current execution scope)

There are 3 major use case scenarios where this keyword will be used.

In functions
Methods in objects and class
Global

It will be peculiar in each cases. Let's see it in detail.

1. In functions

Functions can be declared in different ways and most widely declared ways are function declarations and arrow functions.

Function Declarations :

function normalFunction() {
    console.log('regular function', this); // window
}
normalFunction();

If we try to call this function it will log the result of window i.e., global object which can be referred by this in javascript.

this will default to the global object, which is window in a browser and empty object in node.

function normalFunction() {
    'use strict';
    console.log('regular function', this); // undefined
}
normalFunction();

In strict mode, this value is not set when entering an execution context, it remains as undefined. Hence, it will log as undefined.

Arrow Functions :

const arrowFunction = () => {
    console.log('arrow function', this); // window
}

arrowFunction();

Note: Arrow functions don't have own version of this. They will always inherit from the parent.

What can we expect this to log? same as with normal functions, window or global object. Same result but with different reason. With normal functions the scope is bound to global object by default, arrows functions, as I said before, do not have their own this but they inherit it from the parent scope, in this case the global one.

What would happen if we add "use strict"?

const arrowFunction = () => {
    'use strict';
    console.log('arrow function', this); // window
}

arrowFunction();

Nothing, it will log the same result, since the scope comes from the parent one.

2. Methods in objects and class

Methods in objects :

Whenever we are calling functions inside object, it is known as method.

const user = {
    firstName: 'Naveen',
    lastName: 'chandar',
    normalFunction() {
        console.log('regular method',this); // user object
        return `${this.firstName} ${this.lastName}`;
    }
}
user.normalFunction(); //Naveen chandar

what would it show in console ? window (based on explanations given above). But it will log as object user itself because we're trying to access this inside methods in object, it will refer the object itself.

Tip: We should not see where this has been declared, we should see how the current function has been invoked. If it is invoked without any parent (left to the dot) Eg.user, this will be global object and if invoked with parent, it will scope to parent and returns the parent this.

What happens if you're trying to call arrow functions as methods inside objects ?

const user = {
    firstName: 'Naveen',
    lastName: 'chandar',
    arrowFunction: () => {
        console.log('arrow method',this); //window
        return `${this.firstName} ${this.lastName}`;
    }
}
user.normalFunction(); //undefined undefined

What's the result expected ? Naveen chandar ?. No, It will be undefined undefined. As said earlier, Arrow functions doesn't has own this. No matter where you call arrow functions, It will always inherit from parent scope and return the parent this.

In this case, user is the parent and user has access to global object by default, it logged the value of window and if you expand the window object, there won't be any firstName or lastName binded to that, it return as undefined undefined.

This is why it's not recommended or not a good practice to write arrow functions as methods inside objects. But there are some rare scenarios where arrow functions will be helpful as methods.

Methods in class :

Let's see the same examples with classes. Classes are nothing but a template for creating objects.

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    normalFunction() {
        console.log(this); // User obj
        return `${this.firstName} ${this.lastName}`;
    }
}
const newUser = new User('naveen', 'chandar');
console.log(newUser.normalFunction()); // naveen chandar

Note: If we are trying to access something with new keyword, Javascript will create an empty object by default.

The above code will give the result as expected, because of new keyword, empty object will be created and binded to the User object.

what happens if trying to use arrow functions as methods inside class ?

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    arrowFunction = () => {
        console.log(this); // User obj
        return `${this.firstName} ${this.lastName}`;
    }
}
const newUser = new User('naveen', 'chandar');
console.log(newUser.arrowFunction()); // naveen chandar

what's the result expected ? ** undefined undefined **?
No, It will return the same result as normal function. Because of lexical scoping.

Conclusion

To summarise,

this refers to the object that is executing the current function.
When used in global, this refer to window itself.
In normal functions this refers to how the function is invoked. (By default refers to global object).
Arrow functions will always inherit from the parent.
When used in object, this refer to object itself for normal functions.
When used in object, this refer to global object for arrow functions.
When used in class, this refer to object itself for both normal functions and arrow functions.

Thanks for reading this post. Hope, this post will make you understand how this works in JS 😎.

Let's meet on next post with another javascript concept.

Have a great day 🙂.

npm commands every developer should know

Naveenchandar — Mon, 09 Aug 2021 09:40:09 +0000

NPM stands for Node Package Manager, is one of the most used tools for any javascript developer. It puts all modules in one place so that node can find them, and manages dependency conflicts. Here's a list of the most common npm commands you should be aware of.

install

This command is used to install the npm package and the other packages which the particular package depends on. It will install in the local node_modules folder.

npm install <packagename>

There's a shorthand for installing the new packages.

npm i <packagename>

uninstall

This command does the exact opposite of install. It will uninstall the package completely which is already exist in the node_modules folder. If the package mention is not present package.json list or node_modules folder, it won't do anything.

npm uninstall <packagename>

Shorthand for uninstalling the new packages.

npm un <packagename>

update

This command updates the current package to the latest version and if no package name has been specified then it will update all packages. If some package is missing, it will check and update those too.

npm update <packagename> or npm update

Shorthand for updating the packages.

npm up <packagename>

deprecate

This command will update the npm registry entry for a package by providing a deprecation warning or message to all who attempt to install it.

npm deprecate <pkg>[@<version range>] <message>

Note

To un-deprecate a particular package, specify an empty string ("") for the message argument. Note that you must use double quotes with no space between them.

npm deprecate <pkg>[@<version range>] ""

doctor

It checks our environment so that our npm installation has what it needs to manage our JavaScript packages. Before installing npm will check for some basic requirements which has to be met by the packages.

Node.js and git must be executable by npm.
Make sure the npm registry, registry.npmjs.com, or another service that uses the registry API is available.
Directories that uses npm, node_modules (both locally and globally), exist and can be written by the current user.

npm doctor

list

This command will print all the packages and their versions that are installed, as well as their dependencies in a tree structure.

npm list

view

This command will prints the data about the package.

npm view <packagename> <versions>

If version is not specified, default version is 'latest'

help

This command helps with the mentioned topic. It shows the appropriate documentation page.
If the topic does not exist, or if multiple terms are provided, then npm will run the help-search command to find a match. If help-search finds a single subject, then it will run help on that topic, so unique matches are equivalent to specifying a topic name.

npm help <term>

Install/Update the package globally

This command will install or update the package globally in your local system.

npm install -g nodemon
npm update -g nodemon

-g specifes global. If -g is not specified, package will be installed in local by default which can't be accessed outside the project directory.

Install a package as production/development dependency

This command will install the package which will be available in the specified environment.

npm install -P <packagename> P for Production
npm install -D <packagename> D for Development

init

This command can convert an empty directory to an npm project by adding package.json file into it.

Also, you can add meta info of the project to the package.json file while creating it.

If you don't have package.json in a directory, and you trigger npm install moduleName at that directory path then module will be installed globally.

npm init or npm init -y

build

npm build and npm run build are entirely different.
npm run build - This command runs the build field from the package.json scripts field.
npm build - It is an internal command. If you run it you'll get: npm WARN build npm build called with no arguments. Did you mean to npm run-script build? You can read more on the documentation npm

start

This command runs a predefined command specified in the start property available inside scripts in the package.json file.

npm start

stop

This command runs a predefined command specified in the stop property available inside scripts in the package.json file. Unlike start, there is no default script that will run if the stop property is not defined

npm stop <filename>

Thanks for reading this post. Have a great day. 🙂

HTML input attributes

Naveenchandar — Fri, 30 Jul 2021 10:00:36 +0000

HTML input attributes make the input elements more usable. These input attributes provide more information about the input elements. Today we are going to see the available attributes for input html element.

name
This attribute specifies the unique name in order to identify the particular input element.

<input type="text" name="name">

value
This attribute specifies the initial value for the input element and user can change this value.

<input type="text" name="firstname" value="Naveen">

disabled
This attribute will disable the input element i.e., making the element non editable and unclickable. These values will not be sent while submitting the form.

<input type="text" disabled>

required
This attribute will check the input element whether it is filled or not. User must fill this input before submitting the form. This is simple validation without using javascript.

Note
This will only work for following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

<input type="text" name="firstname" required>

placeholder
The placeholder attribute works like a hint. It describes what to enter in the input field to user. It shows the text in grey fonts and once the user clicks on the input field it will be faded.

<input type="text" placeholder='Enter your first name'>

autofocus
As the name suggests it will automatically focus the input element on page load.

<input type="text" name="username" autofocus>

readonly
The readonly attribute displays the value (if the value is specified) but doesn’t allow user to change the value.

<input type="email" name="email" readonly>

It cannot be modified but we can focus it, highlight it, and copy the text from it.

The value of a read-only input field will be sent when submitting the form.

size
This attribute represents the number of characters to show. It defines the visual length of input field. Default value is 20.

Note:
This attribute works with the following input types: text, search, tel, url, email, and password.

<input type="text" name="username" size="50">

height and width
These attributes indicates the height and width of an HTML input element. This attribute is used only for input type image.
Without setting these attributes, when page loads browser will not know how much space is required for image and cannot allocate a separate space for it. Flickering may occur while loading image. If height and width are set, the particular space is reserved by the browser when page loads.

<input type="image" src="img.png" alt="cover picture" width="48" height="48">

maxlength
This attribute specifies the maximum number of characters can be entered in the input field.

<input type="text" name="username" maxlength="10">

min and max
These attributes specified the minimum input value and maximum input value available for the particular input field.

Note
This will only work for following input types: number, date, range, time, week and month.

<input type="number" name="quantity" min="1" max="5">

step
This attribute specifies the intervals of the legal input numbers.
Example:
if step="6", legal numbers that can be used are -6, 0, 6 etc.

Note
This will only work for following input types: number, range, date, datetime-local, month, time and week.

<input type="number" name="points" step="3">

list
This attribute specifies the input field with a list of default predefined options.

<form>
  <input list="language">
  <datalist id="language">
    <option value="Javascript">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
  </datalist>
</form>

multiple
This attribute specifies that the user is allowed to enter more than one value in an input field.

Note
It will work only with the following input types: email, and file.
while selecting files, click ctrl and select multiple files.
while entering email id values entervalues separated with comma.

<input type="file" id="files" name="files" multiple>
<input type="email" id="emails" name="emails" multiple>

autocomplete
This attribute specifies whether an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When user starts to type in input field, the browser should display previous filled options to fill in the field.

Note
It works with form and the following input types: text, search, url, tel, email, password, datepickers, range, and color.
By default this attribute will be on.

<input type="email" id="email" name="email" autocomplete="off">

accept
This attribute specifies what file types the user can pick from the file input dialog box.

Note
This can only be used with <input type="file">.

<input type="file" id="img" name="img" accept="image/*">

Thank you for reading this post. Have a great day 🙂

Web Storage API

Naveenchandar — Fri, 23 Jul 2021 09:14:09 +0000

What is Web Storage
Web storage is more secure, and large amounts of data can be stored locally within the user's browser, without affecting website performance.

Web storage has two types of mechanisms. They are

Session storage
Local storage

Session Storage
Changes are available per tab. Changes made are saved and available for the current page until the tab is closed.

Local Storage
Changes are available until we explicitly delete it. It will be available in all tabs with the same origin. Even we close the browser or tab or reboot the OS, these changes will remain as it is.

Methods and Properties available in both session storage and local storage are

Set Item
Get Item
Remove Item
Clear
Key
Length

Set Item

It takes two parameters key and value.

window.localStorage.setItem('name', 'Dev Community');
window.sessionStorage.setItem('name', 'Dev Community');

Where name is the key and Dev Community is the value. Also note that local storage and session storage can only store strings.

To store arrays or objects, you should convert them to strings.

To do this, we can use the JSON.stringify() method before storing to setItem.

const person = {
    name: "Naveen Chandar",
    location: "India"
}
window.localStorage.setItem('user',JSON.stringify(person));
window.sessionStorage.setItem('user',JSON.stringify(person));

The stored item can be accessed in application tab in chrome developer tools.

Get Item

This method allows you to access the data stored in the browser’s localStorage/sessionStorage object.

It accepts only one parameter, which is the key given while storing the value, and it returns the value as a string.

window.localStorage.getItem('user');
window.sessionStorage.getItem('user');

This returns a string with value

"{"name":"Naveen Chandar","location":"India"}"

To use this value, you should convert it back to an object.

To do this, we make use of the JSON.parse() method, which converts a JSON string into a JavaScript object.

JSON.parse(window.localStorage.getItem('user'));
JSON.parse(window.sessionStorage.getItem('user'));

Remove Item

This method removes the specified key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

It accepts only one parameter, which is the key given while storing the value.

window.localStorage.removeItem('user');
window.sessionStorage.removeItem('user');

Clear

This method clears all items present in local storage.
It doesn't accept parameters.

window.localStorage.clear();
window.sessionStorage.clear();
```



**Key**

This method is used to get the key on a given position. It will be useful in situations where you need to loop through keys and allows you to pass a number or index to local/session storage to retrieve the name of the key.



```
window.localStorage.key(index);
window.sessionStorage.key(index);
```



**Length**

This property returns the number of data items stored in a given Storage object.



```
window.localStorage.length;
window.sessionStorage.length;
```



**Broswer Support**

It is HTML5 specification and it is supported in all major browsers including IE8. To check whether browser supports for local/session storage



```
if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}
```



**Limitations**

* Do not store sensitive user information in local/session storage such as passwords etc.,
* It is not a alternative for a server based database as information is stored only on the browser (client side).

**Difference B/w session storage and local storage**

**Size**

Session storage size is **5MB** 
Local storage size is **5MB/10Mb**

**Accessiblity**

Session storage can be accessed only on same tab
Local storage can be accessed anywhere within browser tabs.(Not in Incognito mode).

**Storage Location**

Both session and local storage are stored in browser.

**Expiration Date**

Session storage will be expired once the tab is closed.
Local storage won't get expired unless removing it manually.

**When to use session storage and local storage ?**

Session storage - It should be used when you need to store something that changes frequently.
Local storage - It should be used for long term use where data won't get changed often.

Thank you for reading this post. Have a great day 🙂

CSS Box Model

Naveenchandar — Thu, 15 Jul 2021 08:45:54 +0000

Everything in CSS is a box. Yes I mean it. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

It is one of the essential concepts to build layouts and make things look the way you want them. In Today's post we will be covering some key topics such as

Border
Padding
Margin
Box sizing

Every element in a css has box around it. whether its visible or not, but there's a box. You will be working with different elements such as paragraph, images, headings,buttons etc., everything has box around it. Being able to understand how these boxes work is important and use these properties to manipulate the boxes the way you want. It is crucial part of designing layouts.

Each boxes consists of several properties with it. They are as mentioned below

Content Box
Border
Padding
Margin

Content Box
Before going through content box. There are two types of elements in HTML. They are

Inline elements
Block level elements.

Inline elements
The name says it doesn't start with new line. This does not force the element to display in a separate line. It only only takes up as much width as necessary.
Ex: span, input,a,button

Block level elements:
This type of elements starts with new line. It occupies entire horizontal and vertical space as much as by default.
Ex: div,headings,paragraphs

The content box is the center of the box model. This is where text, images, and other html elements appear in a web page. We use the height and width CSS properties to determine the size of the content area.

By default, the size of a content area will be equal to the size of its elements. If you have a line of text, the box will be as long and as tall as the line of text.

Using height and width properties, we can manipulate the elements layout which is visible inside the box model.
Example:

<p style="background: palegreen;">
Hi, I'm Paragraph
</p>

Since P is block level element. So by default it takes the entire space by default as shown above.
In order to change the layout of this, we need to change the height and width of the element.

Suppose we want to design a paragraph element that is 100px of height and width. We can achieve by changing the height and width of particular element.
Ex:

<p style="height: 100px;width: 100px;background: palegreen;">
Hi, I'm Paragraph
</p>

If you look at the above image, the layout of the element has been changed. If you see the content box, it shows 100 * 100 which is nothing but width * height. Before applying the styles, by default according to the screen layout these sizes are chosen.

When we try to change height and width of block elements, I've changed using px but we have lot of different units available. In order to know more about units, please refer this link

But if we try to change the layout of inline elements,
Example

<span style="height: 120px;width: 500px;background: palegreen;">
Hi, I'm Span
</span>

Notice that size has not been varied, because for inline elements applying height and width styles won't work and to make them work we need to change the display style of these elements in to inline-block elements.

<span style="height: 120px;width: 500px;background: palegreen;display: inline-block;">
Hi, I'm Span
</span>

By adding display:inline-block style property to inline elements we are making them to behave as combination of both inline and block elements. (By default we don't want to mention the display property unless we want to change the height and width of inline elements).

Image elements are inline element by default but its a replaced elements. So it behaves both as inline as well as inline-block. You can set height and width to change the size MDN.

Border
The name explains that it applies border to specific elements.The border that goes around the content of a box, or around the padding of a box if a padding value is specified.
Commonly we use a shorthand property for border which sets width,style and color for element.

border: 1px solid red;
1px -> border-width
solid -> border-style
red -> border-color.

<span style="height: 120px;width: 500px;background: palegreen;display: inline-block;border: 10px solid red;">
Hi, I'm Span
</span>

Border of 10px with red color has been applied to the element and if you look at the border in the box model it denotes 10 on each sides which represents 10px width. we can apply different colors for the same border too.
We can change the radius of element using border-radius property.
You can set a separate width, color, radius styles on each sides of border.
There are lot of border-style options available. Play through those options here.

Padding
The padding area is the space around the content area and within the border-box. A box that surrounds the html element's inner content. Because padding is inside the box, the background of the box will be visible in the space that it creates.
We can apply padding to either one side or to all the sides.

If you look at the above example image, there's a space between border and the content. That's padding.

This is a shorthand for writing padding. It applies 10px padding on all the sides starting from top(clockwise direction).

padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

If all the sides are same then definitely you can use the shorthand property. If needed you can increase either one of the sides too and the space between the content and border for that particular side will alone increase.

There's another shorthand for padding.
padding: 10px 20px

If padding top and bottom are same and padding left and right are same then we can describe it as mentioned above where as first one represents top and bottom and latter one represents left and right.

If left and right are same but top and bottom are different, then there's another shorthand to use is

padding: 5px 10px 7px
5px -> padding top.
10px -> padding left and padding right.
7px -> padding bottom.

Margin
This is the outermost layer of the box model. This area creates an empty gap that separates one element from other on the web page.

The above example will create a 10px space between two boxes on a page. Same as padding, you can apply margin either on all four sides or one side. It follows the same clockwise direction. Difference between padding and margin is padding will occupy the space within content box and margin occurs outside the content box.

By default some elements has margins/padding based on certain browsers. You can change those properties too. So the common and most followed way is to reset these properties in order to display same across all the browsers.

body{
  padding: 0
  margin: 0
}

Box sizing
This property defines how the element width and height can be calculated, whether to include border and padding or not.
By default,the height and width applied will be applied to element's content box. If any element has padding/border then the height and width of element changes. If the one element height/width changes then based on this, adjacent elements will be changed because its taking more space than expected.

It is often to set box-sizing:border-box to layout elements to avoid the overflow of elements.

Box-sizing property has list of values.

content-box
border-box

content-box
This is the default box sizing property specified by the CSS standard. This property will include only the height and width of the element but does not include the padding/border/margin.

From the above example, two div elements will have different sizes because of padding applied to div2. Since box-sizing will set to content-box by default (if not specified). Here, the height and width will be calculated by.

width = width of the content
height = height of the content

border-box
Inorder to make them equal size, border-box value of box-sizing to the rescue. This property allows us to include the padding and border in an element's total width and height.
If you set box-sizing: border-box on an element, padding and border are included in the width and height.

If you look at the above example, div2 has a property of box-sizing: border-box. By setting this property, padding which you have applied earlier will be counted along with height and width of actual element. Here the height and width will be calculated by

width = border + padding + width of the content
height = border + padding + width of the content

The CSS box model is an integral component of design and one of the fundamentals of web development. This box model will enable you to better align elements with other elements and create more complex layouts.

Thanks for reading this post and have a great day 🙂.

Javascript Hoisting

Naveenchandar — Tue, 06 Jul 2021 11:28:25 +0000

Hoisting is one of the important concepts every javascript or its related frameworks developers should be familiar with. Ever wonder how function calls or variable access can be done even before declaring those. If that's so then, Welcome to Javascript Hoisting World!!!.

What is Hoisting?

This is one of the most common interview questions in front end development and common answer will be
All variable and function declarations are moved to top.

Really???😮
Hoisting is not what you think!!!😕
Let us discuss and clarify everything regarding hoisting in today's post.

Misconception

If you are trying to search and learn about hoisting, almost everywhere you will be seeing the same definition. May be that's beginner friendly but definitely that's not true. In JavaScript, Nothing will be moved.

Let's discuss in detail.

Before we start, let us understand how our code will be executed in javascript engine.
JavaScript engine runs through our code twice. First time (creation phase) - the engine goes through the code and allocates memory for the declarations of variables and functions. Second time(Execution phase) is where it actually executes our code by going through it line by line, doing the assignments, calling the functions and so on..

Variable Hoisting

Variables are one of the fundamental blocks of any programming language, the way each language defines how we declare and interact with variables can make or break a programming language. Thus any developer needs to understand how to effectively work with variables and their properties.

console.log('myName',myName);
var myName = 'JavaScript';
console.log('myName',myName);

If you look at the above example and when you try to run the code, it will not throw error. First one will be undefined and second one will be Javascript.

This is because no matter how are declaring variables, Javascript will always go through these lifecycles to declare a variable,

Declaration
Initialization
Utilization.

So,
According to this lifecycle, the above example code will be split into

var myName -> Declaration
myName = 'JavaScript' -> Initialization
console.log('myName',myName); -> Utilization.

So,in the first run javascript will check for the declarations of variables/functions and allocates memory space. This is where all the variables will be declared with a default value undefined and in the second run while running through all the code it will assign the actual value for it.

Actual definition
Javascript actually scans the code and takes all the variables and allocates separate memory space even before executing the code. Its just variable declarations are executed first, so they will be in reserved memory. MDN.

After introduction of ES6, Variables in Javascript can be declared by three types: var,let and const.

Another misconception is variable declared using var is only hoisted and let and const are not hoisted.

But that's not true. As per definition all the variable and function declarations are hoisted. But let and const hoisted a bit different.Let and const are hoisted in block scope whereas var is hoisted in global scope. (Scope is another important concept which we will discuss in future post).

console.log('myName',myName);
let myName = 'Javascript';

If you run the above code, you will be getting an error
Uncaught ReferenceError: myName is not defined.
It's not the same case when you declare variable using var.
Wait how's that??🤔
Here comes a term called Temporal Dead Zone(TDZ).
We are already in a middle of understanding one sci-fi term hoisting, but here comes the another sci-fi term called Temporal Dead Zone 🙄.

So, what exactly is Temporal Dead Zone?
It is Time taken between declaring the variable(using let or const) and initializing the variable.
Let's go to the same code and will see why it shows reference error.

/*
  let myName;
  //Beginning of the temporal dead zone
  console.log(firstname); // ReferenceError as accessed in the TDZ.
let myName = 'Javascript'; // Ending of the temporal dead zone
*/

Usage of Let and const is recommended because unlike var, there’s no risk of variable leakage outside of the scope of execution unless if needed. To learn more about var,let and const declarations, Please refer this link

Function Hoisting

Functions are one of the fundamental building blocks in JavaScript.
There are multiple ways to declare a function. Common ways to declare a functions are

Function Declaration
Function Expression
Arrow Function

Function Declaration

greetings();
function greetings(){
    console.log('Hello from dev community')
}

If you run this example it won't throw any error because greetings will be declared on the first run by javascript engine due to hoisting.

greetings();
function greetings(){
 console.log('First',message);
 var message = 'Hello from Dev Community';
 console.log('Second',message);
}

If you run this code, first console will display undefined because variables declared inside functions will be hoisted only top of the particular scope (code blocks). So the code will be

greetings();
function greetings(){
 var message;
 console.log('First',message);
 message = 'Hello from Dev Community';
 console.log('Second',message);
}

Function Expression

greetings(); // Ouput: TypeError: expression is not a function.

var greetings = function hoisting() {
  console.log('Hello from function expression?');
};

JavaScript returns a TypeError because unlike function declaration, only the variable was hoisted. When variables declared with var are hoisted, they are given a default value of undefined. JavaScript then throws an error because the value of the variable is not a function at that point of time.

Arrow Functions

greetings(); // Ouput: TypeError: expression is not a function.

const greetings = () => {
  console.log('Hello from arrow functions?');
};

This works same as function expression due to hoisting.When using arrow functions, or any other function expression, we must always define the function before we call it. Accessing variables before declaration is often a root cause of errors. To clarify

Only function Declarations are hoisted.

Order Of Precedence

Always function declarations are given high priority than variable declarations as per ECMAScript, section 10.5

var abc;
function abc(){}
console.log(typeof abc)

function abcd(){}
var abcd
console.log(typeof abcd)

If you run the above code, no matter what order you declare it, javascript engine will always gives high priority to function declarations than variable declarations.

Conclusion

Let’s summarise what we’ve learned

Hoisting is a process that declares variables and functions into memory space ahead of assignment and initialization within the given scope of execution.
Only variable declarations and function declarations are hoisted.
const and let will be hoisted but cannot be read or accessed before their initialization.
function declarations are given high priority than variable declarations while hoisting.

To avoid confusion of hoisting and issues, it’s better to declare variables and functions before accessing them. You’ll avoid plenty of bugs and undefined warnings filling your console.

I hope this clarifies how hoisting works in JavaScript. It's definitely not a complicated one as it sounds, but it requires us to breakdown the different use cases and trying different scenarios to understand how things work under the hood.

Thanks for reading this post. Have a great day🙂.
Let's meet on the next post with another Javascript concept.

Package.json File explained!!!

Naveenchandar — Wed, 30 Jun 2021 12:32:06 +0000

If you've been working on javascript or related framework projects then definitely you came across the file named package.json and we might be curious why this file is included in our projects and why it's needed 🤔.

The main purpose of this file is to hold various metadata related to the project and it is used to give information to npm that allows to identify the project and its dependencies.

To create a package.json file manually you need to run a command npm init which will ask you a bunch of questions that is not compulsory. Just hit enter to complete those.You can change it later.
If you do want to answer these questions then you can run a command npm init -y which will create a file named package.json with the defaults.

Let's see the list of available options which npm has given us to make in this file.

name
If you've been working on some projects in local and if planning to publish it.
Two important things are name and versions. Both are required and it should be unique.
Name represents the name of your project.
There are some rules for defining names.

Must be less than or equal to 214 characters
should not begin with dot (.) or underscore(_).
should not have an uppercase letter in the name.
package name must not contain any non-url-safe characters (since name ends up being part of a URL) Please go through this link to find unsafe characters.
If needed you can check the npm registry whether the name is available or not.

version
This property defines the version of your project and it should follow semantic versioning guidelines.
Example

"version": "1.0.0"

description
This property is used to provide more information about the project and it helps people to discover your package as its listed in npm's search.
Example

"description": "A package to work with strings"

keywords
It's an array of strings.Keywords related to your project. This helps people discover your package based on the keyword search.
Example

"keywords": [
  "react",
  "Javascript"
]

homepage
This property is used to provide landing page url of your project.
Example

"homepage": "https://github.com/owner/project#readme"

license
This property denotes the type of license in your project, whether this package can be used by others without any restrictions.To know more about license

bugs
This property is used to specify the project issue tracker and / or the email address to which issues should be reported. These will be helpful for people who encounter issues while using your package.
Example:

"bugs":{
  "url" : "https://github.com/owner/project/issues",
  "email" : "project@hostname.com"
}

people fields: author, contributors
This property specifies the number of contributors involved in developing this project.
Author is for single person and contributors is array of people.
Example:

"author": "abc@example.com https://www.abc.com/",
"contributors": [{
    "name": "example",
    "email": "example@example.com",
    "url": "https://www.example.com/#team"
}]
(email and url are optional).

scripts
This property contains commands that run at various times in the lifecycle of your package. It takes object with key being scripts we can with (npm run ) with the various command we give in the values.The key is the lifecycle event, and the value is the command to run at that point.
Example:

"scripts":{
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint ./"
}

These are mostly terminal commands which helps us to execute specific task used during development. Learn more about npm scripts

dependencies
This is one of the most important key in your file and the entire reason to use this file. All your dependencies used in this project(various npm libraries installed via CLI) are listed here. when package is installed as npm install , after installation it will automatically added under the dependencies key.
Example:

"dependencies": {
 "react": "^17.0.1",
 "react-router-dom": "^5.2.0",
 "compression": "~1.7.4"
}

Note:
~ and ^ you see in the dependency versions are notations for version ranges defined in semver as it follows semantic versioning.

devDependencies
some packages are needed only for development and doesn't need for production. Those packages can be listed in this. An example would be eslint or nodemon. These are the packages we will be using while development.
To install a package as devDependency run

npm install --save-dev <packagename>

private
This property is either true or false. If you set it to true, then npm will refuse to publish it.
Example:

"private": true

engines
This property sets which versions of Node and other commands this project should work on.
Example:

"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}

browserslist
This property specifies which browser (along with versions) you want to support your project. If you are using latest ES features we need make sure all browsers supports it or if not then fallback/polyfills is needed. It's referenced by Babel, Autoprefixer, and other tools. To add the polyfills and fallbacks needed to the browsers you target.
You can check here whether the latest features has been supported by browser or not.

Example:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Note:
0.2% specifies that you want to support the browsers with at least 0.2% of global usage.
not dead means exclude browsers without official support in the last 24 months.
You can learn more about browserslist here.

main
This property specifies the entry point in your project. If someone installs your project and then uses import something from 'something', the file you named in this key will be the one gets imported.
If nothing is specified, it will be set to index.js by default.
Example:

"main": "src/main.js"

This package.json file will be the heart of any javascript/node project.Not all properties will be applicable to your project but we can make use of these properties to achieve some powerful benefits. Understanding the role of package.json file is important part of javascript ecosystem and it will make you more insightful!!🙂.

Thanks for reading this and have a great day 😃.
Lets meet in the next post 😉.

VS Code keyboard shortcuts (windows)

Naveenchandar — Sat, 26 Jun 2021 15:57:37 +0000

Here's the list of vs code keyboard shortcuts.It will work both for workspace and separate folders.

I have windows machine so I will be posting the list related to windows. Sorry mac users :(.

There are lots of vs code inbuilt shortcuts available. If needed you can create a custom shortcuts too.

Ctrl + b (Toggle sidebar) - It is used to toggle the sidebar and the editor workspace.
Ctrl + p (Go to file) - If you are working on a larger applications and if the folder structure is vast then definitely searching for a particular file in the application will be cumbersome. During at that time this shortcut will be very handy.
Ctrl + ` (Toggle Terminal) - It is used to toggle the vs code terminal.
Ctrl + shift + ` (New Terminal) - It is used to open new vs code terminal.
Ctrl + G (Go to line) - It is used to go to particular line number in the current file.
Ctrl + H (Replace) - Suppose your file is too long and if you are using global variable and there is in need of replacing the variable name in all the places of same file. This shortcut is used to find all the matched and replaces them.
Ctrl + F (Find) - It is used to find the search results. It may be a variable name or function name etc.
Ctrl + shift + F (Find) - It is used to search globally all over the projects for the search result.
*Ctrl + * (Split Editor) - It is used to split the editor in to two. This will be very useful while comparing the changes in your files.
Alt + uparrow/downarrow (Move code Up/Down) - It is used to move the selected code up/down from the current line.
Ctrl + n (New file) - It is used to open new untitled file.
Ctrl + shift + N (New window) - It is used to open entire new vs code window.
Ctrl + o (open file) - It is used to open file present in your local system.
Ctrl + K + O (New folder) - It is used to open the entire new folder and this will replace the current folder in vs code.
Ctrl + w (close file) - It is used to close the editor focused file.
Shift + alt + uparrow/downarrow (Copy code up/down) - It is used to copy the same selected code up/down from the current line.
Ctrl + shift + X (Show extensions) - It is used to open the extensions menu available in the sidebar.
Ctrl + shift + E (View explorer) - It is used to open the current project with current file focused on the sidebar.
Ctrl + , (settings) - It is used to open the settings.
Ctrl + shift + M (New file) - It is used to open the terminal with problems tab focused to check the errors and warnings in the current project.Just replace the 'M' to 'U' to focus the output tab.
Ctrl + shift + T (Re-open a Closed Editor) - It is used to open a recently closed file in your current project.
Ctrl + backspace (deletewordleft) - It is used to delete the entire word on the left while typing.
Ctrl + k, z (Toggle Zen mode) - It is used to open the zen mode i.e., without any distractions only the editor space will be focused.
Ctrl + / (Toggle line comment) - It is used to toggle the specific line comment.
Shift + alt + A (Toggle block comment) - It is used to toggle comments between the blocks.
Ctrl + shift + [ (Fold cell) - It is used to fold available code in between the blocks.
Ctrl + shift + ] (Unfold cell) - It is used to unfold available code in between the blocks.
Shift + alt + F (Format document) - It is used to format code in the current file.
Ctrl + k + f (Format selection) - It is used to format the selected code.
Ctrl + shift + c (Open windows terminal) - It is used to open the windows terminal instead of vs code terminal.

To create custom key bindings please check this link.

To see complete list of inbuilt keyboard shortcuts please go through this Link.

This is my first post. Apologize for my grammar mistakes if any and for my bad english. I will improve in my upcoming posts.

Thanks guys for reading this post. See you guys in the next post with list of vscode extensions.

Have a Great Day 😊!!!.

DEV Community: Naveenchandar

Event Handling in React: A Beginner’s Guide

What Are Events in React?

Basic Event Handling Syntax

Common Event Types in React

Handling Form Inputs

Passing Arguments to Event Handlers

Synthetic Events vs Native Events

Best Practices

Bonus Tip: Custom Events in React

Conclusion

Throttling vs Debouncing in JavaScript

IIFE in Javascript

What is an IIFE?

Basic Syntax

Why Use an IIFE?

1. Avoid Global Scope Pollution

2. Encapsulation

3. Safe Initialization Code

Real-World Example

Types of IIFE

Traditional Function IIFE

Arrow Function IIFE

IIFE in a React Component

JSX Example

Async IIFE Inside useEffect

Traditional Approach

Using IIFE

✅ Why Use an IIFE Here?

Common Use Cases

IIFE vs Modern Alternatives

Conclusion

'This' in Javascript

1. In functions

2. Methods in objects and class

Conclusion

npm commands every developer should know

HTML input attributes

Web Storage API

CSS Box Model

Javascript Hoisting

What is Hoisting?

Misconception

Variable Hoisting

Function Hoisting

Order Of Precedence

Conclusion

Package.json File explained!!!

VS Code keyboard shortcuts (windows)

Async IIFE Inside `useEffect`