React useState
HooksReact
Update object and array
Form (Object)
import {useState} from 'react';
export default function Form() {
const [form, setForm] = useState({
firstName: 'Barbara',
lastName: 'Hepworth',
isStudent: false,
});
return (
<>
<label>
First name:
<input
value={form.firstName}
onChange={(e) => {
setForm({
...form,
firstName: e.target.value,
});
}}
/>
</label>
<label>
Last name:
<input
value={form.lastName}
onChange={(e) => {
setForm({
...form,
lastName: e.target.value,
});
}}
/>
</label>
<label>
is student:
<input
type="checkbox"
checked={form.isStudent}
onChange={(e) => {
setForm({
...form,
isStudent: e.target.checked,
});
}}
/>
</label>
</>
);
}
Form (Nested Object)
import {useState} from 'react';
export default function Form() {
const [person, setPerson] = useState({
name: 'Niki de Saint Phalle',
artwork: {
title: 'Blue Nana',
city: 'Hamburg',
},
});
function handleNameChange(e) {
setPerson({
...person,
name: e.target.value,
});
}
function handleTitleChange(e) {
setPerson({
...person,
artwork: {
...person.artwork,
title: e.target.value,
},
});
}
function handleCityChange(e) {
setPerson({
...person,
artwork: {
...person.artwork,
city: e.target.value,
},
});
}
return (
<>
<label>
Name:
<input value={person.name} onChange={handleNameChange} />
</label>
<label>
Title:
<input value={person.artwork.title} onChange={handleTitleChange} />
</label>
<label>
City:
<input value={person.artwork.city} onChange={handleCityChange} />
</label>
</>
);
}
List (Array)
import {useState} from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';
let nextId = 3;
const initialTodos = [
{id: 0, title: 'Buy milk', done: true},
{id: 1, title: 'Eat tacos', done: false},
{id: 2, title: 'Brew tea', done: false},
];
export default function TaskApp() {
const [todos, setTodos] = useState(initialTodos);
function handleAddTodo(title) {
setTodos([
...todos,
{
id: nextId++,
title: title,
done: false,
},
]);
}
function handleChangeTodo(nextTodo) {
setTodos(
todos.map((t) => {
if (t.id === nextTodo.id) {
return nextTodo;
} else {
return t;
}
}),
);
}
function handleDeleteTodo(todoId) {
setTodos(todos.filter((t) => t.id !== todoId));
}
return (
<>
<AddTodo onAddTodo={handleAddTodo} />
<TaskList todos={todos} onChangeTodo={handleChangeTodo} onDeleteTodo={handleDeleteTodo} />
</>
);
}
AddTodo.js:
import {useState} from 'react';
export default function AddTodo({onAddTodo}) {
const [title, setTitle] = useState('');
return (
<>
<input placeholder="Add todo" value={title} onChange={(e) => setTitle(e.target.value)} />
<button
onClick={() => {
setTitle('');
onAddTodo(title);
}}
>
Add
</button>
</>
);
}
TaskList.js:
import {useState} from 'react';
export default function TaskList({todos, onChangeTodo, onDeleteTodo}) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<Task todo={todo} onChange={onChangeTodo} onDelete={onDeleteTodo} />
</li>
))}
</ul>
);
}
function Task({todo, onChange, onDelete}) {
const [isEditing, setIsEditing] = useState(false);
let todoContent;
if (isEditing) {
todoContent = (
<>
<input
value={todo.title}
onChange={(e) => {
onChange({
...todo,
title: e.target.value,
});
}}
/>
<button onClick={() => setIsEditing(false)}>Save</button>
</>
);
} else {
todoContent = (
<>
{todo.title}
<button onClick={() => setIsEditing(true)}>Edit</button>
</>
);
}
return (
<label>
<input
type="checkbox"
checked={todo.done}
onChange={(e) => {
onChange({
...todo,
done: e.target.checked,
});
}}
/>
{todoContent}
<button onClick={() => onDelete(todo.id)}>Delete</button>
</label>
);
}
Loading Code Editor
Immer
import {useState} from 'react';
import {useImmer} from 'use-immer';
let nextId = 3;
const initialList = [
{id: 0, title: 'Big Bellies', seen: false},
{id: 1, title: 'Lunar Landscape', seen: false},
{id: 2, title: 'Terracotta Army', seen: true},
];
export default function BucketList() {
const [list, updateList] = useImmer(initialList);
function handleToggle(artworkId, nextSeen) {
updateList((draft) => {
const artwork = draft.find((a) => a.id === artworkId);
artwork.seen = nextSeen;
});
}
return (
<>
<h1>Art Bucket List</h1>
<h2>My list of art to see:</h2>
<ItemList artworks={list} onToggle={handleToggle} />
</>
);
}
function ItemList({artworks, onToggle}) {
return (
<ul>
{artworks.map((artwork) => (
<li key={artwork.id}>
<label>
<input
type="checkbox"
checked={artwork.seen}
onChange={(e) => {
onToggle(artwork.id, e.target.checked);
}}
/>
{artwork.title}
</label>
</li>
))}
</ul>
);
}
Resetting state with a key
import {useState} from 'react';
export default function App() {
const [version, setVersion] = useState(0);
function handleReset() {
setVersion(version + 1);
}
return (
<>
<button onClick={handleReset}>Reset</button>
<Form key={version} />
</>
);
}
function Form() {
const [name, setName] = useState('Taylor');
return (
<>
<input value={name} onChange={(e) => setName(e.target.value)} />
<p>Hello, {name}.</p>
</>
);
}
Get previous state
useRef should be able to achieve this goal. Below official technique is rarely used.
// App.js
import {useState} from 'react';
import CountLabel from './CountLabel.js';
export default function App() {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
<CountLabel count={count} />
</>
);
}
CountLabel.js: The most important part if set function must be inside a condition, otherwise infinite loop.
import {useState} from 'react';
export default function CountLabel({count}) {
const [prevCount, setPrevCount] = useState(count);
const [trend, setTrend] = useState(null);
if (prevCount !== count) {
setPrevCount(count);
setTrend(count > prevCount ? 'increasing' : 'decreasing');
}
return (
<>
<h1>{count}</h1>
{trend && <p>The count is {trend}</p>}
</>
);
}
This pattern can be hard to understand and is usually best avoided. However, it’s better than updating state in an
effect. When you call the set function during render, React will re-render that component immediately after your component exits with a return statement, and before rendering the children. This way, children don’t need to render twice. The rest of your component function will still execute (and the result will be thrown away), but if your condition is below all the calls to Hooks, you may add returnnullinside it to restart rendering earlier.
Caveats
- The
setfunction only updates the state variable for the *next* render. If you read the state variable after calling thesetfunction, you will still get the old value that was on the screen before your call. - If the new value you provide is identical to the current
state, as determined by anObject.iscomparison, React will skip re-rendering the component and its children. This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn’t affect your code. - React batches state updates. It updates the
screen after all the event handlers have run and have called their
setfunctions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can useflushSync. - Calling the
setfunction during rendering is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to store information from the previous renders. See an example above. - In Strict Mode, React will call your updater function twice in order to help you find accidental impurities. This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.