Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

124
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!