Прокачиваем React хуки с помощью FRP

[JSMonk]

Хотел подобное реализовать как только хуки анонсировали, но на деле это оказалось бесполезным, потому что гредет suspense и асинхронные компоненты

[mikolalex]

Suspense применим только для первоначальной подгрузки данных для рендеринга компонента. В случае отправки формы с данными он вам ничем не поможет. Асинхронные компоненты тоже.

[halfcupgreentea]

увидел

result: [(name, surname) => fetch(...), '-name', '-surname', 'submit'],

и сразу вопрос: это нормально типизируется?

[mikolalex]

Нет) Если пугают строчки, можно заменить на константы, но типы нормально не выводятся пока.

[LEXA_JA]

Я не совсем понял, а зачем использовать useEffect для загрузки данных в этом случае? Почему бы просто не сделать так:

const App = () => {
  const [name, setName] = useState('');
  const [result, setResult] = useState();

  const clickHandler = useCallback(() => {
    fetch('//example.api/' + name).then((data) => {
      setResult(data.result);
    });
  }, [setResult, name])

  return <div>
    <input onChange={e => setName(e.target.value)}/>
    <input type="submit" value="Check" onClick={clickHandler}/>
    { result && <div>Result: { result }</div> }
  </div>;
}

[mikolalex]

Хороший вопрос) Именно в таком простом виде, какой я приводил, ваш способ будет удобнее. useEffect я рассматривал как наиболее общий способ выполнения сайд-эффектов. Балгодаря своим «зависимостям», он позволяет запускать сайд-эффекты не только в результате событий из ДОМа, но и при любых изменениях состояния, т.е. более обобщенно описывает взаимосвязь. Например, у нас делается аджакс запрос, в результате которого что-то меняется в состоянии, и возникает потребность сделать другой запрос. useEffect в данном случае подойдет(для описания второго запроса), т.к. он может «реагировать» на изменения состояния, а useCallback — нет.

[kshshe]

Хотел бы обратить внимание, что такое использование хука useEffect неправильно:

useEffect(() => {
    fetch('//example.api/' + name).then((data) => {
      setResult(data.result);
    });
  }, [request]);

Оно неправильно, потому что в завимисостях нужно указывать все, что исполользуется внутри хука. Здесь же мы используем name в хуке, но его нет в зависимостях.
Чтобы useEffect работал правильно, нужно указывать зависимости честно, не обманывая реакт. При таком использовании хуки работают намного очевиднее.
Отличная статья про useEffect, в которой объясняется ментальная модель эффектов.

[mikolalex]

Отличное замечание. Видимо, вы пробежались вскользь по моей статье, рассмотрев только примеры кода. Что ж, мне несложно объяснить еще раз. Указанную вами статью я читал, и в своей статье на нее ссылаюсь(точнее, на ее русскоязычный перевод здесь на Хабре):

Большинство проблем, рассмотренных в недавней статье о useEffect, на mrr в принципе невозможны

Приведенный вами пример как раз из таких. На mrr при всем желании вы не сможете сделать указанную ошибку, т.к. невозможно получить доступ к значению другого потока кроме как указав его в зависимостях:

isValid: [name => { 
   // делаем что-то с name
}, 'name']

На хуках же вы можете легко нарушить указанные Дэном принципы, и что хуже того, ваш код в результате может все-таки получиться рабочим(до поры до времени, или нет). Итак, избавляться от потенциальных ошибок априорно(на уровне архитектуры), или с помощью линтера — выбор за вами ;)
Кстати, если вы внесете name в список зависимостей для useEffect, то код будет работать неправильно: запрос будет отправляться сразу по мере ввода юзером данных, хотя нам по условию нужно отправлять его только по клику на кнопку.

[kshshe]

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

На самом деле да, начал читать, но потом не было времени, поэтому, к сожалению, упустил суть. Уже отложил в закладки, но комментарий написал)

Кстати, если вы внесете name в список зависимостей для useEffect, то код будет работать неправильно: запрос будет отправляться сразу по мере ввода юзером данных, хотя нам по условию нужно отправлять его только по клику на кнопку.

Предположу, что ответ есть в статье, которую я все-таки прочитаю чуть позже, но разве не лучше для обработки клика использовать useCallback? useEffect, все-таки, не совсем для такого типа действий предполагается.