tgoop.com/React_lib/655
Create:
Last Update:
Last Update:
Как писать чистый код в React? 🤔
Я знаю, что все хотят писать идеальный код, но реальность такова: зачастую приходится разбираться с грязными, запутанными компонентами. Сегодня покажу вам несколько принципов, которые помогут держать код в порядке.
1️⃣ Разбивайте компоненты 📌
Если ваш компонент растет и становится слишком сложным, разделите его на более мелкие части. Например, если у вас в компоненте 200 строк, скорее всего, это уже слишком.
❌ Плохо:
const Profile = ({ user }) => {
return (
<div>
<img src={user.avatar} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.bio}</p>
<button>Follow</button>
</div>
);
};
✅ Хорошо:
const Avatar = ({ src, alt }) => <img src={src} alt={alt} />;
const UserInfo = ({ name, bio }) => (
<>
<h2>{name}</h2>
<p>{bio}</p>
</>
);
const FollowButton = () => <button>Follow</button>;
const Profile = ({ user }) => (
<div>
<Avatar src={user.avatar} alt={user.name} />
<UserInfo name={user.name} bio={user.bio} />
<FollowButton />
</div>
);
2️⃣ Используйте
useMemo и useCallback ⚡ Если передаете функции в пропсы или у вас тяжелые вычисления, используйте мемоизацию.
const handleClick = useCallback(() => {
console.log("Clicked!");
}, []);
3️⃣ Следите за зависимостями в
useEffect 🔍 Ловушка многих новичков: забывают указывать зависимости или наоборот — указывают лишнее.
❌ Так делать нельзя:
useEffect(() => {
fetchData();
}, []);
✅ Правильный вариант:
useEffect(() => {
fetchData();
}, [fetchData]);
Чистый код — это не просто прихоть, а необходимость! Если писать код аккуратно, вам (и вашим коллегам) будет проще его поддерживать.
А какие принципы чистого кода используете вы? Делитесь в комментариях! 👇
✍️ @React_lib
BY React
Share with your friend now:
tgoop.com/React_lib/655