Callback when DOM is loaded in react js

Question

I want to have a callback invoked on my react js component when it s DOM element  including all child nodes  is actually loaded on the page and ready  Specifically  I have two components that I want to render the same size  choosing the maximum of whichever component has the larger natural size   It looks like componentDidMount is not really what I want because it is only called once per component  but I want my callback to be called again anytime the component is finished rendering  I thought I could add an onLoad event to the top level DOM element  but I guess that only applies for certain elements  like  lt body gt  and  lt img gt

User · Answer

A combination of componentDidMount and componentDidUpdate will get the job done in a code with class components  But if you re writing code in total functional components the Effect Hook would do a great job it s the same as componentDidMount and componentDidUpdate   import React    useState  useEffect   from  react    function Example       const  count  setCount    useState 0         Similar to componentDidMount and componentDidUpdate    useEffect      gt           Update the document title using the browser API     document title    You clicked   count  times            return        lt div gt         lt p gt You clicked  count  times lt  p gt         lt button onClick       gt  setCount count   1   gt          Click me        lt  button gt       lt  div gt              https   reactjs org docs hooks-effect html

User · Answer

Add onload listener in componentDidMount   class Comp1 extends React Component    constructor props        super props       this handleLoad   this handleLoad bind this        componentDidMount         window addEventListener  load   this handleLoad        componentWillUnmount         window removeEventListener  load   this handleLoad         handleLoad          myclass         is available here

User · Answer

I applied componentDidUpdate to table to have all columns same height  it works same as on   window  load   in jquery   eg   componentDidUpdate  function                 tbl-tr   height     tbl-tr    height

User · Answer

The below is what I came up with to wait for when the DOM is ready before trying to get a class using document getElementsByClassName  I called this function from the componentDidMount   lifecycle method         changeIcon                 if                   document getElementsByClassName  YOURCLASSNAME                        length  gt  0  amp  amp                  document getElementsByClassName  YOURCLASSNAME   length  gt  0                                 document getElementsByClassName                       YOURCLASSNAME                    0  className    YOUR-NEW-CLASSNAME                   document getElementsByClassName                       YOUR-OTHER-EXISTING-CLASSNAME                    0  style display    block                 else                   setTimeout this changeIcon  500

User · Answer

Looks like a combination of componentDidMount and componentDidUpdate will get the job done  The first is called after the initial rendering  when the DOM is available  the second is called after any subsequent renderings  once the updated DOM is available  In my case  I both have them delegate to a common function to do the same thing

User · Answer

What I have found is that simply wrapping code in the componentDidMount or componentDidUpdate with a setTimeout with a time of 0 milliseconds ensures that the browser DOM has been updated with the React changes before executing the setTimeout function   Like this   componentDidMount         setTimeout      gt               myclass         is available here        0      This puts the anonymous function on the JS Event Queue to run immediately after the currently running React stack frame has completed

User · Answer

In modern browsers  it should be like   try          if       element   size             window requestAnimationFrame try          else             do your stuff            componentDidMount         this try

User · Answer

You can watch your container element using the useRef hook  Note that you need to watch the ref s current value specifically  otherwise it won t work  Example    const containerRef   useRef      const   current     containerRef     useEffect setLinksData   current     return        lt div ref  containerRef  gt           your child elements         lt  div gt

[reactjs] Callback when DOM is loaded in react.js

Examples related to reactjs