How to make a custom hook that wraps useState with TypeScript properly

Kent C. Dodds is a well-known software engineer, educator, and open-source advocate renowned for his expertise in JavaScript and React. Through his blog, courses, and conference talks, Kent shares insights, best practices, and practical tips on front-end development, testing, and software engineering. Developers can learn from Kent's extensive experience and deep understanding of the JavaScript ecosystem, gaining  insights into building modern web applications with React and other technologies.

Kent C. Dodds

I made a useDarkMode hook that looks like this. It powers the "dark mode" support for all the Epic React workshop apps (for example React Fundamentals) I want to call out a few things about the hook itself that made things work well from a TypeScript perspective. Let's clear out all the extra stuff and just look at the important bits.

Wrapping React.useState with TypeScript

<p>This is a great article to keep as a reference.</p>


<p>The <code>as const</code> trick is super neat! But I use an eslint plugin that forces me into setting the return type of every function. As mentioned in the article, this is also a possible solution for this issue. I find the latter more readable and maintainable.</p>
