TSX. Сортировка JSX-атрибутов

🧱 Суть

Порядок JSX-атрибутов не влияет на работу приложения, но влияет на читаемость.

📦 Проблема

React не требует определённого порядка атрибутов:

<Button className="red" onClick={save} disabled />

и

<Button disabled onClick={save} className="red" />

работают одинаково.
Но в больших проектах придерживаются единого стиля для читаемости.

💻 Код

Рекомендуемый порядок JSX props

1. key

Всегда первым:

<Item
	key={item.id}
/>

2. ref

После key:

<Input
	ref={inputRef}
/>

3. Поведение компонента

События и управление:

<Button
	onClick={handleClick}
	disabled={loading}
/>

Примеры:

• onClick
• onChange
• disabled
• href
• type

4. Внешний вид

После логики:

<Button
	onClick={handleClick}
	className="button"
/>

Примеры:

• className
• style

5. Варианты отображения

Настройки внешнего вида:

<Button
	variant="primary"
	size="lg"
/>

Примеры:

• variant
• size
• color

Автоматизация через ESLint

Установить:

npm install eslint-plugin-react --save-dev

Настройка:

{
	"rules": {
		"react/jsx-sort-props": [
			"warn",
			{
				"callbacksLast": true,
				"shorthandFirst": true,
				"reservedFirst": true,
				"noSortAlphabetically": true
			}
		]
	}
}

🎯 Вывод

Удобный порядок:

1. key
2. ref
3. управление (onClick, disabled)
4. внешний вид (className, style)
5. варианты (size, variant)

🔗 Связано

• React. ReactNode vs ReactElement
• React. Spread
• Library. Prettier
• Library. Clsx