Search for a command to run...
Hello there! I'm Ajinkya Chanshetty.
I have 8+ Years of experience in software development with Web UI technologies. My tech stack includes Front end technologies: HTML5, CSS3, Bootstrap, SCSS, JavaScript, ES6, TypeScript UI Frameworks: Angular V10,12,14 and ReactJS, Redux, NgRx, NextJS Server-side Programming languages: JAVA, NodeJS Database: MongoDB, MySQL Also have Strong Problem-Solving Skills, and knowledge of Data Structures, and Algorithms
No comments yet. Be the first to comment.
You might have noticed the different shades of the moon. There's that one bright full moon that comes once every month, and then, little by little, it starts fading every day. It happens all the time,
Sometimes, out of nowhere, nostalgia hits you. You could be sitting in your room, walking alone on a quiet evening, or listening to an old song, and suddenly the memories of your school days come rush
We’ve all had moments where we lose our cool. You’re mad, your heart’s pounding, and suddenly you say, “You never listen!” or “Why do you always screw up?” It feels like a relief for a second, like letting out a big breath. But then you see their fac...
Life has a funny way of teaching us things, especially through the people we meet and the friendships we make. One big lesson it teaches is about karma—what goes around, comes around. Your actions, your thoughts, everything comes back to you somehow....
This morning, I went to the bank. I had a small task to complete, and the staff asked me to sit for a while. As I sat there, I pulled out my phone and started scrolling aimlessly. I was only focused on my work at the bank—nothing more. I remembered h...
React has introduced the 'useState' hook in V 16.8 onwards as a provision to declare the state inside a functional component rather than the class components as well.
In the Class component, we could declare a state and the data types have to be declared inside the properties of an object only. But using the usestate hook, we can declare the data in the following formats:
Number
String
Object
Array
Boolean
Basically, useState returns an array of two elements which have the 'variable name' and the 'function' which manipulates the variable.
const [count, setCount] = useState(0); //For Numbers
const [welcomeNote, setWelcomeNote] = useState("Hello Guest!"); //String
const [display, setDisplay] = useState(true); //boolean
const [fullName, setfullName] = useState({
firstName: "Jon",
lastName: "Snow!"
});
const [employeeIds, setEmployeeIds] = useState([10, 20, 30]);//array
The manipulation of the state can be done in two ways.
Assigning the state to a new state value
Manipulating the state with the previous value of the state
//This is directly assigning the state to a new value or new state
<button onClick={() => { setCount(count + 1) }}>Increment</button>
//Also, we can manipulate with the previous value of the state and produce a new state
const resetCount = () => {
setCount(prevCount => {
return prevCount + 1
},)
}
const incrementByFive = () => {
for (let i = 0; i < 5; i++) {
setCount(prevCount => prevCount + 1)
}
}
While dealing with the Objects and Arrays, we have to consider the old value of the state with the rest operator and can return the updated value to that Object or array.
//Rest Operator can be used for combining two arrays and objects
var array1 = [10, 20, 30, 40, 50];
var array2 = [60, 70, 80, 90, 100];
var array3 = [...array1, ...array2];
console.log(array3);
//OutPut
[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
//For changing the fullname state
const changeName = () => {
setfullName({
firstName: "Aegon",
lastName: "Targaryen"
});
};
const updateEmployee = (emp) => {
console.log(emp);
setEmployeeIds([...employeeIds, emp]);
}
In the following snippet, there's a component where all the data types for a state are declared.
There's one drawback of the useState hook, unlike the setState in class component, we can't track the value of the updated state in the callback function as a second parameter to the setState function.
setState(prevCount => {
return prevCount + 1
}, ()=>{
console.log(count)
}
)
We have to use another hook which is useEffect to trace the state change.
useEffect(() => {
console.log("called", count);
}, [count]);
These are the ways how we can make the use of useState hook to declare the state. Hope you liked it, happy coding. Thank you!