diff --git a/blog_images/bunny-poster.jpg b/blog_images/bunny-poster.jpg new file mode 100644 index 000000000..e56f72913 Binary files /dev/null and b/blog_images/bunny-poster.jpg differ diff --git a/blog_posts/react-use-state-with-label.md b/blog_posts/react-use-state-with-label.md new file mode 100644 index 000000000..9fb403b0e --- /dev/null +++ b/blog_posts/react-use-state-with-label.md @@ -0,0 +1,33 @@ +--- +title: "Tip: Label your useState values in React developer tools" +type: tip +tags: react,hooks +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. +--- + +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: + +```jsx +const useStateWithLabel = (initialValue, label) => { + const [value, setValue] = useState(initialValue); + useDebugValue(`${label}: ${value}`); + return [value, setValue]; +}; + +const Counter = () => { + const [value, setValue] = useStateWithLabel(0, 'counter'); + return ( +
{value}
+ ); +}; + +ReactDOM.render(