Category: React Answers

Sometimes, we want to delay rendering of React components.

In this article, we’ll look at how to delay rendering of React components.

How to delay rendering of React components?

To delay rendering of React components, we use the setTimeout function.

For instance, we write

import React, { useState, useEffect } from "react";

const Delayed = ({ children, waitBeforeShow = 500 }) => {
  const [isShown, setIsShown] = useState(false);

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

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

  return isShown ? children : null;
};

export default Delayed;

to create the Delayed component.

It renders the children when isShown is true.

isShown is set to true in the setTimeout callback with setIsShown(true); after waitBeforeShow milliseconds, which is in the useEffect callback.

When waitBeforeShow is changed, the useEffect callback is called.

clearTimeout is called right before waitBeforeShow is changed.

Then we use it by writing

export const LoadingScreen = () => {
  return (
    <Delayed>
      <div />
    </Delayed>
  );
};

Conclusion

To delay rendering of React components, we use the setTimeout function.

Sometimes, we want to sort an array of objects in React and render them.

In this article, we’ll look at how to sort an array of objects in React and render them.

How to sort an array of objects in React and render them?

To sort an array of objects in React and render them, we call sort before we call map.

For instance, we write

const sorted = [...data]
  .sort((a, b) => a.timeM - b.timeM)
  .map((item, i) => (
    <div key={i}>
      {item.matchID}
      {item.timeM} {item.description}
    </div>
  ));

to call sort with a callback that sorts by the timeM value of each object in data in ascending order.

Then we call map with a callback that returns the rendered items.

Conclusion

To sort an array of objects in React and render them, we call sort before we call map.

To create a countdown timer in React, we use the react-countdown package.

To install it, we run

npm i react-countdown

Then we write

import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown";

const Completionist = () => <span>You are good to go!</span>;

ReactDOM.render(
  <Countdown date={new Date("2022-09-26T10:05:29.896Z").getTime()}>
    <Completionist />
  </Countdown>,
  document.getElementById("root")
);

to add the Countdown component to start the count down from the date prop value.

We render Completionist if the count down timer is finished.

Sometimes, we want to create custom functions in a React component.

In this article, we’ll look at how to create custom functions in a React component.

How to create custom functions in a React component?

To create custom functions in a React component, we just add them into the component class.

For instance, we write

export default class Archive extends React.Component {
  saySomething(something) {
    console.log(something);
  }

  handleClick(e) {
    this.saySomething("element clicked");
  }

  componentDidMount() {
    this.saySomething("component did mount");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)} value="Click me" />;
  }
}

to add the saySomething and handleClick methods into the Archive component.

Conclusion

To create custom functions in a React component, we just add them into the component class.

Sometimes, we want to determine if the application is being viewed on mobile or desktop browser with React.

In this article, we’ll look at how to determine if the application is being viewed on mobile or desktop browser with React.

How to determine if the application is being viewed on mobile or desktop browser with React?

To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.

To install it, we run

npm install react-device-detect --save

Then we use it by writing

import { isMobile } from "react-device-detect";

const MyComponent = () => {
  if (isMobile) {
    return <div> This content is available only on mobile</div>;
  }
  return <div> content... </div>;
};

to check is isMobile is true in MyComponent .

If it’s true, then the component is loaded on a mobile device.

Conclusion

To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.