Я не делаю импорт, а получаю svg с сервера

Всем привет! Выбираю инструмент для реализации кастомной диаграммы гантта. Что посоветуете? Основная задача: сделает его максимально быстрым для рендера. Сейчас это реализовано на svg, но это давольно медленно при большом объеме компонентов. Может кто-то сталкивался с подобной проблемой?

Ссылкой на изображение?

Все верно

Тогда никак

Смысле костыль ?
Проверить чисто
Нормальное задание

А что проверить то?)

Способность твою подумать

Философов ищут, похоже) Не задачи решать, а раздумывать на абстрактные темы)

Фидбек был таким:

Первый:

При первом приближении - плохо.
Смешан императивный и декларативный подходы, реализовано через модель MobX (без него работать не будет совсем, а мы от MobX избавляемся). Также, MobX используется неправильно, о чем даже сообщает консоль (необходимо записывать значения через action()-функции). Совершенно странный метод получения позиции курсора.

----


Второй:

Видно, что была проделана большая работа. Получилась сложная штука со своими проблемами.
Проигнорированы важные ошибки, описанные прямо в консоли и редакторе:
- Mobx предупреждает в консоли о некорректном использовании observable значений в асинхронных функциях
- Линтер жалуется на accessor в InputModel, нужно было подправить tsconfig
- useUnmount некорректно использует useEffect, об этом предупреждает линтер. 
- import styled-components просит догрузить типы
Выбран сложный подход к управлению состоянием. Можно допустить, что mobx является строгой необходимостью (хотя усложнения конечно стоит избегать при любой возможности). Нужно учитывать, что теперь мы работаем с observable и пытаемся подружить его с жизненным циклом react. Нужно быть очень осторожным, чтобы сделать такой код понятным. Например, объяснять каждый случай использования setTimeout.
Главная проблема в количестве состояний. Возможно в таком количестве переменных возникла путаница и при разработке, например, добавлен focus, но внутри используется elementIsActive. Представляю как трудно было все согласовать.
Заявленные функции можно реализовать с помощью двух useState (value и cursorPosition) и одного или двух ref. Остальные состояния являются производными, т.е. их можно вычислять и мемоизировать внутри рендера.
Вычисление ширин букв можно переложить на браузер (с помощью работы с рефом текста или рендерить каждую букву в своем span, определяя на какую кликнули).
Спасибо за попытку. Но мы бы хотели большего внимания к деталям и управления неотъемлемой сложностью :)

Вроде норм фидбэк, если задание было норм составлено. Но как мне кажется, было бы лучше, если было указано, не то, что нельзя использовать инпут, а например, что нужно сделать меншинг для комментов в инпуте, вот тогда тут сразу становится понятно, что не получится использовать инпут, так как простой текст не подойдет, а всякие "запреты" какая-то российская фишка)

Задание так и было составлено - 2 пункта: 1) нельзя использовать input и аттрибут contenteditable; 2) нельзя использовать обработчики событий на элементах)

Всем привет ✋✋. У меня вопрос возможно ли написать npm пакет одновременно для React и vanila JS ?

А либы можно было использовать?)

Не сказано) Я не использовал

А, ну кроме MobX

Странно задание, короч...

Есть хорошие либы для подобного

Лучше бы сказали не использовать - они пишут в фидбеке, что сами отказываются отказываются от MobX

Всем привет. Объясните пожалуйста, почему map ничего не выводит из файла json. Но массив test из цифр выводит
https://codesandbox.io/s/silent-dream-3duux?file=/src/Review.js