373просмотров
23 октября 2025 г.
Score: 410
Ребята, как же у меня подгорает сегодня с утра.
С начала недели я работаю с куском кода в котором ужасно почти все от первой строчки до последней.
Это несколько модулей для одной большой фичи, которая работает по всей приле. Для референса приведу часть одного из компонентов export const PromoBottomSheet: React.FC<PromoBottomSheetProps> = ({ ... close, ...
}) => { //... useEffect(() => { //.... close() }, [close, isError]) const closeHandler = useCallback(() => close(), [close]) const categoryButtonClickHandler = useCallback(() => { closeHandler() if (place) { logAdvertiseBottomSheetButtonClick(true) } }, [closeHandler, logAdvertiseBottomSheetButtonClick, place]) const deeplinkButtonClickHandler = useCallback(() => { closeHandler() logAdvertiseBottomSheetButtonClick() }, [closeHandler, logAdvertiseBottomSheetButtonClick]) //... const footerButton = categoryButton && place ? ( <CategoryButton data={categoryButton} placeSlug={place.slug} brandSlug={place.brandSlug} onClick={categoryButtonClickHandler} /> ) : deeplinkButton ? ( <DeeplinkButton data={deeplinkButton} onClick={deeplinkButtonClickHandler} /> ) : null return ( <PromoBottomSheetLayout close={closeButton ? close : undefined} footerContent={footerButton} > ... </PromoBottomSheetLayout> )
} Я удалил большую часть кода и оставил только самое интересное на мой взгляд. Тут очень много того от чего у меня реально бомбит. Во-первых я не понимаю смысла заворачивания каждой функции в useCallback. Да его использование должно помочь оптимизировать ререндеры, но использовать его нужно не бездумно. В официальной документации сказано:
Caching a function with useCallback is only valuable in a few cases: You pass it as a prop to a component wrapped in memo. You want to skip re-rendering if the value hasn’t changed. Memoization lets your component re-render only if dependencies changed.
The function you’re passing is later used as a dependency of some Hook. For example, another function wrapped in useCallback depends on it, or you depend on this function from useEffect. There is no benefit to wrapping a function in useCallback in other cases. Т.е. прямым текстом сказано, что это имеет смысл только с компонентами завернутыми в memo или если функция используется в массиве зависимости другого хука. Здесь компоненты уровнем ниже без мемо, да и в зависимостях функция используется только для ненужных useCallback. Я даже хотел пойти пообщаться с человеком который это написал, но к счастью, он уже не работает в компании. Во-вторых создание нескольких функций с одной и той же целью - вызвать close(). Помните, что лучший код - тот которого нет. От не требует тестов или времени на выполнение, в нем не будет багов и его не нужно читать другим разработчикам. Эта мысль которую я прочел когда-то у Фаулера и согласен на 1000%. В общем выговорился, пошел продолжать. Всем продуктивной недели.