Tengo una página de registro que informará al índice cuando la operación se haya realizado correctamente. La comunicación, a partir de este momento, se realiza a través de parámetros de consulta.
const Foo: React.FC = () => { const router = useRouter(); const [useModal, setUseModal] = useState(false); const closeModal = () => { setUseModal(false); }; const generateModalContent = (queryContent: ParsedUrlQuery) => { if (Object.keys(queryContent).length !== 0) { return { //key-values from query }; } }; const modalContent = generateModalContent(router.query); if (Object.keys(modalContent!).length !== 0 && useModal === false) { setUseModal(true); } return ( <> //unrelated stuff {useModal ? <ModalNotification {...modalContent} /> : null} </> ); }; El problema es que cada vez que se llama a closeModal para cerrar el modal, se muestra nuevamente ya que, al volver a procesar, la consulta aún está allí y el ciclo se repetirá. Estoy buscando una forma limpia de mostrar los datos enviados por consulta una vez, y cuando el usuario cierra el modal, no vuelve a aparecer.
Para evitar llamar a esa parte de su código en cada renderizado, debe envolverlo en un useEffect con las dependencias correctas de la siguiente manera:
React.useEffect(() => { const modalContent = generateModalContent(router.query); if (Object.keys(modalContent!).length !== 0 && useModal === false) { setUseModal(true); } }, [router]); De esa manera solo se ejecutará cuando cambie el router y no en un ciclo infinito.
Puedes leer más sobre esto en los documentos de React .