The problem
Is not a real problem but is something about semantic in use state variabile using useState(). The fact is useState() can be used to store if a modal is open or close. What I HATE is use the setter in this way: const [isOpen, setOpen] = useState(false);. What I hate is the use of setOpen. I prefer a more semantic way to manage boolean values.
Type
useState() returns two values. First with the boolean value and second the method to update the variable.
Solution
My proposal is to stop using useState() and start building hooks like this one. If the semantic is to open or close a modal… just provide
isOpen
openModal()
closeModal()
Code
const useModal = (initial: boolean): Modal => {
const [isModalOpen, setValue] = useState(initial);
const open = () => setValue(true);
const close = () => setValue(false);
return [isModalOpen, open, close];
};
export default function Home() {
const [isFirstModalOpen, openFirstModal, closeFirstModal]
= useModal();
}
Conclusion
This is a little example but this hook can now be used for all the modals:
= useModal();
The book (only for italian speakers)
This and others snippets will be included in next edition of React, TypeScript e Next.js. Please follow me as author to receive notifications of new books (React 19 is coming)!!
![[DAY 33-35] I Built A Statistics Calculator, A Spreadsheet, and Solved Leetcode Challenges](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7ibyrw8mfmxdo31yt59.PNG)
