Delayed rendering of React components

Question

I have a React component with a number of child components in it  I want to render the child components not at once but after some delay  uniform or different for each of the children      I was wondering - is there a way how to do this

User · Answer

My use case might be a bit different but thought it might be useful to post a solution I came up with as it takes a different approach.

Essentially I have a third party Popover component that takes an anchor DOM element as a prop. The problem is that I cannot guarantee that the anchor element will be there immediately because the anchor element becomes visible at the same time as the Popover I want to anchor to it (during the same redux dispatch).

One possible fix was to place the Popover element deeper into the component tree than the element it was to be anchored too. However, that didn't fit nicely with the logical structure of my components.

Ultimately I decided to delay the (re)render of the Popover component a little bit to ensure that the anchor DOM element can be found. It uses the function as a child pattern to only render the children after a fixed delay:

import { Component } from 'react'
import PropTypes from 'prop-types'

export default class DelayedRender extends Component {
    componentDidMount() {
        this.t1 = setTimeout(() => this.forceUpdate(), 1500)
    }

    componentWillReceiveProps() {
        this.t2 = setTimeout(() => this.forceUpdate(), 1500)
    }

    shouldComponentUpdate() {
        return false
    }

    componentWillUnmount() {
        clearTimeout(this.t1)
        clearTimeout(this.t2)
    }

    render() {
        return this.props.children()
    }
}

DelayedRender.propTypes = {
    children: PropTypes.func.isRequired
}

It can be used like this:

<DelayedRender>
    {() =>
        <Popover anchorEl={getAnchorElement()}>
            <div>Hello!</div>
        </Popover>
    )}}
</DelayedRender>

Feels pretty hacky to me but works for my use case nevertheless.

User · Answer

render the child components not at once but after some delay    The question says delay render but if it is ok to render but hide      You can render the components from a map straight away but use css animation to delay them being shown    keyframes Jumpin    0    opacity  0     50    opacity  0     100    opacity  1         Sass loop code  for  i from 2 through 10     div  div nth-child    i       animation  Jumpin    i   0 35 s cubic-bezier  9  03  69  22          The child divs now follow each other with a slight delay

User · Answer

Using the useEffect hook  we can easily implement delay feature while typing in input field   import React    useState  useEffect   from  react   function Search       const  searchTerm  setSearchTerm    useState           Without delay      useEffect      gt           console log searchTerm           searchTerm         With delay   useEffect      gt        const delayDebounceFn   setTimeout      gt          console log searchTerm           Send Axios request here        3000          Cleanup fn     return      gt  clearTimeout delayDebounceFn        searchTerm      return        lt input       autoFocus       type  text        autoComplete  off        className  live-search-field        placeholder  Search here           onChange   e    gt  setSearchTerm e target value         gt         export default Search

User · Answer

We can solve this using Hooks   First we ll need a timeout hook for the delay   This one is inspired by Dan Abramov s useInterval hook  see Dan s blog post for an in depth explanation   the differences being    we use we setTimeout not setInterval we return a reset function allowing us to restart the timer at any time    x000D   x000D  import   useEffect  useRef  useCallback   from  react   x000D   x000D  const useTimeout    callback  delay    gt    x000D       save id in a ref x000D    const timeoutId   useRef      x000D   x000D       save callback as a ref so we can update the timeout callback without resetting the clock x000D    const savedCallback   useRef    x000D    useEffect  x000D           gt    x000D        savedCallback current   callback  x000D         x000D       callback   x000D       x000D   x000D       clear the timeout and start a new one  updating the timeoutId ref x000D    const reset   useCallback  x000D           gt    x000D        clearTimeout timeoutId current   x000D   x000D        const id   setTimeout savedCallback current  delay   x000D        timeoutId current   id  x000D         x000D       delay   x000D       x000D   x000D    useEffect  x000D           gt    x000D        if  delay     null    x000D          reset    x000D   x000D          return      gt  clearTimeout timeoutId current   x000D          x000D         x000D       delay  reset   x000D       x000D   x000D    return   reset    x000D     x000D   x000D   x000D    and now we need a hook which will capture previous children and use our useTimeout hook to swap in the new children after a delay   x000D   x000D  import   useState  useEffect   from  react   x000D   x000D  const useDelayNextChildren    children  delay    gt    x000D    const  finalChildren  setFinalChildren    useState children   x000D   x000D    const   reset     useTimeout      gt    x000D      setFinalChildren children   x000D       delay   x000D   x000D    useEffect  x000D           gt    x000D        reset    x000D         x000D       reset  children   x000D       x000D   x000D    return finalChildren    children    null  x000D     x000D   x000D   x000D    Note that the useTimeout callback will always have the latest children  so even if we attempt to render multiple different new children within the delay time  we ll always get the latest children once the timeout finally completes   Now in your case  we want to also delay the initial render  so we make this change    x000D   x000D  const useDelayNextChildren    children  delay    gt    x000D    const  finalChildren  setFinalChildren    useState null      initial state set to null x000D   x000D           stays the same x000D   x000D    return finalChildren    null      remove children from return x000D     x000D   x000D   x000D    and using the above hook  your entire child component becomes    x000D   x000D  import React    memo   from  react   x000D  import   useDelayNextChildren   from  hooks   x000D   x000D  const Child      delay      gt  useDelayNextChildren  x000D     lt div gt  x000D          Child JSX goes here x000D          etc x000D     lt  div gt  x000D      delay x000D     x000D   x000D  export default memo Child   x000D   x000D   x000D    or if you prefer    dont say i havent given you enough code        x000D   x000D  const Child      delay      gt    x000D    const render    lt div gt     Child JSX goes here     etc lt  div gt   x000D   x000D    return useDelayNextChildren render  delay   x000D     x000D   x000D   x000D    which will work exactly the same in the Parent render function as in the accepted answer       except the delay will be the same on every subsequent render too    AND we used hooks  so that stateful logic is reusable across any component            use hooks   D

User · Answer

I think the most intuitive way to do this is by giving the children a  wait  prop  which hides the component for the duration that was passed down from the parent   By setting the default state to hidden  React will still render the component immediately  but it won t be visible until the state has changed   Then  you can set up componentWillMount to call a function to show it after the duration that was passed via props   var Child   React createClass       getInitialState   function              return  hidden    hidden                componentWillMount   function              var that   this          setTimeout function                 that show               that props wait              show   function              this setState  hidden                    render   function              return                lt div className  this state hidden  gt                   lt p gt Child lt  p gt               lt  div gt                        Then  in the Parent component  all you would need to do is pass the duration you want a Child to wait before displaying it   var Parent   React createClass       render   function              return                lt div className  parent  gt                   lt p gt Parent lt  p gt                   lt div className  child-list  gt                       lt Child wait  1000    gt                       lt Child wait  3000    gt                       lt Child wait  5000    gt                   lt  div gt               lt  div gt                        Here s a demo

User · Answer

I have created Delayed component using Hooks and TypeScript import React    useState  useEffect   from  react    type Props       children  React ReactNode    waitBeforeShow   number      const Delayed      children  waitBeforeShow   500    Props    gt      const  isShown  setIsShown    useState false      useEffect      gt        setTimeout      gt          setIsShown true          waitBeforeShow         waitBeforeShow       return isShown   children   null      export default Delayed   Just wrap another component into Delayed export function LoadingScreen        gt      return        lt Delayed gt         lt div   gt       lt  Delayed gt

User · Answer

Another approach for a delayed component   Delayed jsx   import React from  react   import PropTypes from  prop-types    class Delayed extends React Component        constructor props            super props           this state    hidden   true              componentDidMount             setTimeout      gt                this setState  hidden  false               this props waitBeforeShow              render             return this state hidden        this props children           Delayed propTypes       waitBeforeShow  PropTypes number isRequired     export default Delayed    Usage    import Delayed from     Time Delayed    import React from  react     const myComp   props   gt          lt Delayed waitBeforeShow  500  gt            lt div gt Some child lt  div gt        lt  Delayed gt

User · Answer

Depends on your use case   If you want to do some animation of children blending in  use the react animation add-on  https   facebook github io react docs animation html Otherwise  make the rendering of the children dependent on props and add the props after some delay   I wouldn t delay in the component  because it will probably haunt you during testing  And ideally  components should be pure

User · Answer

In your father component  lt Father   gt   you could create an initial state where you track each child  using and id for instance   assigning a boolean value  which means render or not   getInitialState         let state           React Children forEach this props children   child  index    gt            state index    false              return state      Then  when the component is mounted  you start your timers to change the state   componentDidMount         this timeouts   React Children forEach this props children   child  index    gt             return setTimeout      gt                  this setState   index  true                   child props delay               When you render your children  you do it by recreating them  assigning as a prop the state for the matching child that says if the component must be rendered or not   let children   React Children map this props children   child  index    gt        return React cloneElement child   doRender  this state index           So in your  lt Child   gt  component  render         if   this props render  return null         Render method here     When the timeout is fired  the state is changed and the father component is rerendered  The children props are updated  and if doRender is true  they will render themselves

[javascript] Delayed rendering of React components

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components