Daniel~

Достаточно прочитать первые несколько байтов картинки. Где-то в первых 5 содержится вся нужная мета-инфа. По крайней мере так для jpg работает

В итоге сделал микросервис, который выплевывает на фронт оригинальные высоту/ширину. При загрузке чата запрашиваю размеры для всех картинок (пагинация по 15 сообщений, так что изображений не долнжо быть много) и отрисовываю соответственно этим размерам картинку

Добавьте [].

T extends Promise<any>[] | []

Лучше передавать импорты через callback, чтобы они каждый раз не импортировались. Вот моя версия:

import { DependencyList, useEffect, useRef } from "react";

type Import = Promise<any>;

type AwaitedImports<T extends Import[]> = { [P in keyof T]: Awaited<T[P]> };

type Resolve<T extends Import[]> = (result: AwaitedImports<T>) => void;

function useEffectWithImports<T extends Import[] | []>(
  resolve: Resolve<T>,
  imports: () => T,
  deps?: DependencyList
) {
  const resolveRef = useRef(resolve);
  const importsRef = useRef(imports);
  resolveRef.current = resolve;
  importsRef.current = imports;

  useEffect(() => {
    const promises = importsRef.current();
    Promise.all(promises)
      .then(resolveRef.current as Resolve<T>)
      .catch(console.error);
  }, deps);
}

useEffectWithImports(
  ([fs, path]) => {},
  () => [import("fs"), import("path")],
  []
);

Мне этого не нужно было делать, потому что я использовал create-react-app, в конфиге вебпака которого уже произведена настройка sass?

Да.

Если п1 верный, то как в таком случае это реализовано? Я ведь мог установить не sass, а node-sass или dart-sass или любую другую библиотеку?

Примерно так:

const fs = require("fs");

function modulesHasOneOf(moduleNames) {
  return moduleNames.some(name => {
    const modulePath = require.resolve(name);
    return fs.existsSync(modulePath);
  });
}

const isSassInstalled = modulesHasOneOf(["sass", "dart-sass", "node-sass"]);

const webpackConfig = {
  ...
  module: {
    rules: [
      {
         test: isSassInstalled ? /\.scss$/ : /\.css$/,
         use: ["css-loader", isSassInstalled && "sass-loader"].filter(Boolean)
      }
    ]
  }
};

UPD:
Все оказалось проще:

const config = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["css-loader"]
        },
        {
          test: /\.s(a|c)ss$/,
          use: ["css-loader", "sass-loader"]
        }
      ]
    }
  };

И уже в зависимости от расширения файла выбирает то или иное правило. Главное, да, просто поставить пакет (dart-,node-)sass.

https://github.com/facebook/create-react-app/blob/...

Не парьтесь. Чаты - это просто. И сам вебсокет - штука простая.

Если интересно, можете почитать вот эту статью: там рассказано, как самому, используя только http пакет в ноде принять ws-подключение и обработать/отправить сообщение
https://habr.com/ru/post/513224/

Также очень полезно почитать сам rfc о протоколе (в частности раздел 5.2, где показан сам фрейм)
https://www.rfc-editor.org/rfc/rfc6455

Вы неправильно используете контекст.
https://reactjs.org/docs/context.html

Вы должны обернуть в провайдер те компоненты, которые будут использовать ваш контекст, то есть

const Context = createContext();

function ContextProvider({ children }) {
  const [active, setActive] = useState(false);
  return <Context.Provider value={{ active, setActive }} >{children}</Context.Provder>
}

function App() {
  return (
    <ContextProvider>
       <MyComponent />
    </ContextProvider>
  )
}

function MyComponent() {
  const { active, setActive } = useContext(Context);
  ...
}

Через flexbox это отлично делается

<div class="parent">
  <div class="block-1"></div>
  <div class="block-2"></div>
</div>

.parent {
  display: flex;
  flex-direction: column;
}

.block-2 {
  flex-grow: 1;
}

flex-grow: 1 говорит флекс-элементу занять все оставшееся место