andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reword some articles

Browse Source
This commit is contained in:
Chalarangelo
2021-11-07 17:34:40 +02:00
parent 4670439e56
commit b8c2ed5479
11 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blog_posts/react-use-state-with-label.md
View File

@ -6,7 +6,7 @@ authors: chalarangelo
cover: blog_images/bunny-poster.jpg
excerpt: When working with multiple `useState` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values.
firstSeen: 2021-05-06T12:00:00+03:00
lastUpdated: 2021-06-12T19:30:41+03:00
lastUpdated: 2021-11-07T16:34:37+03:00
---
When working with multiple `useState` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the [`useDebugValue`](https://reactjs.org/docs/hooks-reference.html#usedebugvalue) hook to create a custom `useStateWithLabel` hook:
@ -30,4 +30,4 @@ ReactDOM.render(<Counter />, document.getElementById('root'));
// StateWithLabel: "counter: 0"
```
This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds (i.e. by exporting a hook that defaults back to `useState` when building for a production environment).
This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds. An example would be exporting a hook that defaults back to `useState` when building for a production environment.