dimaaan_21

useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

Если еще актуально, то можно сделать так:

const fs = require('fs')
{...}
const PATHS = {
  src: path.join(__dirname, '../src'),
  dist: path.join(__dirname, '../dist'),
  assets: 'assets/'
}
{...}
const PAGES_DIR = `${PATHS.src}/${PATHS.assets}pages/`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))
{...}
module.exports = {
  {...}
  plugins: [
    {...}
    ...PAGES.map(page => new HtmlWebpackPlugin ({
      template: `${PAGES_DIR}/${page}`,
      filename: `./${page.replace(/\.pug/,'.html')}`
    }))
  ],
}

Чтобы сделать хорошо, нужно сделать без express, например, аналог Вашего кода:

var http = require('http');

var me = { name: 'jura', age: 22 };

var routing = {
  '/': 'welcome to homepage',
  '/user': me,
  '/user/name': function() { return me.name; },
  '/user/age': function() { return me.age; }
};

var types = {
  object: function(o) { return JSON.stringify(o); },
  string: function(s) { return s; },
  undefined: function() { return 'not found'; },
  function: function(fn, req, res) { return fn(req, res) + ''; },
};

http.createServer(function (req, res) {
  var data = routing[req.url],
      result = types[typeof(data)](data, req, res);
  res.end(result);
}).listen(80);

И более универсальный вариант с параметрами:

var http = require('http');

var me = { name: 'jura', age: 22 };

var routing = {
  '/': 'welcome to homepage',
  '/user': me,
  '/user/name': function() { return me.name; },
  '/user/age': function() { return me.age; },
  '/user/*': function(client, par) { return 'parameter=' + par[0]; }
};

var types = {
  object: function(o) { return JSON.stringify(o); },
  string: function(s) { return s; },
  number: function(n) { return n + ''; },
  undefined: function() { return 'not found'; },
  function: function(fn, par, client) { return fn(client, par); }
};

var matching = [];
for (key in routing) {
  if (key.indexOf('*') !== -1) {
    var rx = new RegExp(key.replace('*', '(.*)'));
    matching.push([rx, routing[key]]);
    delete routing[key];
  }
}

function router(client) {
  var rx, par, route = routing[client.req.url];
  if (route === undefined) {
    for (var i = 0, len = matching.length; i < len; i++) {
      rx = matching[i];
      par = client.req.url.match(rx[0]);
      if (par) {
        par.shift();
        route = rx[1];
        break;
      }
    }
  }
  var renderer = types[typeof(route)];
  return renderer(route, par, client);
}

http.createServer(function (req, res) {
  res.end(router({ req: req, res: res }) + '');
}).listen(80);

Короче, я тут поковырялся. И у меня получилось за Нгинксом его заставить работать, но только - создавая "пространство имён" принудительно.
На клиенте запрос на подключение выглядит так
var socket = io('http://localhost/sock');
на сервере так

var io = require('socket.io')(3001); // спицально ему другой порт прикрутил, для "чистоты эксперимента"
var chat = io.of('/sock');
chat.on('connection', socket => { ...

и дальше везде, где был io в коде - заменить на переменную chat - типа chat.to(socket.id).emit... и т.д. (хотя, видимо, можно было и просто - io переопределить: io = io.of('/sock');).
И наконец, Nginx его перенаправляет так

location /sock {
						proxy_set_header Upgrade $http_upgrade;
						proxy_set_header Connection "upgrade";
						proxy_http_version 1.1;
						proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
						proxy_set_header Host $host;
						proxy_pass http://127.0.0.1:3001/sock;
				}

Так всё зафурычило.