HighlighterProposal

AboutMe.js

function ResumeAboutMe(props) {
  const [aboutMe] = useHighligted(props.aboutMe);

  return (
    <div>
      <HiglightedText>{aboutMe}</HiglightedText>
    </div>
  );
}

connect(
  { aboutMe: state.resume.aboutMe },
  { addToHightlight }
)(ResumeAboutMe);

Highligter.js

// highlight.js

let registeredFields = {};
let registeredFieldsPromises = {};
let timeoutHandler = null;

async function fetchHighlighter() {
  // Чтобы не взорвался рантайм и не было race conditions
  const pendingFields = registeredFields;
  const pendingFieldsPromises = registeredFieldsPromises;
  registeredFields = {};
  registeredFieldsPromises = {};
  timeoutHandler = null;

  // Фетчер
  try {
    const result = await fetcher.post('/highlight', pendingFields);
    Object.keys(result).forEach((key) => {
      pendingFieldsPromises[key].resolve(result[key]);
    });
  } catch (e) {
    Object.keys(pendingFieldsPromises).forEach((key) => {
      pendingFieldsPromises[key].reject();
    });
  }
}

// Добавляем таску на фетчер только единожды, тротлинг на минималках
function addToHighligterProcessor(key, field) {
  // сохраняем псевдо-маппинг (дешевый) и заводим промисы
  registeredFields[key] = field;
  let resolve;
  let reject;
  const promise = new Promise((_resolve, _reject) => {
    resolve = _resolve;
    reject = _reject;
  });
  registeredFieldsPromises[key] = { promise, resolve, reject };
  if (!timeoutHandler) {
    timeoutHandler = setTimeout(fetchHighlighter, 0);
  }
  // Этот промис и будет зарезолвлен
  return promise;
}

// Кастомный хук, чтобы реализация была скрыта
export default function useHighligted(key, field) {
  const [value, setValue] = useState(field);
  useEffect(() => {
    addToHiglighterProcessor(key, field).then((highlighted) => {
      setValue(highlighted);
    });
  }, [field]);

  return value;
}