Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
Component Getting Rendered Infinite times in Nextjs

I am trying to render the TEXT CLOUD in my Nextjs app, but it is getting rendered infinite time.I am using Next JS. Please help Here is the code and screenshots:

import dynamic from "next/dynamic";
import { useRef} from "react";

const container = '.tagcloud';
const texts = [
    '3D', 'TagCloud', 'JavaScript',
    'CSS3', 'Animation', 'Interactive',
    'Mouse', 'Rolling', 'Sphere',
    '6KB', 'v2.x',
];
 const tag = {
    radius: 100,
    maxSpeed: 'normal',
    initSpeed: 'fast',
    direction: 135,
    keep: true
}
const Text_cloud=dynamic(
  () => {
      const refTag=useRef();
      return <span ref={refTag}>{TagCloud(container,texts,tag)}</span>;
    },
    { ssr: false }
  );

export default Text_cloud;

I am exporting this Component and using it in another page skills:

import React, { useState,useRef } from "react";
import Web from "../Component/web";
import Programming from "../Component/programming";
import Editing from "../Component/Editing";
import styles from "../styles/skill.module.css"
import Btn from "../Component/btn";
import Text_cloud from "../Component/text_cloud";

function Skill() { 

    const [skill, setskill] = useState("Web")
    return (<>
        <div className={styles.main}>
            <ul className={styles.ruler}>
                <a onClick={() => setskill("Web")} className={styles.skilla}><Btn name="Web Dev" /></a>
                <a onClick={() => setskill("Programming")} className={styles.skilla}><Btn name="Programming" /></a>
                <a onClick={() => setskill("Editing")} className={styles.skilla}><Btn name="Editing" /></a>
            </ul>

            <div className={styles.cld} >
                <div className="tagcloud" >
                    <Text_cloud />
                </div>

            </div>
        </div>
        {skill === "Web" && <Web />}
        {skill === "Programming" && <Programming />}
        {skill === "Editing" && <Editing />}
    </>)
}

export default Skill;

After running the server I get this output and error: It get render two times

And the error it shows is: Here is the error Screenshot

Please help me out here

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda