Create a delayed element – DEV Group 👩‍💻👨‍💻

At the moment we’re going to study why I wanted to create such element and the way I went about doing it with setTimeout() and understanding why Reacts render methodology works in a synchronous means and the way the hooks API can be utilized to create a delayed listing impact.

So in case you try to do what’s within the code instance under in React it will not work and render methodology will await setTimeout() to finish by which period all of your parts will seem in a single go and you’ll’t add fancy animation (a listing merchandise on this case).

const todos = [
  {
    name: 'Learn how to create a delayed component',
    isComplete: false
  },
  {
    name: 'Like this post',
    isComplete: false
  },
  {
    name: 'Share this post (see what I am getting at here) 😀',
    isComplete: false
  }
];

..and our Todos element (the mistaken means):

import React from 'react';

export default TodoList = () => {
  return (
    <ul>
      {todos.map(({ identify, isComplete }, index) =>
        setTimeout(() => {
          <li key={index} className={`${isComplete ? 'isComplete' : ''}`}>
            {identify}
          </li>;
        }, index * 200)
      )}
    </ul>
  );
};

Now the <TodoList /> element might or might not do what you suppose it might. Reacts render course of is synchronous that means when setTimeout() known as it can wait till the timer perform has completed then render the weather so you’re going to get no delay when every listing merchandise renders.

Let’s attempt that once more, however first, we have to create our <DelayedComponent/>

import React from 'react';

export default DelayedComponent = ({ wait, kids }) => {
  const [isShown, setIsShown] = React.useState(false);

  React.useEffect(() => {

    const timer = setTimeout(() => {
      setIsShown(true);
    }, wait);

    return () => clearTimeout(timer);
  }, [wait]);

  return isShown && kids;
};

Let’s stroll via how this works. We have to declare two props I’ve named them wait this accepts the period of time the element ought to wait till it must be rendered and the opposite is a typical prop identify which is at all times known as kids and permits you to render any little one parts nested inside <DelayedComponent/> i.e:

<DelayedComponent>
  {/* begin little one parts */}
  <h1>This is a title</h1>
  <div>This is the major content material</div>
  {/* finish little one parts */}
</DelayedComponent>

Then we declare the state for exhibiting the meant component/little one. For this, we will make use of the useState() hook. We are able to set the preliminary worth of this to false.

Now, issues get a little bit fascinating as we begin to use useEffect() hook which might be actually highly effective when applied accurately. useEffect() is basically the componentDidMount() lifecycle methodology we get on class-based parts and while you return contained in the useEffect() hook that can be comparable as componentWillUnmount() we once more have on class-based parts.

So what we now have carried out is assigned the variable timer to the setTimeout() perform and handed within the wait prop to the millisecond’s parameter for the timer perform.

React.useEffect(() => {
  const timer = setTimeout(() => {
    setIsShown(true);
  }, wait);

  return () => clearTimeout(timer);
}, [wait]);

If you happen to have a look at the ultimate argument of the useEffect() hook you will notice we additionally move in an array. That is the dependency array and what this does is retains monitor of something we move in so in our case it might be the wait prop. Lastly we clear up the timer perform by clearing it with clearTimeout()