useObjectState
Manage complex state objects with useObjectState.
Install:
npm i @uidotdev/usehooks
Description:
The useObjectState hook is useful for managing complex state objects. It provides a convenient way to initialize and update state values using a single hook. By using this hook, you can easily create and maintain state objects with initial values, and then update them through a flexible “handleUpdate” function. This function accepts either a callback function or an object, allowing you to merge new values into the existing state object.
Parameters
| Name | Type | Description |
|---|---|---|
| initialValue | object | (Optional) The initial state value. |
Return Value
The useObjectState hook returns an array with the following elements:
| Index | Type | Description |
|---|---|---|
| 0 | object | The current state object. |
| 1 | function | A function to update the state object. |
Demo:
Example:
import * as React from "react";
import { useObjectState } from "@uidotdev/usehooks";
const initialState = {
team: "Utah Jazz",
wins: 2138,
losses: 1789,
championships: 0,
};
export default function App() {
const [stats, setStats] = useObjectState(initialState);
const addWin = () => {
setStats((s) => ({
wins: s.wins + 1,
}));
};
const addLoss = () => {
setStats((s) => ({
losses: s.losses + 1,
}));
};
const reset = () => {
setStats(initialState);
};
return (
<section>
<h1>useObjectState</h1>
<button className="link" onClick={addWin}>
Add Win
</button>
<button className="link" onClick={addLoss}>
Add Loss
</button>
<button className="link" onClick={() => alert("lol")}>
Add Championship
</button>
<button className="link" onClick={reset}>
Reset
</button>
<table>
<thead>
<tr>
{Object.keys(stats).map((key) => {
return <th>{key}</th>;
})}
</tr>
</thead>
<tbody>
<tr>
{Object.keys(stats).map((key) => {
return <td>{`${stats[key]}`}</td>;
})}
</tr>
</tbody>
</table>
</section>
);
}