• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Computing / ReactJS Component Limited Time Render HOC

ReactJS Component Limited Time Render HOC

Last updated on October 8, 2021 by Sal Ferrarello

I wanted to render a ReactJS component for a limited amount of time every time (think of a notification that pops up and then goes away). Ideally, we would like to be able to apply this limited time rendering to any component, so this was an excellent candidate for a Higher Order Component (HOC).

ReactJS HOC for Limited Time Rendering

The wrapped component will render for the given number of seconds, whenever the props are updated.

import { useState, useEffect, useRef } from 'react';

/**
 * Limit rendering of component to a given number of seconds (HOC).
 *
 * @param {Component} wrapped component to render.
 * @param {number} Number of seconds to display before hiding.
 * @return {Component} wrapped component with limited render time.
 */
const WithLimitedTimeRender = (
  WrappedComponent,
  delayUntilHideInSeconds,
) => function Comp(props) {
  const [isVisible, setIsVisible] = useState(true);
  const timeoutRef = useRef(null);
  useEffect(() => {
    // One of our props has changed, render WrappedComponent.
    setIsVisible(true);
    // Set a timeout for when to stop rendering the WrappedComponent.
    timeoutRef.current = setTimeout(
      () => {
        setIsVisible(false);
      },
      delayUntilHideInSeconds * 1000
    );
    // Cleanup: before re-executing the useEffect (or on component unmount),
    // clear the timeout.
    return () => clearTimeout(timeoutRef.current);
  }, [props]);

  if (! isVisible) {
    return null;
  }
  return <WrappedComponent {...props} />;
};

export default WithLimitedTimeRender;

How it is Used

The <Notification> component is wrapped in the HOC WithLimitedTimeRender() to create <NotificationWithLimitedTimeRender>, which can be used in the same way as the <Notification> component (except it will stop rendering after 2 seconds).

import Notification from './components/Notification.js';
import WithLimitedTimeRender from './hocs/WithLimitedTimeRender';

const NotificationWithLimitedTimeRender = WithLimitedTimeRender(
  Notification,
  2, // seconds
);

return (
  <NotificationWithLimitedTimeRender
    message={myValue}
  />
);

Example

I put together an example using Create React App which is available on GitHub (salcode/react-hoc-limited-display-time).

ReactJS component rendering for a couple of seconds when the props are updated.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Computing, Dev Tips, Draft, Programming, Solution Tagged With: React

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in