-
-
Save nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c to your computer and use it in GitHub Desktop.
import { useCallback, useState } from 'react'; | |
// Usage | |
function App() { | |
// Call the hook which returns, current value and the toggler function | |
const [isTextChanged, setIsTextChanged] = useToggle(); | |
return ( | |
<button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button> | |
); | |
} | |
// Hook | |
// Parameter is the boolean, with default "false" value | |
const useToggle = (initialState = false) => { | |
// Initialize the state | |
const [state, setState] = useState(initialState); | |
// Define and memorize toggler function in case we pass down the comopnent, | |
// This function change the boolean value to it's opposite value | |
const toggle = useCallback(() => setState(state => !state), []); | |
return [state, toggle] | |
} |
import { useCallback, useState } from 'react'; | |
// Usage | |
function App() { | |
// Call the hook which returns, current value and the toggler function | |
const [isTextChanged, setIsTextChanged] = useToggle(); | |
return ( | |
<button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button> | |
); | |
} | |
// Hook | |
// Parameter is the boolean, with default "false" value | |
const useToggle = (initialState: boolean = false): [boolean, any] => { | |
// Initialize the state | |
const [state, setState] = useState<boolean>(initialState); | |
// Define and memorize toggler function in case we pass down the comopnent, | |
// This function change the boolean value to it's opposite value | |
const toggle = useCallback((): void => setState(state => !state), []); | |
return [state, toggle] | |
} |
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L21
Another small typo, "change" should be "changes"
Typos in comment
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L20
component
why not just use useReducer
const useToggle = (initialState = false)=> {
return useReducer(state => !state, initialState);
}
Fix the typo from
// Define and memorize toggler function in case we pass down the comopnent,
to
// Define and memorize toggler function in case we pass down the component,
And on the line after that:
// This function change the boolean value to it's opposite value
to
// This function changes the boolean value to its opposite value
While setState(state => !state)
is valid. It violated the rule "no-shadow" of Eslint : https://eslint.org/docs/rules/no-shadow
The variable name state
should be changed.
The typo, comopnent component, seems to be fixed in the .jsx, but not the .ts
// Define and memorize toggler function in case we pass down the comopnent
setIsTextChanged
is imo a bad name for toggler function. toggleIsTextChanged
would be better.
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L16
It's not necessary to put type there. You already have predefined value.