DEV Community: Praveen

useReducer hook in react

Praveen — Fri, 05 Jun 2026 04:15:09 +0000

The useReducer hook is an alternative to the useState hook that is preferred when you have complex state logic. It is useful when the state transitions depend on previous state values or when you need to handle actions that can update the state differently.

Syntax:

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

reducer: A function that defines how the state should be updated based on the action. It takes two parameters: the current state and the action.

initialState: The initial value of the state.

State The current state returned from the useReducer hook.

dispatch: A function used to send an action to the reducer to update the state

state.count

import React, { useReducer } from 'react';

const counterReducer = (state, action) => {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

case 'reset':

return { count:0 };

default:

return state;

}

};

function Counter() {

const [state, dispatch] = useReducer(counterReducer, { count: 0 });

return (

Count: {state.count}

dispatch({ type: 'INCREMENT' })}>Increment

dispatch({ type: 'DECREMENT' })}>Decrement

button onClick={() => dispatch({ type: 'reset' })}>Decrement

);

}

export default Counter;

Closure in javascript

Praveen — Thu, 07 May 2026 07:45:07 +0000

A closure is a function that remembers and accesses variables from its outer scope even after the outer function has finished executing.

INTRODUCTION OF ME

Praveen — Tue, 21 Apr 2026 08:45:49 +0000

Myself praveen
Thank you for giving opportunity introduce myself to you.
Now iam pursuing full stack Java development course.I had a skills
In Html,css and javascript and also done projects in Html,css and I know the basic concepts of javascript .I writing blogs in dev.to related to what I am learned everyday .and also passionate about the video editing doing freelance edits for the clients also.so i taken career as a developer and passion as video editing . that's all thank you

Javascript iteration method

Praveen — Thu, 16 Apr 2026 08:06:26 +0000

For each method
The forEach() method calls a function for each element in an array.
Const marks =[24,35,100,47,55,65]
Marks.forEach(display);
Function display (V);{
Console.log(V);
}
We can able to get value,index,array

For.map method
map() creates a new array from calling a function for every array element.

map() does not execute the function for empty elements.

map() does not change the original array.
Const marks =[100,99,98,96,75];
Marks.map=(display)
Function display (V)
{
Return v+3
}
flat map

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.
Const products =["car,bike","sofa,bed","shirt,pant"
Console.log (products.map(a=>a.split(","));
Filter
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
return value > 18;
}

Call back function we

Praveen — Wed, 15 Apr 2026 08:02:54 +0000

What is Synchronous JavaScript?
In synchronous programming, operations are performed one after the other, in sequence. So, basically each line of code waits for the previous one to finish before proceeding to the next. This means that the program executes in a predictable, linear order, with each task being completed before the next one starts.

What is Asynchronous JavaScript?
Asynchronous programming, on the other hand, allows multiple tasks to run independently of each other. In asynchronous code, a task can be initiated, and while waiting for it to complete, other tasks can proceed. This non-blocking nature helps improve performance and responsiveness, especially in web applications.

call back function.
Call back function is an passed an argument into Anto another function

Java script is single threaded programming language
JavaScript is traditionally single-threaded because it operates in a single execution context — there is one call stack where functions are pushed and popped as they are executed. In JavaScript, the call stack operates on a LIFO (Last In, First Out) basis, where functions are executed in the order they are pushed onto the stack.

However, just because JavaScript is single-threaded doesn’t mean it’s inefficient or incapable of handling multiple tasks. The secret lies in JavaScript’s ability to handle asynchronous operations using non-blocking features.

Java script array methods

Praveen — Thu, 09 Apr 2026 08:28:16 +0000

1*Array length*

The length property returns the length (size) of an array:

Example
const country = ["India", "pakistan", "Australia", "newzealand"];

let size = country.length;

2*Javascript array tostring*
JavaScript Array toString()
The toString() method returns the elements of an array as a comma separated string.
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let myList = fruits.toString();

3.JavaScript Array at()
Examples
Get the third element of fruits using at():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

4.JavaScript Array join()

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Result:

Banana * Orange * Apple * Mango

4.JavaScript Array push()
The push() method adds a new element to an array (at the end):

Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

5.The push() method adds a new element to an array (at the end):

Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

6.JavaScript Array unshift()
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
7.JavaScript Array delete()
Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];