Комментарии 9
Хотел подобное реализовать как только хуки анонсировали, но на деле это оказалось бесполезным, потому что гредет suspense и асинхронные компоненты
увидел
result: [(name, surname) => fetch(...), '-name', '-surname', 'submit'],и сразу вопрос: это нормально типизируется?
Я не совсем понял, а зачем использовать 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>;
}
Хотел бы обратить внимание, что такое использование хука useEffect неправильно:
useEffect(() => {
fetch('//example.api/' + name).then((data) => {
setResult(data.result);
});
}, [request]);Оно неправильно, потому что в завимисостях нужно указывать все, что исполользуется внутри хука. Здесь же мы используем name в хуке, но его нет в зависимостях.
Чтобы useEffect работал правильно, нужно указывать зависимости честно, не обманывая реакт. При таком использовании хуки работают намного очевиднее.
Отличная статья про useEffect, в которой объясняется ментальная модель эффектов.
Большинство проблем, рассмотренных в недавней статье о useEffect, на mrr в принципе невозможны
Приведенный вами пример как раз из таких. На mrr при всем желании вы не сможете сделать указанную ошибку, т.к. невозможно получить доступ к значению другого потока кроме как указав его в зависимостях:
isValid: [name => {
// делаем что-то с name
}, 'name']
На хуках же вы можете легко нарушить указанные Дэном принципы, и что хуже того, ваш код в результате может все-таки получиться рабочим(до поры до времени, или нет). Итак, избавляться от потенциальных ошибок априорно(на уровне архитектуры), или с помощью линтера — выбор за вами ;)
Кстати, если вы внесете name в список зависимостей для useEffect, то код будет работать неправильно: запрос будет отправляться сразу по мере ввода юзером данных, хотя нам по условию нужно отправлять его только по клику на кнопку.
Видимо, вы пробежались вскользь по моей статье, рассмотрев только примеры кода.
На самом деле да, начал читать, но потом не было времени, поэтому, к сожалению, упустил суть. Уже отложил в закладки, но комментарий написал)
Кстати, если вы внесете name в список зависимостей для useEffect, то код будет работать неправильно: запрос будет отправляться сразу по мере ввода юзером данных, хотя нам по условию нужно отправлять его только по клику на кнопку.
Предположу, что ответ есть в статье, которую я все-таки прочитаю чуть позже, но разве не лучше для обработки клика использовать useCallback? useEffect, все-таки, не совсем для такого типа действий предполагается.
Прокачиваем React хуки с помощью FRP