Как писать чистый код в React? 🤔

Как писать чистый код в 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