0

me sale este problema: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Seguramente es sencillo pero entiendo mucho React como para darle una solución por mi mismo.

La idea básica es obtener la fecha actual a partir de un customHook y empezar a trabajar desde ahí con ella, pero me enfrento a este problema con los useState.

Este es mi componente principal:

import React from 'react'
import useTime from '../hooks/useTime';

const Calendar = () => {

    const today = new Date();
    const { getDateToday } = useTime(today);
       
    // getDateToday(today);

    return (
        <div>
            <div><h1>Calendar</h1></div>
            <hr />
            { today.getMonth() }
        </div>
    )
}

export default Calendar;

y luego tengo el hook:

import { useState } from 'react';

const CalendarHook = (date) => {

    const [today, setToday] = useState(date); 

    const getDateToday = (date) => {
        console.log(today);
        setToday(date);
        console.log(today);
        console.log(date);
    }

    return {
        today,
        getDateToday
    }

}

export default CalendarHook;

Cuando quiero ejecutar la función getDateToday (que está comentada) en el componente principal, me sale el error y no se qué hacer.

Este es el error:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

6
  • Qué tipo de error te sale? Por lo poco que veo puede ser un error en la importación de getDateToday o por que no usas destructuring cuando importas de '../hooks/useTime' ? Quedaría algo como import {CalendarHook } from (...)
    – lsanchezo
    el 10 jun. 2022 a las 23:55
  • Lo edité con el error que me sale. el 11 jun. 2022 a las 0:23
  • El error es que entra en un bucle infinito y es una protección contra eso. Al hacer setToday haces que se vuelva a renderizar el componente Calendar, que vuelve a llamar al getDateToday y este vuelve a hacer setToday y así seguido
    – Suso
    el 11 jun. 2022 a las 0:26
  • Exacto, si. Pero cómo evito que se genere el bucle? el 11 jun. 2022 a las 0:56
  • El problema está con el new Date(), si uso useEffect con la función getDateToday(today), y no le paso el array, ni siquiera vacío, me crea un new Date() cada microsegundo. el 11 jun. 2022 a las 1:16

1 respuesta 1

0

Poner codigo dentro de un useEffect sacando el arreglo de dependencias indica que se ejecutara el codigo de adentro cada vez que haya un re-render (por eso si lo haces asi te sale un new Date cada microsegundo como tu dices). Eso no es lo mismo que ponerle un arreglo vacio (que indica que se ejecute solo la primera vez que se monta el componente).

Si quieres que se ejecute solo una vez tu funcion en el momento en que se monta el componente, seria de la siguiente forma:

  useEffect(() => {
    getDateToday(today);
  }, [])

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.