DEV Community: Andrey Smirnov

How to Use Throttle and Debounce in React to Increase Performance

Andrey Smirnov — Mon, 30 May 2022 08:44:53 +0000

Overview

Throttle and Debounce solve optimization problems.

Throttle - skips function calls with a certain frequency.
Debounce - delays a function call until a certain amount of time has passed since the last call.

Throttle & Debounce scheme:

Examples of using Throttle:

1) If the user resizes the browser window and we need to change the content of the site.
Without optimization, the following happens. On each window resize event, the window resize event handler is called. So if the user, for example, resizes the window within 10 seconds, then 100, 200, and so on events that we need to process can happen.
Throttle allows us to set a time interval, more often than which the event handler will not be called. If we specify an interval of 1 second using Throttle, then the number of execution of window resize event handlers will be 10.

2) Showing the user the percentage of page scrolling. When the user scrolls the page, scroll events occur, which we need to handle. With throttle we can reduce the number of handled scroll events by setting a time interval.

Examples of using Throttle:

1) Processing the user's search query data.
When a user enters a search query, they are offered search options. It happens in the following way.
When changing the text entered by the user, a request will be sent to the server in which we transfer the characters already printed. Then we get a response from the server with possible search query options and show them to the user.
Each time the user changes the text, an event handler is called, in which a request is send to the server.
To optimize the number of requests sent to the server, we use Debounce.
When the text is changed by the user, using Debounce allows us to create a timer, for example for 1 second. If 1 second passes and the user has not changed the text a second time, then the event handler is called and the request will be sent to the server. If the user changes the text for the second time in 1 second, then the 1st timer is reset and a new timer is created again for 1 second.
Thus, if the user edits the search text quickly (less than 1 second), then the request will be sent to the server only once, after the user stops typing.
2) Sending analytics data to the server. For example, the user moves the mouse around the site, we write the mouse coordinates to an array, after which Debounce allows us to send information about the movement of the client's mouse to the server only after the client stops moving the mouse.

So, in this article, I'll show you how to use Throttle and Debounce in a React applications.

Step 1 - Application Template

Create an app template by using create-react-app and run it:

npx create-react-app throttle-debounce
cd throttle-debounce
npm start

We replace the contents of the App.css file with our styles:

body {
  display: flex;
  justify-content: center;
  width: 100%;
}
h1 {
  text-align: center;
  margin: 0.5rem 0;
}
.l-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 380px;
  height: 200px;
  margin-top: 0.5rem;
}
.scroll-content {
  width: 100%;
  background-color: bisque;
  padding: 0 1rem;
}
.l-scroll::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  background-color: darkturquoise;
}
.l-scroll::-webkit-scrollbar-thumb {
  background-color: blueviolet;
}

Let's replace the contents of the App.js file with our app template:

import './App.css';
import { useMemo } from 'react';

// High height scrollable content
const TallContent = () => {
  const dataElements = useMemo(() =>
    Array.from(
      {length: 200},
      (_, i) => <div key={i}>Line: {i+1}</div>
  ), []);

  return <>{dataElements}</>;
};

const App = () => {
  return (
    <>
      <h1>Throttle & Debounce</h1>
      <div className="l-scroll">
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

The application template is ready, let's proceed to the second step - the usual scroll event handler.

Step 2 - Usual events hendler

Here we will add a usual events handler for scroll events and count the number of calls to this handler when the user scrolls the page element.

Let's add the state of the number of event handler invocations to the App component:

// At the beginning of the file
import { useState, useMemo } from 'react';
// Inside the App component
const [scrollHandleCount, setScrollHandleCount] = useState(0);

Then we add a scroll event handler, for this we add the onScroll attribute to the element under the h1 heading:

// Before
<div className="l-scroll">
    ...
</div>

// After
<div className="l-scroll" onScroll={handleScroll}>
    ...
</div>

We will also add a function for handling the handleScroll event to the App component:

const handleScroll = () => {
  handleUsualScroll();
};

Inside the handleScroll function, we placed a function in which the usual event will be handled. Let's add this function to our App component:

const handleUsualScroll = () => {
  setScrollHandleCount(prevState => ++prevState);
};

It remains only to show the status of the counter to the user, for this we add a line of code under the h1 heading:

<span>
  Usual scroll handle count: {scrollHandleCount}
</span>
<br />

Now, when scrolling an element on the page, we should see the number of calls to the handleUsualScroll() function.

The full code of the App component at the moment:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleScroll = () => {
    handleUsualScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Step 3 - Event Handler with Throttle

The Throttle event handler in our case should cause the scrollThrottleHandleCount counter to increment, while skip calls to increment the counter at certain intervals.
To implement our plans, we need a timer at the start of which the Throlle state goes into In progress. In this case, if the state is In Progerss, then the processing of user events (scrolling the page element) is skipped.
As soon as the timer fires, the Throttle state changes to Not in progress, which means our handler will process user events again. Thus, user events are skipped at a specified time interval.

We implement the above:

// Add useRef to store inProgress state
import { useState, useRef, useMemo, useEffect } from 'react';

Next, in the App component, add the state of the event handler call counter with Throttle and ref to store the inProgress state:

// Number of event handler calls with Throttle
const [
  scrollThrottleHandleCount,
  setScrollThrottleHandleCount
] = useState(0);
// Keeping the state in progress
const throttleInProgress = useRef();
// Store the timer ID for its deletion
// when component unmount
const throttleTimerId = useRef();

It is important to note here that throttleInProgress is part of the side effect associated with the timer, which means that we will store the state in the ref object, since useRef returns an object that exists throughout the entire life cycle of the component, while there is no extra rendering component when changing the current property of the object returned by useRef, as opposed to useState.
Now let's add the event handler itself with Throttle to the App component:

const handleThrottleScroll = () => {
  // If the state is inProgress - exit the function,
  // skip event processing
  if(throttleInProgress.current) return;
  // Set inProgress to true and start the timer
  throttleInProgress.current = true;
  throttleTimerId.current = setTimeout(() => {
    // Increment the throttleHandleCount
    // state by one
    setScrollThrottleHandleCount((prevState) => {
      return ++prevState;
    });
    // Set inProgress to false, which means
    // that setTimeout will work
    // again on the next run
    throttleInProgress.current = false;
  }, 500);
};

There are 2 simple steps left: add a display of the state of the counter with Throttle to the user and add handleThrottleScroll() to handleScroll():

// After heading h1
<span>
  Throttle scroll handle count: {scrollThrottleHandleCount}
</span>

// In the handleScroll() function after handleUsualScroll();
handleThrottleScroll();

As a result, we will get:

The normal event handler called the business logic of the application 181 times, and with Throttle only 9.
The complete code for the App component with Throttle:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);
  const [
    scrollThrottleHandleCount,
    setScrollThrottleHandleCount
  ] = useState(0);
  const throttleInProgress = useRef(false);
  const throttleTimerId = useRef();

  useEffect(() => {
    // Clear the timer when unmounting a component
    return () => {
      if (throttleTimerId.current) {
        clearTimeout(throttleTimerId.current);
      }
    };
  }, []);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleThrottleScroll = () => {
    if(throttleInProgress.current) return;
    throttleInProgress.current = true;
    throttleTimerId.current = setTimeout(() => {
      setScrollThrottleHandleCount(prevState => ++prevState);
      throttleInProgress.current = false;
    }, 500);
  };
  const handleScroll = () => {
    handleUsualScroll();
    handleThrottleScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <span>
        Throttle scroll handle count: {scrollThrottleHandleCount}
      </span>
      <br />
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Let's move on to the final step - implement the Debounce event handler.

Step 4 — Event Handler with Debounce

Debounce in our example delays incrementing the scrollDebounceHandleCount counter until a certain amount of time has elapsed since the last call of the event handler***.
Let's add the state of the number of calls to the event handler with Debounce, ref to store the timer ID in the App component:

const [
  scrollDebounceHandleCount,
  setScrollDebounceHandleCount
] = useState(0);
const debounceTimerIdRef = useRef();

Then we show the number of scrollDebounceHandleCount to the user and add our handleDebounceScroll() method to handleScroll():

// After h1
<span>
  Debound scroll handle count: {scrollDebounceHandleCount}
</span>
// In handleScroll() function
handleDebounceScroll();

It remains to write the handleDebounceScroll function:

const handleDebounceScroll = () => {
  // If the timer ID is set, reset the timer
  if(debounceTimerIdRef.current){
    clearTimeout(debounceTimerIdRef.current);
  }
  // We start the timer, the returned timer ID
  // is written to debounceTimerIdRef
  debounceTimerIdRef.current = setTimeout(() => {
    // Increasing the counter for the number of
    // executions of the business logic
    // of the application with Debounce
    setScrollDebounceHandleCount((prevState) => {
      return ++prevState;
    });
  }, 500);
};

As a result, the Debounce counter increments only when the user stops scrolling the page element for more than or equal to 500 milliseconds:

The full text of the App component:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);
  const [
    scrollThrottleHandleCount,
    setScrollThrottleHandleCount
  ] = useState(0);
  const [
    scrollDebounceHandleCount,
    setScrollDebounceHandleCount
  ] = useState(0);

  const throttleInProgress = useRef();
  const throttleTimerId = useRef();
  const debounceTimerIdRef = useRef();

  useEffect(() => {
    return () => {
      if (throttleTimerId.current) {
        clearTimeout(throttleTimerId.current);
      }
      if (debounceTimerIdRef.current) {
        clearTimeout(debounceTimerIdRef.current)
      }
    };
  }, []);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleThrottleScroll = () => {
    if(throttleInProgress.current){ return; }
    throttleInProgress.current = true;
    throttleTimerId.current = setTimeout(() => {
      setScrollThrottleHandleCount(prevState => ++prevState);
      throttleInProgress.current = false;
    }, 500);
  };
  const handleDebounceScroll = () => {
    if(debounceTimerIdRef.current){
      clearTimeout(debounceTimerIdRef.current);
    }
    debounceTimerIdRef.current = setTimeout(() => {
      setScrollDebounceHandleCount(prevState => ++prevState);
    }, 500);
  };
  const handleScroll = () => {
    handleUsualScroll();
    handleThrottleScroll();
    handleDebounceScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <span>
        Throttle scroll handle count: {scrollThrottleHandleCount}
      </span>
      <br />
      <span>
        Debound scroll handle count: {scrollDebounceHandleCount}
      </span>
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Subscribe to the blog, put likes, add to bookmarks.
Don't forget about unicorns.

Thanks for your attention!

How to make your own Font Awesome font

Andrey Smirnov — Mon, 23 May 2022 17:45:08 +0000

Overview

Font Awesome is a great thing, it's a font whose symbols are images. For example, we want to place such a picture on our website page:

It is enough to write a small HTML code, and the picture will be on our website:

<i class="fa-solid fa-thumbs-up"></i>

But why we can't just place a picture using the img tag?

<img src="/thumbs-up.svg" />

With this placement, we will not be able to change the color of the picture, for example, when hovering the mouse pointer over the picture, as well as apply css transitions to the color. Of course, there are solutions based on css filters https://stackoverflow.com/a/50942954 , but this complicates the readability and support of the code.
There is another method to change the color of the image - add inline svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="#0000ff" d="M128 447.1V223.1c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64C113.7 479.1 128 465.6 128 447.1zM512 224.1c0-26.5-21.48-47.98-48-47.98h-146.5c22.77-37.91 34.52-80.88 34.52-96.02C352 56.52 333.5 32 302.5 32c-63.13 0-26.36 76.15-108.2 141.6L178 186.6C166.2 196.1 160.2 210 160.1 224c-.0234 .0234 0 0 0 0L160 384c0 15.1 7.113 29.33 19.2 38.39l34.14 25.59C241 468.8 274.7 480 309.3 480H368c26.52 0 48-21.47 48-47.98c0-3.635-.4805-7.143-1.246-10.55C434 415.2 448 397.4 448 376c0-9.148-2.697-17.61-7.139-24.88C463.1 347 480 327.5 480 304.1c0-12.5-4.893-23.78-12.72-32.32C492.2 270.1 512 249.5 512 224.1z"/>
</svg>

The fill attribute is responsible for the color. But the easiest way is to change the color is the css styles:

.icon {
  color: red;
}

Additionally, svg images can be packaged into React components, and image sprites can be created, among other things. Please leave a comment if you are interested in an article covering these topics.

So, in this article we:

Create your own font, which will consist of three vector images;
Convert our font to woff and woff2 formats to optimize file size;
Develop css styles for convenient addition of font characters to the site page.

1. Creating a font

To create a font, we will need two open source programs:

FontForge - font editor;
Inkscape - vector graphics editor.

Download and install these programs, as well as download three images in svg format, from which we will make our font:

Please note that thumbs up and face with a smile have a resolution of: 512x512, and cup: 640x512. In order for the font characters to be centered, we need to bring them to a single resolution. In this example, we will choose the resolution 512x512. This means that the resolution of the cup will have to be changed, and the image will be entered and centered in the new resolution. To do this, we will need `Inkscape'.

Open our cup in Inkscape;
Go to the menu File -> Document Properties...;
In the Page tab in the Custom size section, select Units: px - size in pixels. And there we set the resolution Width and Height to 512. As a result, we will get a saucer and a cup handle protruding beyond the margins of the canvas:

Further:

Click on the image of the cup;
In the menu, select Object -> Transform -> Scale, set the units of measurement to px, tick Scale proportionally, set Width to 512 and press Enter, after which the value of Height should change proportionally. Result:

Now we need to position the image in the center of the canvas, for this:

In the menu, select Object -> Align and Distribute...;
Relative to select Page, and click on the alignment icons - horizontally and vertically.

As a result, we get a picture in the center of the canvas:

It remains only to save the result in an svg file:

Menu File -> Save As...;
Select the format Plain SVG (*.svg) and click the Save button.

As a result, we got an image in svg format with a resolution of `512x512' pixels. All three images have the same resolution.

Now you can start working with FontForge:

Open the program;
Click on the New button to create a new project;
Select, for example, the letter s from the word smile and double-click on the empty cell under the letter s. The symbol editor should open.
Open the menu File -> Import..., Format -> SVG, select the file face with a smile and click OK.
Close the symbol editor, then under the letter s we will see our image with a smile.
Repeat the steps for the two remaining pictures, for the cup I chose the letter c, for thumbs up the letter t. As a result, we should have images under the letters s, c and t:

It remains only to save the result to a font file:

Menu File -> Generate Font...
Select the name icons.ttf and press the Generate button, then Yes.

Congratulations, our font is ready!

2. Convert our font to `woff` and `woff2` formats

To convert a font from the ttf format to woff and woff2, I wrote a small console utility that you can download from https://github.com/druxax/font-conv .
To install, you need to download and go to the font-conv utility directory in the console, then run the commands:

npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz

After installation in the console, go to the directory with the font and run the conversion utility:

font-conv-cli

After completion, the utility will create a directory in the same folder named font-conv-res - it will contain two files of converted fonts with extensions woff and woff2.
Move all 3 font files to one folder fonts and we will proceed to the last point - add the font to the site page.

3. Adding the font to the site

Prepare an html template for our website, create a file index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Font Excellent</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Font Excellent</h1>
    <!-- TODO -->
  </body>
</html>

Let's create a file styles.css and include our font in it.

@font-face {
  font-family: "Font Excellent";
  src: url("fonts/icons.woff2") format('woff2'),
       url("fonts/icons.woff") format('woff'),
       url("fonts/icons.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

Let's add styles for font characters to styles.css.

/* General settings for all font characters */
.icon::before {
  display: inline-block;
  font-family: "Font Excellent";
  font-size: 8rem;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* For a face with a smile */
.icon-smile::before {
  content: "\0073";
}
/* For thumbs up */
.icon-thumbs-up::before {
  content: "\0074";
}
/* For the cup */
.icon-cup::before {
  content: "\0063";
}

/* Color animation and other styles */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  margin: 0 1rem;
  animation: color-animation 4s linear infinite;
}
.icon-cup {
  --color-1: #df8453;
  --color-2: #4195b8;
  --color-3: #e4a3a2;
}
.icon-smile {
  --color-1: #dfaf48;
  --color-2: #aed4d0;
  --color-3: #bff2a7;
}
.icon-thumbs-up {
  --color-1: #aed4d0;
  --color-2: #e19c9b;
  --color-3: #a9cfcb;
}
@keyframes color-animation {
  0%    { color: var(--color-1) }
  32%   { color: var(--color-1) }
  33%   { color: var(--color-2) }
  65%   { color: var(--color-2) }
  66%   { color: var(--color-3) }
  99%   { color: var(--color-3) }
  100%  { color: var(--color-1) }
}

Here we set the general styles for the icon class and specified the content - character encoding for each class of our images content: "\XXXX", where XXXX is CSS Entity value. When creating the font, we chose the letters c, s and t as its symbols, for example, the sign s CSS Entity - 0073. If you click on a symbol in FontForge, then you can see the character encoding under the menu bar. For example, by clicking on t, its code will be specified as U+0074, which means that in css we will write: content: "\0074";.

We are done with css, it remains only to add our images to our html template.

<!DOCTYPE html>
<html>
<head>
  <title>Font Excellent</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Font Excellent</h1>
  <div>
    <i class="icon icon-cup"></i>
    <i class="icon icon-smile"></i>
    <i class="icon icon-thumbs-up"></i>
  </div>
</body>
</html>

Now, by opening the file index.html in the browser, we should see:

Please support me, put likes, subscribe to the blog, write comments.
Thanks for attention.

Sending messages to clients in real-time using Server-sent Events, NodeJS and React

Andrey Smirnov — Mon, 23 May 2022 15:52:46 +0000

Overview

Server-Sent Events(SSE) technology allows sending data from server to clients in real-time, it's based on HTTP.

On the client side server-sent events provides EventSource API (part of the HTML5 standard), that allows us to open a permanent connection to the HTTP server and receive messages(events) from it.

On the server side headers are required to keep the connection open. The Content-Type header set to text/event-stream and the Connection header set to keep-alive.

The connection remains open until closed by calling EventSource.close().

Restrictions:

Allows only receive events from server (unidirectional data flow, unlike WebSockets);
Events are limited to UTF-8 (no binary data).

Possible benefits:

Because SSE works via HTTP, it will be work on clients that use proxy, that not support other protocols (like WebSocket);
If connection use HTTPS then no need to think about traffic encryption.

Browsers support: https://caniuse.com/eventsource.

In this article we will develop Todo List app, that allow us add, delete, mark as done tasks in the list.

The state of the Todo List will be shared among all connected users via Server-Sent Events.

Step 1 - Building Express Backend



# Create and go to project directory
mkdir sse
cd sse

# Create and go to subdirectory of backend part of project
mkdir server
cd server

# Initialize project and install required dependencies
npm init -y
npm install express@^4.18.1 body-parser@^1.20.0 compression@^1.7.4 cors@^2.8.5 --save

After installing required dependencies open package.json and add "type": "module" after project name. This is necessary so that NodeJS can work with javascript modules.



{
   "name": "server",
   "type": "module"
   ...
}

Create file server.js and add some template code:



import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();
app.use(compression());
app.use(cors());
app.use(bodyParser.json());

let clients = [];
let todoState = [];

app.get('/state', (req, res) => {
    res.json(todoState);
});

const PORT = process.env.PORT || 3005;
app.listen(PORT, () => {
   console.log(`Shared todo list server listening at http://localhost:${PORT}`);
});

Starting the server with the command npm start. If everything is done correctly, then by making the request curl http://localhost:3005/state you will see [] - an empty list of todo sheet.
Next, before the port declaration const PORT = process.env.PART || 3005; add the code to connect the client via SSE:



app.get('/events', (req, res) => {
   const headers = {
      // The 'text/event-stream' connection type
      // is required for SSE
      'Content-Type': 'text/event-stream',
      'Access-Control-Allow-Origin': '*',
      // Setting the connection open 'keep-alive'
      'Connection': 'keep-alive',
      'Cache-Control': 'no-cache'
   };
   // Write successful response status 200 in the header
   res.writeHead(200, headers);

   /*
   Data Shaping:
   When the EventSource receives multiple consecutive
   lines that begin with data:, it concatenates them,
   inserting a newline character between each one.
   Trailing newlines are removed.
   Double trailing newline \n\n is mandatory to indicate
   the end of an event
   */
   const sendData = `data: ${JSON.stringify(todoState)}\n\n`;

   res.write(sendData);
   // If compression middleware is used, then res.flash()
   // must be added to send data to the user
   res.flush();

   // Creating a unique client ID
   const clientId = genUniqId();
   const newClient = {
      id: clientId,
      res,
   };

   clients.push(newClient);

   console.log(`${clientId} - Connection opened`);

   req.on('close', () => {
      console.log(`${clientId} - Connection closed`);
      clients = clients.filter(client => client.id !== clientId);
   });
});

function genUniqId(){
   return Date.now() + '-' + Math.floor(Math.random() * 1000000000);
}

So, we wrote the code that allows the client to connect by establishing a permanent connection, and also saved the id and res in the array of clients so that in the future we could send data to connected clients.

To check that everything is working, we will add a code to transfer the unique ids of the connected users.



app.get('/clients', (req, res) => {
   res.json(clients.map((client) => client.id));
});

Starting the server npm start.
We connect to the server in the new terminal:



curl -H Accept:text/event-stream http://localhost:3005/events

In different terminals, you can repeat the command several times to simulate the connection of several clients.
Checking the list of connected:



curl http://localhost:3005/clients

In the terminal, you should see an array of ids of connected clients:



["1652948725022-121572961","1652948939397-946425533"]

Now let's start writing the business logic of the Todo List application, we need:
a) Add a task to the todo list;
b) Delete a task from the todo list;
c) Set/unset task completion;
d) After each action, send the state to all connected clients.

The todo list state will look like this:



[
   {
      id: "1652980545287-628967479",
      text: "Task 1",
      checked: true
   },
   {
      id: "1652980542043-2529066",
      text: "Task 2",
      checked: false
   },
   ...
]

Where id is a unique identifier generated by the server, text is the text of the task, checked is the state of the task checkbox.

Let's start with d) - after each action, send the state to all connected clients:



function sendToAllUsers() {
   for(let i=0; i<clients.length; i++){
      clients[i].res.write(`data: ${JSON.stringify(todoState)}\n\n`);
      clients[i].res.flush();
   }
}

Then we implement a) b) and c):



// Add a new task to the list and
// send the state to all clients
app.post('/add-task', (req, res) => {
   const addedText = req.body.text;
   todoState = [
      { id: genUniqId(), text: addedText, checked: false },
      ...todoState
   ];
   res.json(null);
   sendToAllUsers();
});

// Change the state of the task in the list
// and send the result state to all clients
app.post('/check-task', (req, res) => {
   const id = req.body.id;
   const checked = req.body.checked;
   todoState = todoState.map((item) => {
      if(item.id === id){
         return { ...item, checked };
      }
      else{
         return item;
      }
   });
   res.json(null);
   sendToAllUsers();
});

// Remove the task from the list and
// send the new state of the list to all clients
app.post('/del-task', (req, res) => {
   const id = req.body.id;
   todoState = todoState.filter((item) => {
      return item.id !== id;
   });
   res.json(null);
   sendToAllUsers();
});

So, the server part is ready. Full code of the server:



import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();
app.use(compression());
app.use(cors());
app.use(bodyParser.json());

let clients = [];
let todoState = [];

app.get('/state', (req, res) => {
   res.json(todoState);
});

app.get('/events', (req, res) => {
   const headers = {
      'Content-Type': 'text/event-stream',
      'Access-Control-Allow-Origin': '*',
      'Connection': 'keep-alive',
      'Cache-Control': 'no-cache'
   };
   res.writeHead(200, headers);

   const sendData = `data: ${JSON.stringify(todoState)}\n\n`;
   res.write(sendData);
   res.flush();

   const clientId = genUniqId();

   const newClient = {
      id: clientId,
      res,
   };

   clients.push(newClient);

   console.log(`${clientId} - Connection opened`);

   req.on('close', () => {
      console.log(`${clientId} - Connection closed`);
      clients = clients.filter(client => client.id !== clientId);
   });
});

function genUniqId(){
   return Date.now() + '-' + Math.floor(Math.random() * 1000000000);
}

function sendToAllUsers() {
   for(let i=0; i<clients.length; i++){
      clients[i].res.write(`data: ${JSON.stringify(todoState)}\n\n`);
      clients[i].res.flush();
   }
}

app.get('/clients', (req, res) => {
   res.json(clients.map((client) => client.id));
});

app.post('/add-task', (req, res) => {
   const addedText = req.body.text;
   todoState = [
      { id: genUniqId(), text: addedText, checked: false },
      ...todoState
   ];
   res.json(null);
   sendToAllUsers();
});

app.post('/check-task', (req, res) => {
   const id = req.body.id;
   const checked = req.body.checked;

   todoState = todoState.map((item) => {
      if(item.id === id){
         return { ...item, checked };
      }
      else{
         return item;
      }
   });
   res.json(null);
   sendToAllUsers();
});

app.post('/del-task', (req, res) => {
   const id = req.body.id;
   todoState = todoState.filter((item) => {
      return item.id !== id;
   });

   res.json(null);
   sendToAllUsers();
});

const PORT = process.env.PORT || 3005;
app.listen(PORT, () => {
    console.log(`Shared todo list server listening at http://localhost:${PORT}`);
});

Then proceed to the second step - the client part.

Step 2 - Building the Client part: React application

Go to the previously created project folder sse, then run the command to create the react application template:



npx create-react-app client

Next, go to the folder of the created application and launch it:



cd client
npm start

After that, the client application page should open in the browser http://localhost:3000.

Next, go to the file src/index.js and remove React.StrictMode from the application.



// Before
root.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>
);
// After
root.render(
   <App />
);

The fact is that React StrictMode renders components twice in development mode to detect possible problems. But in our case, this is not necessary, otherwise the client will connect to the server twice and establish a permanent connection.

Remove all the contents from the App.css file and insert our own styles:



h1 {
   text-align: center;
}
main {
   display: flex;
   justify-content: center;
}
.l-todo {
   max-width: 31.25rem;
}
form {
   margin-bottom: 1rem;
}
form input[type="submit"] {
    margin-left: 0.5rem;
}
.task-group {
   margin-bottom: 0.125rem;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
}
.task-group button {
   padding: 0.25rem 0.5rem;
   margin-left: 0.5rem;
   border: none;
   background-color: white;
}

Let's prepare the application template, remove from the App.js all content and insert our:



import './App.css';
import { useState, useEffect, useRef } from 'react';

function App(){
   return(
      <main>
      </main>
   );
}

export default App;

Let's add a list state hook to our App component:



const [tasks, setTasks] = useState([]);

Now let's add the useEffect hook in which we will establish a permanent SSE connection:



useEffect(() => {
   let mount = true;
   let events;
   let timer;
   let createEvents = () => {
      // Close connection if open
      if(events){
            events.close();
      }
      // Establishing an SSE connection
      events = new EventSource(`http://localhost:3005/events`);
      events.onmessage = (event) => {
            // If the component is mounted, we set the state
            // of the list with the received data
            if(mount){
               let parsedData = JSON.parse(event.data);
               setTasks(parsedData);
            }
      };
      // If an error occurs, we wait a second
      // and call the connection function again
      events.onerror = (err) => {
            timer = setTimeout(() => {
               createEvents();
            }, 1000);
      };
   };
   createEvents();

   // Before unmounting the component, we clean
   // the timer and close the connection
   return () => {
      mount = false;
      clearTimeout(timer);
      events.close();
   }
}, []);

Now when opening the client site http://localhost:3000 a connection to the server will occur and the server will send the todo list state to the connected client. The client, after receiving the data, will set the state of the todo list.

Let's develop an interface component for adding a new task to the list.

Add a file to the project src/AddTask.js



function AddTask(props){
   const { text, onTextChange, onSubmit, textRef } = props;
   return(
      <form onSubmit={onSubmit}>
         <input
            type="text"
            name="add"
            value={text}
            onChange={onTextChange}
            ref={textRef}
         />
         <input
            type="submit"
            value="Add"
         />
      </form>
   );
}

export default AddTask;

Creating a list item element:

Add a file to the project src/Task.js:



function Task(props){
   const { id, text, checked, onCheck, onDel } = props;
   return(
      <div className="task-group">
         <div>
            <input
               type="checkbox"
               name={`chk${id}`}
               id={`chk${id}`}
               checked={checked}
               onChange={onCheck}
            />
            <label htmlFor={`chk${id}`}>{text}</label>
         </div>
         <button
            id={`btn${id}`}
            onClick={onDel}>x
         </button>
      </div>
   );
}

export default Task;

Include the created files to App.js:



import AddTask from './AddTask';
import Task from './Task';

In our application, we will transmit data to the server in JSON format, so before moving on, we will write a small wrapper for the javascript fetch API to simplify the client code. Create a file /src/jsonFetch.js:



function jsonFetch(url, data){
   return new Promise(function(resolve, reject){
      fetch(url, {
         method: 'POST',
         headers: {
               'Content-Type': 'application/json'
         },
         body: JSON.stringify(data)
      })
      .then(function(res){
         if(res.ok){
               const contentType = res.headers.get('content-type');
               if(contentType && contentType.includes('application/json')){
                  return res.json();
               }
               return reject(`Not JSON, content-type: ${contentType}`);
         }
         return reject(`Status: ${res.status}`);
      })
      .then(function(res){
         resolve(res);
      })
      .catch(function(error){
         reject(error);
      });
   });
}

export default jsonFetch;

Include created file in App.js:



import jsonFetch from './jsonFetch';

Now let's add our addTask and Task components to the App component:



function App(){
   const [addTaskText, setAddTaskText] = useState('');
   const [tasks, setTasks] = useState([]);
   const addTextRef = useRef(null);

   useEffect(() => {
   // SSE code
      ...
   },[]);

   const tasksElements = tasks.map((item) => {
      return(
         <Task
            key={item.id}
            id={item.id}
            text={item.text}
            checked={item.checked}
            onCheck={handleTaskCheck}
            onDel={handleTaskDel}
         />
      );
   });

   return (
      <main>
         <div className="l-todo">
               <h1>Todo List</h1>
               <AddTask
                  text={addTaskText}
                  onSubmit={handleAddTaskSubmit}
                  onTextChange={handleAddTaskTextChange}
                  textRef={addTextRef}
               />
               {tasksElements}
         </div>
      </main>
   );
}

Let's write user event handlers in the App component:



function handleAddTaskTextChange(event){
   setAddTaskText(event.target.value);
}

function handleAddTaskSubmit(event){
   event.preventDefault();
   let addedText = addTaskText.trim();
   if(!addedText){
      return setAddTaskText('');
   }
   jsonFetch('http://localhost:3005/add-task', {text: addedText})
   .then(() => {
      setAddTaskText('');
   })
   .catch((err) => {
      console.log(err);
   })
   .finally(() => {
      addTextRef.current.focus();
   });
}

function handleTaskCheck(event){
   const checked =  event.target.checked;
   const targetId = event.target.id.substring(3);

   jsonFetch('http://localhost:3005/check-task', {id: targetId, checked})
   .catch((err) => {
      console.log(err);
   });
}

function handleTaskDel(event){
   let targetId = event.target.id.substring(3);

   jsonFetch('http://localhost:3005/del-task', {id: targetId})
   .catch((err) => {
      console.log(err);
   });
}

So, the logic of the client application: when component did mount, a SSE connection is created to the server, which transmits the state of the list when connected. After receiving the state of the list from the server, it is set to the client setTasks(parsedData).
Further, when adding, deleting and set/unset tasks, the changes are sending to the server, there they are recording to todoState and transmitting to all connected users.

Full client application code:



import './App.css';
import { useState, useEffect, useRef } from 'react';
import AddTask from './AddTask';
import Task from './Task';
import jsonFetch from './jsonFetch';

function App(){
   const [addTaskText, setAddTaskText] = useState('');
   const [tasks, setTasks] = useState([]);
   const addTextRef = useRef(null);

   useEffect(() => {
      let mount = true;
      let events;
      let timer;
      let createEvents = () => {
         if(events){
            events.close();
         }
         events = new EventSource(`http://localhost:3005/events`);
         events.onmessage = (event) => {
            if(mount){
               let parsedData = JSON.parse(event.data);
               setTasks(parsedData);
            }
         };
         events.onerror = (err) => {
            timer = setTimeout(() => {
               createEvents();
            }, 1000);
         };
      };
      createEvents();

      return () => {
         mount = false;
         clearTimeout(timer);
         events.close();
      }
   }, []);

   const tasksElements = tasks.map((item) => {
      return(
         <Task
            key={item.id}
            id={item.id}
            text={item.text}
            checked={item.checked}
            onCheck={handleTaskCheck}
            onDel={handleTaskDel}
         />
      );
   });

   return (
      <main>
         <div className="l-todo">
               <h1>Todo List</h1>
               <AddTask
                  text={addTaskText}
                  onSubmit={handleAddTaskSubmit}
                  onTextChange={handleAddTaskTextChange}
                  textRef={addTextRef}
               />
               {tasksElements}
         </div>
      </main>
   );

   function handleAddTaskTextChange(event){
      setAddTaskText(event.target.value);
   }

   function handleAddTaskSubmit(event){
      event.preventDefault();
      let addedText = addTaskText.trim();
      if(!addedText){
         return setAddTaskText('');
      }
      jsonFetch('http://localhost:3005/add-task', {text: addedText})
      .then(() => {
         setAddTaskText('');
      })
      .catch((err) => {
         console.log(err);
      })
      .finally(() => {
         addTextRef.current.focus();
      });
   }

   function handleTaskCheck(event){
      const checked =  event.target.checked;
      const targetId = event.target.id.substring(3);

      jsonFetch('http://localhost:3005/check-task', {id: targetId, checked})
      .catch((err) => {
         console.log(err);
      });
   }

   function handleTaskDel(event){
      let targetId = event.target.id.substring(3);

      jsonFetch('http://localhost:3005/del-task', {id: targetId})
      .catch((err) => {
         console.log(err);
      });
   }
}

export default App;

Please support me, like and write comments.

DEV Community: Andrey Smirnov

How to Use Throttle and Debounce in React to Increase Performance

Overview

Examples of using Throttle:

Examples of using Throttle:

Step 1 - Application Template

Step 2 - Usual events hendler

Step 3 - Event Handler with Throttle

Step 4 — Event Handler with Debounce

How to make your own Font Awesome font

Overview

1. Creating a font

2. Convert our font to woff and woff2 formats

3. Adding the font to the site

Sending messages to clients in real-time using Server-sent Events, NodeJS and React

Overview

Step 1 - Building Express Backend

Step 2 - Building the Client part: React application

2. Convert our font to `woff` and `woff2` formats