Problem
It is quite common to see switches and checkboxes in web apps.
Implement useToggle() to make things easier
function App() {
const [on, toggle] = useToggle()
...
}
React implementation · 07
UseToggle()
StatusNot taken
Solution
Review after your attempt1This is a fairly simple question. We just need to wrap useState().
2
3import {useState} from 'react'
4export function useToggle(on: boolean): [boolean, () => void] {
5 const [state, setState] = useState(on)
6 const toggle = () => {
7 setState(state => !state)
8 }
9 return [state, toggle]
10}
11
12Usually we want to stablize the callbacks.
13
14import {useState, useCallback} from 'react'
15export function useToggle(on: boolean): [boolean, () => void] {
16 const [state, setState] = useState(on)
17 const toggle = useCallback(() => {
18 setState(state => !state)
19 }, [])
20 return [state, toggle]
21}