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

www.tg-me.com/ua/telegram/com.React_lib/655

1.3K viewsFeb 22 at 17:28

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

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  fetchData();
}, [fetchData]);

BY React