El siguiente código es un gancho personalizado llamado useToggle de un sitio web, se define como un gancho personalizado que puede ser útil al mostrar/ocultar un modal, pero no entiendo por qué pasar por ese código para una característica tan simple. ¿No es mejor usar useState()
useToggle gancho personalizado
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 component, // This function change the boolean value to it's opposite value const toggle = useCallback(() => setState(state => !state), []); return [state, toggle] }Simplemente usando useState() normal
const [shouldDisplayModal, setShouldDisplayModal] = useState(false); <> {shouldDisplayModal && ( <Modal> <ModalContent modalText={messageContent} primaryButtonText={buttonText} secondaryButtonText={NO_MESSAGE} modalIconState={modalIconState} handleClick={toggleSaveModal} /> </Modal> )} <Button handleClick={toggleSaveModal} mainButton={false}> Save </Button> <Button handleClick={togglePublishModal} mainButton={true}> Publish </Button> </>El objetivo principal de presentar su propio enlace o personalizado es abordar un escenario en el que ninguno de los enlaces integrados le sirva adecuadamente. O en algunos casos para lograr la reutilización del código.
En el ejemplo que compartió, la razón principal podría ser tener un código reutilizable para alternar el estado de todos los modales. Imagine que hay múltiples modales en la aplicación, al usar un gancho personalizado no será necesario que escriba funciones de obtención y configuración una y otra vez.
El ejemplo que compartiste es más simple, puedes imaginar tener un enlace que realiza muchas más funciones que eso, como un enlace para llamadas API, etc.
Entonces, todo se reduce a su caso de uso.