Search for a command to run...
Hi, I'm Akshay Kaushik.
Passionate web developer fueled by curiosity and driven to create exceptional user-centric solutions using Python, JavaScript, Django, Next.JS and cutting-edge technologies.
On your second point (2.Passing Functions Inline) using inline function or useCallback will not solve the issue if the handler is bound through a useEffect.
You should use the onClick of the element you want to bind. This way the inline would work directly. Also in your useCallback version, it would not work anyway since you give it an empty dependency array, which means it will still keep the stale count value for ever.
One common mistake I've seen often with beginners is using parallel state and useEffect where a memo and callback would be better.
Suppose I have a state that's an object reflective of my API/domain, but I need to convert it into a different kind of complex object for a UI framework component that uses more generic, less domain-specific properties. (say, a dynamic form)
A common thing is to have a separate state for setter/getter and a useEffect that looks at the new form state and updates the old domain state, another looking for changes in the incoming props and recreating the new state. Aside from the risks of getting into a useEffect looping situation, it can lead to other errors if there's any way they get out of sync (often, due to trying to avoid the looping).
Instead of parallel state, have a useMemo take the domain state and turn it into the property value, and a callback that takes the updated property value from the contained component and setState it back. one version of the truth, so to speak.
In Linux, swap space allows the system to utilize disk storage for memory management. When the system is running low on physical RAM, it can temporarily move data from memory to swap space on the hard drive. Increasing swap file size provides more “b...
Merging separate Git repositories into a single combined repository is a common need for developers. For example, you may have a frontend and backend repository that are part of the same overall application but kept in separate repositories during in...
As technology evolves, it becomes necessary for developers to migrate servers. Whether it's upgrading to a more powerful server or downgrading to a more cost-effective solution, the process remains the same. Recently, I have migrated my server, holdi...
Understanding Concurrency in Python Concurrency refers to the execution of multiple tasks simultaneously in a program. There are primarily three ways to introduce concurrency in Python - Multithreading, Multiprocessing and Asyncio. Each approach has ...
As a React developer, you're probably familiar with the UseState hook. It's a powerful tool that allows you to add state to your functional components. However, it's easy to make mistakes when using it. In this article, we'll explore the most common mistakes and how to avoid them.
Let's walk through the 6 most common useState mistakes, ranging from conceptual errors to subtle syntax issues, and learn how to avoid them through clear examples. Understanding these common pitfalls will level up your React skills.
The useState hook returns an array with 2 elements. The first element is the current state value, while the second element is a state setter function.
It's important to understand that useState does not merge object state updates - it completely overwrites state.
View this example:
import React, {useState} from 'react';
function MyComponent() {
const [state, setState] = useState({
name: 'John',
age: 20
});
const handleUpdate = () => {
// This will overwrite existing state
setState({
name: 'Sam'
});
}
return (
<div>
{/*Renders 'Sam' instead of 'John' after handleUpdate call*/}
<h1>{state.name}</h1>
<h2>{state.age}</h2>
<button onClick={handleUpdate}>Update Name</button>
</div>
);
}
To merge state updates correctly, pass an updater function to setState:
setState(prevState => {
return {...prevState, name: 'Sam'}
});
It's convenient to pass functions inline to event handlers or effects, but doing this breaks updating state:
import {useState, useEffect} from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// Closures prevent this from working
document.addEventListener('click', () => setCount(count + 1));
}, []);
return <h1>{count}</h1>;
}
Since function closures are created on each render, count never updates properly.
Pass functions inline only if they don't update state.
Instead, declare them outside or in useCallback():
// Outside
function increment() {
setCount(count + 1);
}
// In useCallback()
const increment = useCallback(() => {
setCount(count + 1);
}, []);
Another mistake is mutating state arrays or objects directly:
const [tags, setTags] = useState(['react', 'javascript']);
const addTag = () => {
// Mutates existing array
tags.push('nodejs');
}
return <div>{tags}</div>
Since the tags array was mutated directly, React can't detect changes and won't trigger re-renders properly.
Instead, create a new copy of array/object before passing to setter function:
const addTag = () => {
setTags([...tags, 'nodejs']);
}
Spread syntax [...array] shallow copies the array. This lets React detect changes.
There's no need to separate every single field or data point into its own state hook. Doing so hurts performance unnecessarily:
function MyForm() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
return (
<>
<input
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</>
);
}
Instead, group related state into single objects:
function MyForm() {
const [fields, setFields] = useState({
firstName: '',
lastName: ''
})
// Call once to update both name fields
const handleChange = (e) => {
setFields({
...fields,
[e.target.name]: e.target.value
})
}
return (
<>
<input
name="firstName"
value={fields.firstName}
onChange={handleChange}
/>
<input
name="lastName"
value={fields.lastName}
onChange={handleChange}
/>
</>
);
}
When dealing with objects or arrays, avoid direct comparisons for state changes.
// Incorrect
if (user !== newUser) {
// ...
// Correct
if (user.id !== newUser.id) {
// ...
It's important to initialize state properly:
Rather than hard-coding values:
// Hard-coded
const [count, setCount] = useState(0);
// Initialise based on props
const [count, setCount] = useState(props.initialCount);
If fetching data in useEffect, set loading state:
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser().then(user => setUser(user))
}, []);
// Check for null before rendering
return <div>{user ? user.name : 'Loading...'}</div>
This avoids errors from rendering undefined state.
Typing state helps avoid issues:
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{name: string} | null>(null);
This ensures you prevent passing an invalid updated state value to setter functions.
Bookmark this as a handy useState troubleshooting guide. And most importantly, pay special attention to problem areas like spreading arrays before setting state, not mutating objects directly, understanding how useState batching.
Mastering useState fundamentals takes your React game to the next level!
Q: Why call a function to update state instead of changing it directly?
A: Calling the setter function lets React trigger re-renders. It also queues up state changes for more reliable batching.
Q: How do you update object state properly?
A: Either replace the state completely by passing a new object, or shallow merge by spreading the previous state. Never directly mutate state objects.
Q: When should useCallback be used with state setters?
A: Use it if passing the setter down in a callback or effect to prevent unnecessary recreations between renders.
Q: What's the difference between passing a value vs updater function to setState?
A: Value replaces state wholly while updater merges by taking previous state as first argument of function.
Q: Why spread arrays/objects before updating state?
A: Spreading creates a copied version React can watch for changes, avoiding issues with mutation.