He creado un React Hook personalizado que tiene una función que enviará una acción a la tienda redux.
import { useDispatch, useSelector } from "react-redux"; import { toggle } from "../state/reducers/togglePassSlice"; const useToggle = () => { const { showpass } = useSelector((state) => state.toggle); const dispatch = useDispatch(); const togglePassVisibility = () => { // console.log(showpass); dispatch(toggle(showpass)); }; return { togglePassVisibility }; }; export default useToggle;en mi componente cuando trato de llamarlo, aparece un error: Error: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
import EntryCard from "../../components/EntryCard/EntryCard"; import InputGroup from "../../components/InputGroup/InputGroup"; import Input from "../../components/Input/Input"; import Button from "../../components/Button"; import { EntryPage, PageHader } from "./style"; import { Link } from "react-router-dom"; import useToggle from "../../hooks/useToggle"; const SignInPage = () => { const { togglePassVisibility } = useToggle(); const toggle = togglePassVisibility(); return ( <EntryPage> <PageHader to="/">AWESOME LOGO</PageHader> <EntryCard> <h2>login</h2> <form> <InputGroup> <label htmlFor="email">Email</label> <Input type="email" placeholder="Enter email" id="email" /> </InputGroup> <InputGroup> <label htmlFor="password">Password</label> <Input type="password" placeholder="Enter password" id="password" /> </InputGroup> <Button type="submit" full="true"> Sign in </Button> </form> <span> Dont have an account? <Link to="/signup"> Sign up</Link> </span> </EntryCard> </EntryPage> ); }; export default SignInPage;¿Cómo resuelvo este error y por favor? ¿Cuál es una mejor manera para este enfoque con ganchos personalizados?
Mirando estas líneas en particular:
const SignInPage = () => { const { togglePassVisibility } = useToggle(); const toggle = togglePassVisibility(); // this calls dispatch every render! return ( /* ... render ... */ ); } Cada vez que se procesa su componente, inmediatamente llama a togglePassVisibility() , lo que provocará un nuevo procesamiento. Este es un bucle infinito.
Si, en cambio, desea poder llamar a togglePassVisibility como si se llamara toggle , puede realizar una de las siguientes acciones:
toggle : const toggle = togglePassVisibility; // <-- no parentheses const { togglePassVisibility: toggle } = useToggle(); // in hooks file const useToggle = () => { /* ... */ return [ togglePassVisibility ]; }; // in component const [ toggle ] = useToggle();Nota: No olvide vincular el botón de alternar a un botón.