Question 72820 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to check if a compnent is re-rendered or not in react? – Reactjs

I’ve been working with react for nearly 3 years, but sometimes run into difficulties in "Rendering" meaning.

Practically, to check "Rendering", I just put "console.log(‘render’)" in a component right before "return <>…</>". Is this correct check? Or Can’t I know whether it’s re-rendered or not?

Tags:

4

Answers


  1. 0

    Better to use hook useEffect and check it inside

    Login or Signup to reply.
  2. 0

    Check React Developer Tools and profiler. When turned on, the re rendered components will flash on your screen.

    Login or Signup to reply.
  3. 0

    Yes you are right, whenever you see "render" in your logs it means the component is rendering.
    What I used to do was declaring a variable outside of the component and and initialize it to 0 then increment it from inside the component so I can know how many times it has rendered

    let count = 0;
const Component = () => {
count++;
console.log("component render number: ",count);
//...
}
    Login or Signup to reply.
  4. 0

    I’m not able to comment yet, but to build on what the answer about the react developer tools:

    • Open the "Profiler"
    • Click the settings icon (top right – "view settings")
    • In the "General" tab, check "Highlight updates when components render."

    Best of luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search