Когда вы вызываете одну из «встроенных» ловушек, правило react-hooks/exhaustive-deps
достаточно умен, чтобы распознавать, что некоторые возвращаемые значения гарантированы React как неизменные. Это относится к средствам обновления состояния и диспетчерам, возвращаемым хуками useState
и useReducer
.
В этом первом примере при вызове useCallback
не требуется указывать установщик состояния как зависимость:
export const Example1 = () => {
const [date, setDate] = useState(new Date())
const resetDate = useCallback(() => {
setDate(new Date())
}, []) // No need to list any dependency here. No eslint warning.
return (
<>
Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
</>
)
}
Но во втором примере, где сеттер возвращается с помощью настраиваемого хука, это требуется.
const useDateState = (initialValue: Date) => {
return useState(initialValue)
}
export const Example2 = () => {
const [date, setDate] = useDateState(new Date())
const resetDate = useCallback(() => {
setDate(new Date())
}, []) // ESLint complains: React Hook useCallback has a missing dependency: 'setDate'. Either include it or remove the dependency array.
return (
<>
Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
</>
)
}
Есть ли способ сообщить правилу eslint, что сеттер вернул по моему пользовательскому хуку не изменится, и что ему не нужно указывать это как зависимость? Это поможет удалить некоторый код.
Примечание: я прочитал FAQ по React , этот вопрос StackOverflow и понимаю, что добавление зависимости не требует затрат производительности это не изменится.
Но поскольку такое поведение доступно для встроенных хуков, я хочу знать, есть ли способ получить то же самое для пользовательского хука.