Creating Dynamic Scorecard with Live Updates in Next.js

Next.js is a widely used JavaScript framework for building server-rendered React applications. It offers a great set of features that allow developers to easily create highly performant and scalable web applications. In this article, we will be exploring how to build a dynamic score card with a loading effect and live updates every 5 seconds in a Next.js application.

Step 1: Create the Score Card Component

The first step is to create a ScoreCard component that renders the score card. This component should have a state variable loading that is set to true when the component first mounts and is set to false once the data is loaded. We can use the useState hook from React to create this state variable.

import { useState, useEffect } from 'react';
 
function ScoreCard({ score }) {
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    setLoading(false);
  }, [score]);
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Score: {score}</h1>
    </div>
  );
}

In this example, we are using the useEffect hook to set the loading state variable to false once the score data is loaded. This will trigger a re-render of the component and display the score.

Step 2: Create the Interval Hook

The next step is to create a useInterval hook that can be used to update the score every 5 seconds. This hook will use the setInterval JavaScript function to call a callback function every 5 seconds.

import { useState, useEffect } from 'react';
 
function useInterval(callback, delay) {
  const [intervalId, setIntervalId] = useState(null);
 
  useEffect(() => {
    function tick() {
      callback();
    }
 
    if (delay !== null) {
      const id = setInterval(tick, delay);
      setIntervalId(id);
    }
 
    return () => {
      clearInterval(intervalId);
    };
  }, [callback, delay]);
}

Step 3: Use the Score Card and Interval Hook in the Main Page

In the main index page of our Next.js application, we can use the useInterval hook and the ScoreCard component to create the score card widget with live updates.

import { useState } from 'react';
import ScoreCard from './ScoreCard';
import useInterval from './useInterval';
 
export default function Home() {
  const [score, setScore] = useState(0);
 
  useInterval(() => {
    setScore(prevScore => prevScore + 1);
  }, 5000);
 
  return (
    <div>
      <ScoreCard score={score} />
    </div>
  );
}

In this example, we are using the useState hook to create a state variable for the score and the useInterval hook to update the score every 5 seconds. We pass the setScore function as a callback to the useInterval hook, which will increment the score by 1 every 5 seconds.

Read more: Lazy Loading Components on Scroll in React Next.js: Improve Performance

Step 4: Adding a Loading Spinner

To make the score card widget more visually appealing, we can add a loading spinner to the ScoreCard component while the score is being loaded. We can use a popular library such as “react-spinners” to accomplish this.

import { useState, useEffect } from 'react';
import { CircleLoader } from 'react-spinners';
 
function ScoreCard({ score }) {
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    setLoading(false);
  }, [score]);
 
  if (loading) {
    return (
      <div className="loading-spinner">
        <CircleLoader size={30} color={'#123abc'} loading={loading} />
      </div>
    );
  }
 
  return (
    <div>
      <h1>Score: {score}</h1>
    </div>
  );
}

You can then style the loading-spinner class in your CSS to center the loading spinner on the page.

Step 5: Error Handling

It’s always a good practice to add some error handling in case the data loading fails. We can add a state variable error and call the setError method in case of an error while loading the data.

import { useState, useEffect } from 'react';
 
function ScoreCard({ score }) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
 
  useEffect(() => {
    setLoading(false);
  }, [score]);
 
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error Occured while loading data</div>;
  }
 
  return (
    <div>
      <h1>Score: {score}</h1>
    </div>
  );
}

Conclusion:

In this blog post, we have discussed how to create a score card widget with a loading effect and live updates every 5 seconds in a Next.js application. We have used the useState and useEffect hooks from React to create the score card component and the interval hook. We have also added a loading spinner and error handling to make the score card widget more visually appealing and robust. This is a basic example to give an idea about how you can create a score card widget with loading effect & live update after every 5 sec in Next.js. You can further customize and optimize the code as per your requirements.