DEV Community: Priya Kothalkar

I Replaced 10 useStates with One useReducer (ft. HackerRank Challenge)

Priya Kothalkar — Sun, 20 Jul 2025 21:20:18 +0000

The Challenge

Today, I came across a challenge on hackerRank, focused on State management and it turned out to be interesting + to test my Basics!
Link to the HackerRank Challenge

Here are the details:
We have 5 different feedback cards labelled as:

Readability
Performance
Security
Documentation
Testing

Each card has 2 buttons as Upvote and Downvote.

The Goal:

All cards should render together, but each card must manage its upvote/downvote count separately, without affecting the others. Along with it, they should pass the tests on HackerRank.

Use Case:

Clicking Upvote on a card should increase that card’s upvote count by 1
Clicking Downvote should increas that card’s downvote count by 1

Each card is independent, and the count should reflect it.

Let's explore the Solution:

Solution 1: Use 10 individual useState Hooks.
Here, I’d maintain a separate state for:

Each card’s upvotes (5 total)
Each card’s downvotes (5 total)

const [readabilityUp, setReadabilityUp] = useState(0);
const [readabilityDown, setReadabilityDown] = useState(0);
// ...and so on for the other 4 cards

Pros:

Simple to implement
Easy to follow for beginners

Cons:

Not scalable — 10 states for just 5 cards!
Becomes messy with more feedback types
Logic is duplicated across cards

Solution 2: Using useReducer for centralised state
Instead of managing 10 different states, I centralized state handling using a reducer.

Initial State:

const initialState = {
  Readability: { upvote: 0, downvote: 0 },
  Performance: { upvote: 0, downvote: 0 },
  Security: { upvote: 0, downvote: 0 },
  Documentation: { upvote: 0, downvote: 0 },
  Testing: { upvote: 0, downvote: 0 },
}

Reducer Logic:

function reducer(state, action) {
  const { card, votetype } = action.payload;
  switch (votetype) {
    case "upvote":
      return {
        ...state,
        [card]: {
          ...state[card],
          [votetype]: state[card][votetype] + 1
        }
      };
    case "downvote":
      return {
        ...state,
        [card]: {
          ...state[card],
          [votetype]: state[card][votetype] + 1
        }
      };
    default:
      return state;
  }
}

Pros:

Scalable and clean
Centralised state handling
DRY (Don't Repeat Yourself) principle applied
Easier to debug and maintain

Cons:

Slightly more advanced if you're new to React
Requires understanding of reducers and dispatching actions

My Learning & Takeaways
I started with useState, but then realised it isn't maintainable and Scalable. Once I refactored using useReducer, the entire structure became cleaner, modular, scalable and better!

What I learned:
Think beyond “just getting it to work”, consider scalability and maintainability.
useReducer is a great fit when managing multiple related states. Even simple UI components can challenge your architecture choices

Final Thoughts:

This small challenge helped me rethink how I approach state in React.
It was more than just fixing a UI; it became an exercise in writing cleaner, scalable code.

Would love to hear how you would have solved this! Let’s discuss 💬

Understanding React hooks

Priya Kothalkar — Sat, 04 Jun 2022 10:27:53 +0000

Table of Content:

What are Hooks

State as a Hook

Effect as a Hook

If you want to learn about hooks from the basics then this blog will be helpful to you. So, let's understand what is hooks? and how we can use them in our Projects.

What are Hooks

Hooks are functions that let you use React state and other react features without writing a class. Hook does not work inside classes but lets you use React without classes.
We are going to look at some of the built-in React Hooks such as useState and useEffect.
With Hooks, we can extract stateful logic from a component so it can be tested independently and reused.

State as a Hook

We have an example counter here. After every click on the button the counter increments the value:

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <h1>You clicked counter {counter} times</h1>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
    </div>
  );
}

The above code gives us the output as follows:

useState is a Hook. We call it inside a function to add some local state to it. React preserve this state between re-renders. useState return a pair of the current state and a function that let us update the state. We can call this function using an event handler or somewhere else.
useState takes only one argument as its initial state. In this example 0 is our initial state and using this our counter starts at zero. You can change as per your need. The initial state argument is used only at the initial render.
We can also use a state hook more than once in a single component.

Effect as a Hook

The useEffect hook, adds the ability to perform side effects from a function component. As we can manually change the DOM from React component because it can't be done during rendering. By default, React runs the useEffect hook after every render including the first render.
For Example, the below example sets the Document title after React updates the DOM:

import "./style.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    document.title = `Counter: ${counter} time`;
  });
  return (
    <div className="App">
      <h1>You clicked counter {counter} times</h1>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
    </div>
  );
}

The above code gives us the output as follows:

I hope you have understood what is Hooks and how to use them. We will learn how to create our custom hooks in the next blog which will be updated soon. If you have any suggestions regarding the blog, please let me know in the comments section.

Thank you!

Understanding em, rem, px, vh, vw, and % conventions

Priya Kothalkar — Tue, 10 May 2022 17:42:33 +0000

Table of Content:

em

rem

px and %

vh and vw

We are using frequently some of the conventions in CSS to style our elements. Sometimes we use px, rem, em, and so on. But did you think what are they doing? How our elements are getting different sizes using them? Yeah, we have questions Don't we? So I wanted to summarize the answer to it efficiently! So what are you waiting for let's dive into the concept!

em: Relative to the parent's size
rem: based on the root size (1rem = 16px)
px: it defines size in pixel (1px = 0.0625 rem)
vh: 1% of viewport height
vw: 1% of viewport width
%: Relative to parent's size

Let's understand using examples:

Example1: Using em

em is a relative length unit, which is relative to parent size.

HTML

<ul class="ems li">
   <li>First</li>
   <li>Second</li>
   <li>Third
       <ul>
           <li>Third A</li>
           <li>Third B
               <ul>
                   <li>Third B 2</li>
               </ul>
           </li>
       </ul>
    </li>
</ul>

CSS

html{
    font-size: 16px;
}
.ems li{
    font-size: 1.3em;
}

It will give us the output:

Here, we have applied em to every list inside class ems. So, As "First" has a font-size: 1.3em, the next "First A" is having font-size 1.3 times to parent size. And so on.

Example2: Using rem

rem is a relative length unit, which is relative to the root's size

HTML

<ul class="rems li">
   <li>First</li>
   <li>Second</li>
   <li>Third
       <ul>
           <li>Third A</li>
           <li>Third B
               <ul>
                   <li>Third B 2</li>
               </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

html{
    font-size: 16px;
}
.rems li{
    font-size: 1.5rem;
}

It gives us the output:

As rem is relative to root font-size and we have given html as font-size 16px so each list element having 16px font-size.

Example3: Using px and % (percentage)

Pixel-px is an absolute length unit that is not relative to anything else and is always the same size.

HTML

<div class="box">
    <p>I am a using pixel</p>
</div>
<div class="box">
    <p class="para">I am using percentage</p>
</div>

CSS

.box{
    color:white;
    border:2px solid black;
    margin:1rem;
}
.box p{
    margin: 0;
    width: 200px;
    background-color: purple;
    padding: 1rem;
}
.box .para{
    width:20%;
}

It will give us the output:

Pixel is independently accessing its 200px and % is dependent on div block, so it's accessing the 20% of div block size.

Example4: Using Vh(Viewport's Height) and Vw (Viewport's width)

vh and vw are relative length units that are relative to the viewport.

HTML

<div class="block Vh">I am 10 vh long</div>
<div class="block Vw">I am 10vw wide</div>

CSS

.block{
    background-color: aqua;
    margin:1rem;
    border: 2px solid black;
}
.Vh{
    width:10vh;
}
.Vw{
    width: 10vw;
}

As shown in the output you will see, 10vh is equals to 100px and 10vw is equals to 120px for viewport of 1200px width and 1000px height.

So, It's completed! I hope you will find this helpful and if there are any suggestions please write in the comments.

Thank You!

Understanding Temporal Dead Zone!

Priya Kothalkar — Sun, 06 Mar 2022 12:52:36 +0000

Temporal Dead Zone is the area of a block where a variable is not accessible till it gets initialized with a value.

Block is pair of brackets {...} used to group multiple executable statements
Initialization means assigning an initial value to a variable

If we try to access the variable before its initialization, it will throw a Reference error as shown below:

As you can see we got ReferenceError stating can't access the variable before initialization. To prevent our Javascript code from such kind Errors, we need to access variables outside the Temporal Dead Zone(TZD).

Scope of Temporal Dead Zone:

TDZ starts at the beginning of the block's local scope and ends with the variable initialization with a value.

{
  // tdz of block started
  // tdz of block started
  console.log(a); // Reference Error
  // tdz continued
  // tdz continued
  let a = 20; // tdz ends here
  // tdz does not exist here
  // tdz does not exist here
}

As we can see that this started at the start of the {}(brackets/block) itself and ended with the variable initialization.
We got a Reference error because we tried accessing the variable before its initialization. So, it's a good practice to access variables after initialization.

Let's take examples to better understand the concept:

Example 1: Accessing variables after declaration and before initialization

let add;
console.log(add);

The above code gives us the output as undefined :

The output shows that we have that variable but do not have any value assigned yet, so the compiler gives it an undefined value.

Example 2: As we know if we try to access a variable before its definition and initialization it will give a reference error.

Example 3: If we use var to declare a variable we get undefined as output, as we try to access the variable before initialization.

console.log(add);
var add = 3;

Output:

Javascript does not initialize let and const variables with any values, they remain dead and inaccessible. In contrast, var is initialized after its hoisting.

Nowadays let and const are used instead of var to define variables as it causes minimum consequences.In old scripts only we would be able to see var used.

My Portfolio

Priya Kothalkar — Mon, 16 Aug 2021 06:15:21 +0000

My #Portfolio contains Projects, Blogs, Skills and Social media links.
https://priya-kothalkar.netlify.app/

You can have a look, and if you have any suggestions please let me know in comments.
Thank you!