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(, document.getElementById('root')); +// Inspecting `Counter` in React developer tools will display: +// 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). + +**Image credit:** [Bekky Bekks](https://unsplash.com/@bekkybekks?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)