Раночку, друзі!
🎮 Сьогодні занурюємось у світ Roblox! 😄

Щоб трохи розбавити будні, обирай свій варіант в опитуванні 👇

#codica_humor

TikTok | Instagram | Telegram

🎯 Як відповідати на технічні питання на співбесіді?

#codica_interviews

👉 Ми завжди кажемо: до співбесід потрібно готуватись заздалегідь.
👉 Тож давайте розбиратись разом — без заучування, але з розумінням.

1️⃣ Контрольовані та неконтрольовані компоненти в React
📌 Очікувана відповідь:

📍 Контрольований компонент (Controlled component) – це коли значення елемента форми повністю контролюється React через state.

Тобто:
• значення input зберігається у state
• кожна зміна проходить через onChange → setState
• UI завжди відображає state

Приклад:

function InputExample() {
  const [value, setValue] = React.useState('');

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

👉 React – єдине джерело істини (single source of truth).

📍 Неконтрольований компонент (Uncontrolled component) – це коли значення зберігається в DOM, а React лише читає його при потребі (через ref).

Приклад:

function InputExample() {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Submit</button>
    </>
  );
}

👉 Джерело істини – DOM, а не React state.

📌 Коли що використовувати:
📍 Controlled
• складні форми
• валідація в реальному часі
• залежні поля / динамічний UI
• коли потрібно повністю контролювати дані

📍 Uncontrolled
• прості форми
• швидкі прототипи
• інтеграція зі сторонніми бібліотеками (наприклад, legacy JS або non-React)
• коли не потрібен контроль на кожен input event

⚠️ Що часто питають додатково:
• при controlled компонентах більше ререндерів → можливі перформанс-проблеми на великих формах
• uncontrolled компоненти складніше тестувати та валідовувати
• не можна змішувати

value

і

defaultValue

в одному input

 • defaultValue

використовується саме для uncontrolled компонентів

І бажаємо успіхів на співбесідах!
Крок за кроком – до оферу 🚀

TikTok | Instagram | Telegram