DEV Community: Raunak Sharma

🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling!

Raunak Sharma — Tue, 25 Mar 2025 11:50:54 +0000

JavaScript developers often find themselves grouping arrays of objects based on a specific property. Before ES2023, this required using reduce() or external libraries like Lodash. But now, JavaScript has introduced the built-in Object.groupBy(), making data transformation cleaner and more efficient.

🔥 What is Object.groupBy()?

The Object.groupBy() method allows you to group elements of an array into an object based on a callback function.

💡 Why Should You Use It?

✅ Cleaner Code: Eliminates the need for complex reduce() logic.
✅ Performance Boost: Native implementation is optimized for speed.
✅ Readability: Enhances code clarity and maintainability.

🛠️ How It Works (Example in Action)

Consider you have an array of users, and you want to group them by role:

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Charlie", role: "admin" },
  { name: "David", role: "user" }
];

const groupedUsers = Object.groupBy(users, user => user.role);

console.log(groupedUsers);

🎯 Output

{
  "admin": [
    { "name": "Alice", "role": "admin" },
    { "name": "Charlie", "role": "admin" }
  ],
  "user": [
    { "name": "Bob", "role": "user" },
    { "name": "David", "role": "user" }
  ]
}

🚀 Real-World Use Cases
1️⃣ Grouping Transactions by Status:

const transactions = [
  { id: 1, amount: 500, status: "pending" },
  { id: 2, amount: 1000, status: "completed" },
  { id: 3, amount: 750, status: "pending" }
];

const groupedTransactions = Object.groupBy(transactions, t => t.status);
console.log(groupedTransactions);

2️⃣ Categorizing Products by Type:

const products = [
  { name: "iPhone", category: "electronics" },
  { name: "Shirt", category: "clothing" },
  { name: "Laptop", category: "electronics" }
];

const groupedProducts = Object.groupBy(products, p => p.category);
console.log(groupedProducts);

⚡ Conclusion

The Object.groupBy() method simplifies array grouping, making JavaScript code more readable and efficient. If you’re still using reduce(), it’s time to embrace this new feature! 🚀

What do you think? Have you tried Object.groupBy() yet? Let me know in the comments! 👇

"🚀 React Quirks Explained: What You Don't Know Can Hurt You! 🤯"

Raunak Sharma — Mon, 18 Nov 2024 10:41:35 +0000

React is amazing, but it comes with its own set of quirks that can catch you off guard. Whether you're a beginner or an experienced developer, these surprising behaviors are a reminder of React's complexity and flexibility. Let’s dive in! 🚀

1. State Updates Are Asynchronous🕒

React batches state updates for better performance, which means changes to state aren’t immediate.

const [count, setCount] = useState(0);

const handleClick = () => {
    setCount(count + 1);
    console.log(count); // Still logs 0
};

Why? React doesn’t update the state until the end of the event loop. Use the functional form of setState to get the latest value:

setCount(prevCount => prevCount + 1);

2. Keys Aren't Just For Performance 🗝️

Keys help React identify elements during reconciliation. But using unstable keys, like array indices, can break your UI.

const items = ['React', 'JS', 'CSS'];
items.map((item, index) => <div key={index}>{item}</div>);

Problem: If the array changes (e.g., sorting), React might lose track of elements. Always use unique and stable keys, like IDs.

3. useEffect Runs Twice in Strict Mode 🌀

Strict Mode in development deliberately calls useEffect twice to detect bugs.

useEffect(() => {
    console.log('Effect runs!');
}, []);

Gotcha: This happens only in development. In production, useEffect runs once as expected.

4. Props Are Read-Only 🚫

Props are immutable in React, and modifying them directly can cause errors.

const MyComponent = ({ name }) => {
    name = 'New Name'; // ❌ Illegal
    return <h1>{name}</h1>;
};

Solution: Use state if you need mutable data.

5. Re-renders Happen Even If Props Don't Change 🔁

React re-renders components even if props remain the same.

const Child = ({ value }) => {
    console.log('Child renders');
    return <div>{value}</div>;
};

Why? React doesn’t automatically optimize performance. Use React.memo to prevent unnecessary re-renders:

export default React.memo(Child);

6. Conditional Rendering Can Break Lists 💥

Rendering lists conditionally can lead to unpredictable outcomes.

{items.length && items.map(item => <div>{item}</div>)}

Gotcha: If items.length is 0, React renders 0 before the list. Use explicit checks:

{items.length > 0 && items.map(item => <div>{item}</div>)}

7. JSX Is Not HTML 🖋️

JSX looks like HTML but isn’t! For example, the class attribute is className, and self-closing tags must end with a /.

<div className="my-class" />;

8. Infinite Loops With useEffect 🔄

Forgetting to add dependencies in useEffect can create infinite loops.

useEffect(() => {
    fetchData();
}, [data]); // Missing `data` can cause repeated calls

Solution: Use the dependency array carefully or useRef for stable references.

9. Fragments Don’t Accept Keys By Default 🔑

When using React.Fragment to wrap multiple elements, you might need to add a key, especially in lists.

<>
    <div key="1">Item 1</div>
    <div key="2">Item 2</div>
</>

Solution: Use instead if required.

10. Updating State Doesn’t Merge Objects ✂️

Unlike this.setState in class components, useState doesn’t merge object state automatically.

const [state, setState] = useState({ name: 'React', version: 18 });

setState({ version: 19 }); 
// Name is lost because the state isn’t merged!

Solution: Spread the previous state:

setState(prevState => ({ ...prevState, version: 19 }));

Conclusion: React Is Full of Surprises! 🎉
Understanding these quirks will make you a better React developer. What are some quirks you’ve encountered? Drop your answers in the comments below! Let’s discuss! 😎

Boost Your Productivity: React.js Is Magic: How It Changed the Game for Developers 🎩✨

Raunak Sharma — Mon, 18 Nov 2024 09:18:39 +0000

Once upon a time in the chaotic world of web development, developers wrestled with manual DOM manipulation, tangled code, and unmanageable UI logic. Creating even simple dynamic web apps felt like a never-ending battle. Then came React.js—a tool that rewrote the rules and made developers’ lives magical.

The Pain Before React

Imagine you want to update a counter when a button is clicked:

<button id="incrementBtn">Click Me</button>  
<p id="counter">Count: 0</p>  

<script>  
  let count = 0;  
  const button = document.getElementById('incrementBtn');  
  const counter = document.getElementById('counter');  

  button.addEventListener('click', () => {  
    count++;  
    counter.textContent = `Count: ${count}`;  
  });  
</script>

It works, but every update requires manual DOM manipulation—a nightmare to maintain as apps grow.

Enter React.js 🪄

With React, building dynamic UIs became as simple as snapping together LEGO blocks. Here’s the same counter in React:

import React, { useState } from "react";  

function Counter() {  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <button onClick={() => setCount(count + 1)}>Click Me</button>  
      <p>Count: {count}</p>  
    </div>  
  );  
}  

export default Counter;

What Changed?

Declarative Syntax: Describe what should happen; React handles the "how."
Automatic Updates: The UI updates seamlessly when the state changes—no need to touch the DOM.
Reusable Components: Build once, use anywhere.

Real Magic: A Simple To-Do App
The Old Way

<input id="taskInput" placeholder="Add a task" />  
<button id="addTaskBtn">Add Task</button>  
<ul id="taskList"></ul>  

<script>  
  const input = document.getElementById('taskInput');  
  const button = document.getElementById('addTaskBtn');  
  const list = document.getElementById('taskList');  

  button.addEventListener('click', () => {  
    const task = input.value;  
    if (task) {  
      const li = document.createElement('li');  
      li.textContent = task;  
      list.appendChild(li);  
      input.value = '';  
    }  
  });  
</script>

The React Way

import React, { useState } from "react";  

function TodoApp() {  
  const [tasks, setTasks] = useState([]);  
  const [input, setInput] = useState("");  

  const addTask = () => {  
    if (input.trim()) {  
      setTasks([...tasks, input]);  
      setInput("");  
    }  
  };  

  return (  
    <div>  
      <input  
        type="text"  
        placeholder="Add a task"  
        value={input}  
        onChange={(e) => setInput(e.target.value)}  
      />  
      <button onClick={addTask}>Add Task</button>  
      <ul>  
        {tasks.map((task, index) => (  
          <li key={index}>{task}</li>  
        ))}  
      </ul>  
    </div>  
  );  
}  

export default TodoApp;

React simplifies:

State Management with useState.
Dynamic Updates that "just work."
Scalable Code that’s easy to extend.

Why React Will Always Be Magic
React lets us focus on what to build, not how to manage the DOM. From the Virtual DOM to hooks, it’s a toolkit that turns developer dreams into reality.

React isn’t just a library—it’s a philosophy, and for developers like us, it’s nothing short of magic.

What’s Your React Story?
How has React transformed your development experience? Share your story in the comments, and let’s celebrate the magic of React.js together! ✨

"10 Game-Changing HTML Tricks for Modern Web Developers"

Raunak Sharma — Mon, 14 Oct 2024 11:53:57 +0000

1. Lazy Loading Images
Why? Boosts page load speed by loading images only when they enter the viewport.

<img src="image.jpg" loading="lazy" alt="Lazy loading image">

2. Responsive Images with <picture>
Why? Serve different image sizes based on screen width, optimizing performance.

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>

3. Auto-fill Prevention for Forms
Why? Improves security by preventing browsers from automatically filling sensitive fields.

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

4. Native Modal Dialogs with <dialog>
Why? Simplifies modal creation without external libraries.
This is a native modal

<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>

5. Preload Critical Resources with <link>
Why? Speeds up page load times by preloading key assets like fonts or images.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

6. Pattern Validation on Inputs
Why? Enforces input validation without JavaScript.

<input type="text" pattern="\d{3}-\d{3}-\d{4}" title="123-456-7890">

7. Using <template> for Reusable HTML
Why? Efficiently create reusable HTML elements dynamically with JavaScript.

<template id="cardTemplate">
  <div class="card">Card Content</div>
</template>

8. Semantic HTML for Better SEO
Why? Improves accessibility and search engine ranking by using semantic tags.

<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <p>Article content...</p>
  <footer>Author</footer>
</article>

9. Custom Data Attributes (data-*)
Why? Store custom data in HTML elements that you can easily access via JavaScript.

<button data-id="12345">Product</button>
<script>
  let productId = document.querySelector('button').dataset.id;
</script>

10. Viewport Meta Tag for Mobile Optimization
Why? Ensures a responsive layout on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"10 Essential VS Code Extensions for React Developers"

Raunak Sharma — Mon, 14 Oct 2024 11:28:13 +0000

1. ES7+ React/Redux/React-Native snippets
This extension provides handy snippets for React, Redux, React Native, and GraphQL. It allows you to generate boilerplate code for common tasks, like creating components, importing React, or setting up hooks.

Key Features:

Snippets for functional components, hooks, and Redux.
Shortcuts for commonly used imports and JSX.
2. Prettier - Code formatter
Prettier is an opinionated code formatter that enforces consistent style across your codebase. It automatically formats your code based on the configured settings when you save files.

Key Features:

Supports formatting JavaScript, TypeScript, CSS, and more.
Ensures consistent code style.
3. ESLint
ESLint is a popular tool for identifying and fixing problematic code patterns in JavaScript and TypeScript. The VS Code extension helps you catch linting issues in real time as you write your React code.

Key Features:

Linting for React/JavaScript/TypeScript.
Automatic fixing of code errors and warnings.
4. Bracket Pair Colorizer 2
This extension helps you easily identify matching brackets by colorizing pairs of brackets. It’s very useful for JSX in React components where there are lots of nested tags.

Key Features:

Visual color matching for opening/closing brackets.
Helps track nested JSX elements.
5. React PropTypes Intellisense
This extension provides IntelliSense support for React PropTypes, which is helpful when you're working with components and passing props. It gives you autocompletion for PropTypes in React components.

Key Features:

IntelliSense autocompletion for PropTypes.
Helps with PropTypes documentation and definitions.
6. Auto Rename Tag
When editing JSX, this extension automatically renames paired tags as you change them. It is very convenient when working with complex React components with nested tags.

Key Features:

Automatically renames paired tags in JSX/HTML.
Increases productivity when editing component structure.
7. GitLens — Git supercharged
GitLens is an extension that supercharges Git capabilities in VS Code. It helps you visualize code authorship, explore Git history, and gain insights into your code repository.

Key Features:

It shows who made code changes and when.
It enhanced Git blame and repository navigation.
These extensions will make your workflow smoother and more efficient as a React developer. You can install them directly from the VS Code extensions marketplace.

5 Simple Ways to Improve Your React JS Code

Raunak Sharma — Thu, 26 Sep 2024 07:45:36 +0000

Writing good code in React JS is important to make sure your project runs smoothly and is easy to work with. Here are 5 easy tips to make your code cleaner and better!

Avoid Writing Functions Directly in JSX Writing functions directly inside JSX can slow down your app. Instead, write the function outside and pass it to your component.

// Instead of this:
<button onClick={() => doSomething()} />

// Do this:
const handleClick = () => doSomething();
<button onClick={handleClick} />

Organize Your Files
Keep your files neat by creating folders for components, utilities, hooks, etc. This helps keep your project clean and easy to find what you need.
Use Functional Components & Hooks
Instead of using class components, use functional components with hooks like useState and useEffect. They are easier to write and read.

// Example of a Functional Component
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Create Reusable Components Don't repeat yourself! Write components that can be reused by passing props to them. This saves time and makes your code cleaner.

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

Use PropTypes or TypeScript PropTypes or TypeScript help you make sure the data you pass to your components is correct, preventing bugs early on.

import PropTypes from 'prop-types';

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};